Web 可访问性 - 选项卡顺序？答案

【问题标题】：Web Accessibility - Tab Order?Web 可访问性 - 选项卡顺序？
【发布时间】：2017-04-11 19:32:14
【问题描述】：

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

我注意到，在我们的网站 (www.adn.com) 上，当您浏览网站时，它会遍历我们的整个左侧栏菜单，然后才进入文章内容。

是否有某种方法可以控制我们的网站对于仅使用键盘的用户“通过选项卡浏览”的顺序？

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

【问题讨论】：

标签： html web frontend

【解决方案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

【讨论】：

请注意，developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… 建议“避免使用大于 0 的 tabindex 值。这样做会使依赖辅助技术的人难以导航和操作页面内容。”。而是“专注于以合适的 DOM 序列编写它们”。

【解决方案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> 组合使用键盘，因此目前无法使用键盘用户实际打开菜单。（并非所有键盘用户都是盲人，看不到当前键盘焦点的位置可能会令人沮丧）。

希望这会有所帮助！

【讨论】：

所有很棒的信息，谢谢！看来我们还有一些工作要做。谢谢你。这个 A11Y 项目真的很有趣。有时，使用屏幕阅读器也是一个压倒性的概念，尊重那些经常使用它们/依赖它们的人。