时间戳

首页 > 解决方案 > 屏幕阅读器在导航时读取额外内容

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

问题描述

我正在我们的网站上实施 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，它会显示“联系支持访问的链接”，而不是转到播放器中的播放按钮。

标签： htmlscreen-readersjaws-screen-readerkeyboard-navigation

解决方案

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

  • 包括库 naviBoard
  • class在所需项目上使用navigabletabindex并将焦点放在它们上。
  • 使用方法设置导航 naviBoard.setNavigation()。

你们都完成了！

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

推荐阅读