本身没有任何语义，它不具备可聚焦性，也无法通过键盘自然触发事件。即使你给它添加了
onclick事件，屏幕阅读器也可能无法识别它是一个可交互元素。正确的做法是使用
或
作为标签标题，它们天生就具备可访问性。
第二个大坑是WAI-ARIA属性的缺失或误用。比如，你可能只设置了role="tab"和role="tabpanel"，却忘记了aria-selected、aria-controls和aria-labelledby。没有这些属性，屏幕阅读器就无法知道哪个标签是当前选中的，也无法建立标签和内容面板之间的逻辑关联。用户听到的可能只是一堆孤立的文本，而无法理解它们之间的关系。更糟糕的是，有时会错误地给非交互元素添加ARIA角色，这反而会混淆辅助技术。
糟糕的键盘焦点管理也是一个顽疾。很多标签页实现只考虑了鼠标点击，而忽略了键盘用户。当用户通过Tab键导航时，焦点可能会跳过标签标题，或者在激活一个标签后，焦点没有移动到新的内容区域，导致用户不知道内容已经切换。理想情况下，当用户通过方向键在标签标题之间切换时，焦点应该随着移动；当激活一个标签后，焦点可以考虑移到该标签的内容区域的开头，或者至少保持在激活的标签标题上。
内容面板的隐藏方式不当也是一个微妙的问题。有些开发者会使用display: none;或visibility: hidden;来隐藏非激活的面板，这在视觉上是有效的，但如果你同时忘记了设置aria-hidden="true"，那么屏幕阅读器仍然可能会读取这些隐藏的内容，造成信息混乱。相反，如果只是用CSS来定位（比如移出屏幕），而没有设置aria-hidden="true"，那隐藏的内容也可能被读到。确保aria-hidden的状态与元素的视觉可见性同步，是至关重要的。
最后，缺乏对动态内容的考虑。如果你的标签页内容是通过AJAX异步加载的，那么在内容加载完成后，你需要确保辅助技术能够感知到内容的更新。这可能涉及到使用aria-live区域，或者在内容加载完成后，重新管理焦点，引导用户到新加载的内容上。如果只是简单地替换HTML，而没有通知辅助技术，那么用户可能会错过重要的信息更新。
如何测试你的标签页界面的可访问性？
测试标签页界面的可访问性，绝不是跑一遍自动化工具就万事大吉了。自动化工具能捕捉到一些显而易见的错误，比如缺少ARIA属性，但它无法模拟真实用户的体验，尤其是键盘导航和屏幕阅读器的交互。所以，我们需要一套多管齐下的测试方法。
首先，手动键盘测试是基础中的基础，也是最直接有效的方法。你完全可以放下鼠标，只用键盘来操作你的标签页。
- 尝试使用
Tab键和Shift + Tab键来来回导航。焦点是否能顺利地进入标签列表？在标签标题之间切换时，焦点是否按预期移动？离开标签列表后，焦点是否能继续到下一个可聚焦元素？ - 当焦点在某个标签标题上时，尝试使用左右方向键。它们是否能让你在不同的标签标题之间切换？
- 使用Enter键或空格键来激活标签。激活后，对应的内容面板是否正确显示？焦点是否保持在激活的标签标题上，或者是否根据你的设计逻辑，转移到了内容面板的开头？
- 尝试在标签页内部的输入框、按钮等可交互元素之间导航。确保它们都能被聚焦和操作。
其次，屏幕阅读器测试是不可或缺的。这是模拟视障用户体验的最真实方式。在Windows上可以使用NVDA或JAWS，macOS有VoiceOver，Linux则有Orca。
- 启动屏幕阅读器，然后像一个视障用户一样，尝试导航到你的标签页。
- 听屏幕阅读器如何宣布标签列表（"tab list"），以及每个标签标题（"tab", "selected", "controls [panel name]"）。
- 切换标签时，屏幕阅读器是否正确宣布了新激活的标签和对应的内容面板？
- 当内容面板切换时，屏幕阅读器是否会自动读取新面板的内容，或者至少能让你轻松地导航到新内容？
- 注意是否有任何隐藏的内容被意外地读出。
再者，自动化可访问性工具可以作为辅助。这些工具能快速扫描你的代码，指出一些明显的ARIA属性错误、缺少焦点指示等问题。
- Lighthouse (Chrome DevTools内置)：运行可访问性审计，它会提供一个分数和详细的建议。
- Axe DevTools (浏览器扩展)：这是一个非常强大的工具，能够检测出大量可访问性问题，并提供修复建议。
- WAVE (Web Accessibility Evaluation Tool)：一个在线工具，可以输入URL来检查网页的可访问性。
这些工具能帮你捕捉到大部分“低垂的果实”，但它们无法替代人工测试和对用户体验的理解。
最后，如果条件允许，进行用户测试。邀请一些实际使用辅助技术的用户来测试你的界面。他们的反馈是最宝贵的，因为他们能指出你作为开发者可能从未考虑到的使用障碍和痛点。这能让你发现那些自动化工具和普通键盘测试都无法揭示的深层问题。记住，可访问性是一个持续优化的过程，没有一劳永逸的解决方案。
今天关于《为HTML标签页界面添加可访问性，需确保用户能通过键盘和屏幕阅读器顺畅操作。以下是实现方法：1.使用语义化HTML标签使用、、等语义化标签，帮助屏幕阅读器理解页面结构。例如：Tab1Tab2Tab3ContentforTab1ContentforTab2ContentforTab3设置role属性使用role="tab"表示标签项，role="tabpanel"表示内容面板，role="navigation"表示导航区域。同时，通过aria-selected和aria-controls等属性增强可访问性。添加键盘支持确保标签项可以通过键盘》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！
