Web 可访问性 - Tab 键顺序？

Question

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

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

有没有什么方法可以控制我们网站的顺序 "Tabbed through" 仅供键盘用户使用？

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

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 顺序）。

这里发生的事情是，通过将菜单放置在屏幕之外，菜单在视觉上被隐藏了，但它没有充分隐藏键盘 users/screen 读者。

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

进一步查看源代码，您还必须将菜单按钮更改为实际的 <button> 元素，因为它目前无法通过键盘作为 <div><span> 组合键访问，所以有目前键盘用户无法真正打开菜单。（并非所有键盘用户都是盲人，看不到当前键盘焦点所在的位置可能会令人沮丧）。

希望对您有所帮助！

Web 可访问性 - Tab 键顺序？

Web Accessibility - Tab Order?

html

frontend

web