Html 在“我的选项卡”标记中放置“aria控件”属性的位置

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

<!-- 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控件”属性应该放在哪里。它们应该在

元素上还是在其

子元素上？还是没关系？事实上，对于

role=“tab”

和

tabindex=“0”

，可以问同样的问题——这些东西应该放在列表项上还是放在锚点上？

将

aria控件放在获取
role=“tab”
的项上

aria控件
是创建选项卡与其面板之间关系的工具。请参见规范中aria控件描述中的第三个项目符号：

要回答您的后续问题，请将
role=“tab”
放在
上（来自Mozilla的易访问性工作人员，也是屏幕阅读器用户）
（来自一位从事无障碍咨询和补救工作的人）

完成所有这些之后，请在屏幕阅读器中测试它，以确保它的行为符合您的预期。
此演示显示了一个新的示例。Jaws屏幕阅读器提供了一个快捷方式，用于根据aria controls属性创建的关系从选项卡移动到相应的选项卡面板

如果你好奇的话，这个演示展示了一个

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

您可以使用a来执行此操作。只有当前选定的选项卡才应该是可聚焦的。所有其他选项卡（特别是此处的
。
这取决于。。。
如果允许
li
元素通过更改其语义来调用事件，即使
li
元素作为选项卡组件（在
li
元素本身上添加事件函数），因此使用
role=“tab”
语义属性到
li
元素，将aria属性
aria controls
放到
li
元素

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

换句话说，超链接是要单击的元素，而不是
li
元素，除非您更改
li
元素语义，将其作为选项卡组件而不是列表项元素，但在这种情况下，您将锚定标记作为目标事件…用户可能会单击该事件。
感谢您的帮助se demoes Léonie。在可访问性上下文中使用tabindex对我来说一直有点神秘；首先建议使用tabindex，然后不建议使用（以避免与预先存在的键盘快捷键冲突），现在是推荐的，但有一套相当神秘的规则。肯定是我需要进一步研究的东西。干杯。tabindex属性在HTML5中进行了更新。仍然可以使用它使事情变得可怕，但也没关系。这篇关于tabindex属性的文章可能会有帮助。非常棒，谢谢莱奥尼。我已经有一大堆bo了paciellogroup.com上的页面标记为OK，我会将其添加到集合中。FWIW，您的链接似乎已被篡改；正确的URL是（尽管如果在Stack Overflow的评论系统中出现了这种篡改，那么我的当然也可能会被类似的篡改）。w3.org链接404s。这可能是一个合适的替代品：