javascript - Angular 4 跳过链接

标签 javascript angular focus accessibility

致力于使 Angular 项目易于访问。页面有这样一个框架:其中每个元素都是一个组件。

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

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

谢谢

最佳答案

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

为 router-outlet 容器提供一个 id 属性,并使链接的 href 值相同。例如

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

关于javascript - Angular 4 跳过链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46731184/

相关文章:

javascript - 当用户使用 Javascript 在外部单击时关闭下拉菜单

Angular 4 上下文在身份验证后丢失

javascript - 如何在动态生成的mat-table中将字符串转换为类型日期

javascript - 如何用JavaScript模拟点击让当前输入失去焦点

css - 使用 iPad 触发 CSS :focus status? 是否点击 <a> 标签

javascript - 如何仅使用 JavaScript 切换输入的焦点?

javascript - 前置淡出过渡

javascript - d3 : will selection. 样式 ('font-size' ) 总是以 px 为单位返回值?

javascript - 停止按键事件

Angular (4) : Multiple HTTP requests with Observables: one after another succeeds