Question

我在我们的网站上实施了WCAG（网页内容无障碍指南）。我正在使用JAWS屏幕阅读器进行测试并使用 Tab 键进行导航。

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

<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>

在上面的示例中，屏幕阅读器正确导航和读取，直到＆＃34;联系支持＆＃34;。然后，如果我们尝试使用 Tab 键继续前进，则会显示＆＃34;联系支持访问链接＆＃34;而不是去播放器中的播放按钮。

Answer 1

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

包括库naviBoard
在所需项目上使用class导航，然后将tabindex放在这些项目上。
使用naviBoard.setNavigation()方法设置导航。

你们都做完了！

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

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

1 个答案: