屏幕阅读器在导航时读取额外的内容

Question

我正在我们的网站上实施WCAG(Web内容可访问性指南(。我正在使用 JAWS 屏幕阅读器使用Tab键进行测试和导航。

问题是，屏幕阅读器在导航到视频播放器时会读取额外的内容。它读取"访问过的链接"而不是转到下一个元素，并且在阅读相同的元素时没有被聚焦或突出显示。通过浏览器检查时，我们也看不到任何元素。

<ul class="nav in" id="side-menu">
<li><a href="/myaccount"><i class="fa fa-university" aria-hidden="true"></i> My Account</a></li>
<li><a href="/register"><i class="fa fa-pencil" aria-hidden="true"></i> Register</a></li>
<li><a href="/contact"><i class="fa fa-envelope" aria-hidden="true"></i>Contact Support</a></li>
</ul>
<div class="vzaar_media_player embed-responsive embed-responsive-4by3">
<iframe id="iframe-example" src="https://www.youtube.com/embed/2MpUj-Aua48?ecver=1&amp;autohide=1&amp;showinfo=0&amp;feature=oembed" class="embed-responsive-item" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
</iframe>
</div>

在上面的示例中，屏幕阅读器导航并正确读取，直到"联系支持人员"。然后，如果我们尝试使用Tab键向前移动，它会显示"联系支持人员访问的链接"，而不是转到播放器中的播放按钮。

Answer 1

您可以使用https://github.com/amanboss9/naviboard 库检查更强大的键盘导航处理方式。由于tab键可帮助您浏览模式并在完成页面导航后失去焦点。shift+tab有助于反向导航，但您仍然无法根据屏幕上的元素叠加控制导航。

• 包括库导航板
• 使用class可导航的所需项目，并放置tabindex以将重点放在它们上。
• 使用naviBoard.setNavigation()方法设置导航。

你们都完成了！！

您可以通过下面的jsfiddle进行演示： https://jsfiddle.net/amanboss9/unf94tjo/3/embedded/result/