Angular 4 Skip Links

时间:2017-10-13 13:31:44

标签: javascript angular focus accessibility

致力于使角度项目可访问。页面有这样的框架:每个元素都是一个组件。

<div>
<topnav> </topnav>
<leftnav> </leftnav>
<subnav> </subnav>
<header> </header>
<router-outlet> </router-outlet>
</div>

我会将跳过链接放在顶部导航中,并且将事件发送到框​​架很容易,但是如何指示它将默认情况下的第一个可聚焦元素聚焦到路由器插座中?我知道我可以使用view child并获取对插座的引用,然后通过它访问子节点,但它并不总是与节点索引相同。

由于

1 个答案:

答案 0 :(得分:1)

通常,跳到内容链接会转到容器元素,而不是第一个可聚焦元素。因为在屏幕阅读器用户想要了解的第一个链接/输入/等之前可能存在文本内容。

为路由器插座容器添加id属性,并使链接的href值具有相同的值。例如

<a href="#output">
<div id="output">