在我的选项卡标记中放置 aria-controls 属性的位置

Question

我正在使用遵循以下语法的脚本在我的页面中设置一个选项卡式内容部分：

 <!-- Clickable tab links -->
<ul class="js-tablist">
    <li id="tab1" class="js-tab active"><a href="#tabpanel1">Tab 1</a></li>
    <li id="tab2" class="js-tab"><a href="#tabpanel2">Tab 2</a></li>
    <li id="tab3" class="js-tab"><a href="#tabpanel3">Tab 3</a></li>
</ul>

<!-- Tab panels -->
<div id="tab-set" class="js-tabpanel-group">
    <section id="tabpanel1" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel2" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel3" class="js-tabpanel">__CONTENT__</section>
</div>

我将设置各种 ARIA 角色（ role="tablist" ， role="tab" ， role="tabpanel" 等）在此结构脚本上如果没有通过 javascript 的标记选项卡），但我不确定将我的“aria-controls”属性放在哪里。他们应该继续 <li> 元素还是它的 <a> 子元素？还是无所谓？事实上，关于 role="tab" 和 tabindex="0" 可以问同样的问题——这些东西应该放在列表项还是锚点上？

原文由 RickL 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 aria-controls 放在得到 role="tab" 的项目上。

aria-controls 是创建选项卡与其面板之间关系的原因。请参阅规范中 aria-controls 描述中的第三个项目符号： https ://www.w3.org/TR/wai-aria-1.1/#aria-controls

要回答您的后续问题，请将 role="tab" 放在 <a href> 上，因为它已经准备好接收键盘焦点并可由浏览器操作。这也意味着您根本不需要使用 tabindex 。

Consider also throwing a role="presentation" on the <li> elements and role="tablist" on the <ul> (especially since you rendering the <li> 与 role="presentation" 惰性）。

还要准备好管理箭头键导航，因为通过使用选项卡角色，您实际上是在告诉专家用户这些选项卡的行为类似于操作系统中的选项卡，它支持箭头键在选项卡之间切换。

值得一试的其他资源：

• https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ （来自在 Mozilla 从事辅助功能工作并且是屏幕阅读器用户的人）
• http://heydonworks.com/practical_aria_examples/#tab-interface （来自一个从事可访问性咨询和修复的人）

毕竟，请在屏幕阅读器中对其进行测试，以确保它的行为符合您的预期。

原文由 aardrian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个演示展示了一个 使用带有 ARIA 的选项卡面板的屏幕阅读器。 Jaws 屏幕阅读器提供了一种快捷方式，用于根据 aria-controls 属性创建的关系从选项卡移动到相应的选项卡面板。

如果你很好奇，这个演示展示了一个 使用没有 ARIA 的选项卡面板的屏幕阅读器。

当您创建一组选项卡面板时，您希望小部件代表键盘顺序中的单个制表位。当有人使用 tab 键移动到选项卡组时，焦点应该转到当前选定的选项卡，下一次按下 tab 键应该再次将焦点带回内容。

您可以使用 流动 tabindex 来执行此操作。只有当前选择的选项卡应该是可聚焦的。所有其他选项卡（特别是 <a> 代表它们的元素）应该设置 tabindex=“-1” 。这可以防止它们包含在键盘 Tab 序列中。

使某人能够使用左/右箭头键循环浏览选项卡的脚本还应该更新每个选项卡上的 tabindex 属性的值，以便除当前选定的选项卡之外的所有选项卡都将 tabindex 设置为 -1。这里有一个可用的 tabpanels 演示。

原文由 Léonie Watson 发布，翻译遵循 CC BY-SA 3.0 许可协议