html - 在我的选项卡标记中放置 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>

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

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完全没有。

也考虑抛出一个 role="presentation"在 <li> 上元素和 role="tablist"在 <ul> 上(特别是因为您使用 <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 (来自一个从事无障碍咨询和修复的人)

完成这一切后，请在屏幕阅读器中对其进行测试，以确保它的行为符合您的预期。