网络可访问性-选项卡顺序？

Question

我的任务是检查a11y项目清单。(http://a11yproject.com/checklist.html)对于那些不确定那是什么的人。

我注意到，在我们的网站上，(www.adn.com)当你浏览网站时，它会贯穿我们的整个左舷菜单，然后再进入文章内容。

有什么方法来操纵我们的网站的顺序是“通过标签”的键盘用户吗？

新的行业，目前是一个初级发展。抱歉，如果这是一个简单的问题。

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>

参考资料：tabindex.asp

Answer 2

您遇到的问题不是表索引问题，因为该表索引对于菜单在DOM中的位置是正确的。(还可以将表索引更改为0或-1以上的值，这确实会破坏接口的预期选项卡顺序)。

这里所做的是，菜单已经在视觉上被隐藏了，通过将它定位在屏幕之外，但是它并没有被键盘用户/屏幕阅读器充分隐藏。

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

再看一看源代码，您还必须将菜单按钮更改为实际的<button>元素，因为当前键盘作为<div><span>组合体无法访问，因此键盘用户目前无法实际打开菜单。(并不是所有的键盘用户都是盲目的，无法看到当前键盘焦点所在的位置可能令人沮丧)。

希望这能有所帮助！