Question

我的任务是完成a11y项目清单。（http://a11yproject.com/checklist.html）对于那些不确定那是什么的人。

我注意到在我们的网站（www.adn.com）上，当您浏览网站时，它会在完成文章内容之前通过我们的整个左栏菜单。

有没有办法操纵我们的网站的顺序＆＃34; Tabbed through＆＃34;仅限键盘用户？

行业新手，目前是初级开发者。如果这是一个简单的问题，请道歉。

Answer 1

您要找的是tabindex

w3schools示例

<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

参考：w3schools.com/tags/att_global_tabindex.asp

Answer 2

您遇到的问题不是tabindex问题，因为tabindex对于菜单在DOM中的位置是正确的。（同时将tabindexes更改为超过0或-1的值可能会搞砸接口的预期Tab键顺序）。

这里发生的事情是，菜单已经被视觉隐藏，通过将其放在屏幕外，但它还没有被键盘用户/屏幕阅读器充分隐藏。

您需要更新菜单的CSS，以便当它位于屏幕外时，id="slider-menu-nav-list"设置为display: none。然后，当激活菜单按钮时，#slider-menu-nav-list应设置为display: block;

仔细查看源代码，您还必须将“菜单”按钮更改为实际的<button>元素，因为它目前的键盘无法作为<div><span>组合使用，因此目前没有键盘用户实际打开菜单的方式。（并非所有键盘用户都是盲人，如果无法看到当前键盘焦点所在的位置，可能会感到沮丧。）

希望这有帮助！

Web辅助功能 - Tab顺序？

2 个答案: