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>

我将通过javascript在此结构标记上设置各种ARIA角色（role="tablist"，role="tab"，role="tabpanel"等等（因为如果没有脚本，则没有标签）但是我不确定在哪里放置我的'aria-controls'属性。他们应该使用<li>元素还是其<a>子元素？或者没关系？实际上，可以询问有关role="tab"和tabindex="0"的相同问题 - 如果列表项或锚点上有这些内容吗？

Answer 1

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

aria-controls是创建标签及其面板之间关系的原因。请参阅规范https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

中aria-controls说明中的第三个项目符号

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

还要考虑在role="presentation"上投放<li>，在role="tablist"投放<ul>（特别是因为<li>呈现role="presentation"惰性moneywon = betamount * 1.5; }）。

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

值得一试的其他资源：

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

毕竟，请在屏幕阅读器中进行测试，以确保其表现符合预期。

Answer 2

此演示显示screen reader using tabpanels with ARIA。 Jaws屏幕阅读器提供了一个快捷方式，可根据aria-controls属性创建的关系从选项卡移动到相应的tabpanel。

如果您感到好奇，此演示会显示screen reader using tabpanels without ARIA。

创建一组tabpanel时，您希望窗口小部件以键盘顺序表示单个制表位。当有人使用Tab键移动到一组选项卡时，焦点应该转到当前选定的选项卡，下一次按Tab键应该重新聚焦到内容中。

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

允许某人使用左/右箭头键循环选项卡的脚本还应更新每个选项卡上tabindex属性的值，以便除当前选定的选项卡外的所有选项卡都将tabindex设置为-1。这里有一个working tabpanels demo。

Answer 3

这取决于... 如果您允许 li 元素通过更改其语义来调用事件，即将 li 元素作为选项卡组件（在 li 元素本身上添加事件函数）因此使用 {{ 1}} 语义属性添加到 role="tab" 元素，将 aria 属性 li 放入 aria-controls 元素。

但是，在您的情况下，由于您已经使用了一个默认的交互元素，该元素已经调用了一个事件，即超链接，并且主要使用 li 元素的语义原样......然后将 aria 属性 { {1}} 到锚标签，它本身就是选项卡组件。

换句话说，超链接是要点击的元素而不是 li 元素，除非您更改 aria-controls 元素语义，使其成为选项卡组件而不是列表项元素，但在这种情况下，您将锚标记作为目标事件...用户可能会点击该事件。

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

3 个答案: