在我的选项卡标记中放置 aria-controls 属性的位置
Where to place the aria-controls attribute in my tabs markup
我正在使用遵循以下语法的脚本在我的页面中设置一个选项卡式内容部分：
<!-- 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" 可以问同样的问题——这些东西应该放在列表项还是锚点上？
将 aria-controls 放在获得 role="tab" 的项目上。
aria-controls 是创建选项卡与其面板之间关系的原因。请参阅规范中 aria-controls 的描述中的第三个项目符号：https://www.w3.org/TR/wai-aria-1.1/#aria-controls
要回答您的后续问题，请将 role="tab" 放在 <a href> 上，因为它已经准备好接收键盘焦点并可由浏览器操作。这也意味着您根本不需要使用 tabindex。
还考虑在 <li> 元素上抛出 role="presentation" 并在 <ul> 上抛出 role="tablist"（特别是因为您使用 [= 呈现 <li> 惰性17=]).
准备好管理箭头键导航，因为通过使用选项卡角色，您实质上是在告诉专家用户这些选项卡的行为类似于 OS 中的选项卡，这些选项卡支持在选项卡之间切换的箭头键.
值得一试的其他资源：
- https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/（来自在 Mozilla 从事辅助功能工作并且是屏幕 reader 用户的人）
- http://heydonworks.com/practical_aria_examples/#tab-interface（来自一个从事无障碍咨询和修复的人）
完成这一切后，请在屏幕 readers 中对其进行测试，以确保它的行为符合您的预期。
此演示显示 screen reader using tabpanels with ARIA。 Jaws 屏幕 reader 提供了一种快捷方式，用于根据 aria-controls 属性创建的关系从选项卡移动到相应的选项卡面板。
如果你很好奇，这个演示展示了一个 screen reader using tabpanels without ARIA.
当您创建一组选项卡面板时，您希望小部件代表键盘顺序中的单个制表位。当有人使用 tab 键移至选项卡组时，焦点应转到当前选定的选项卡，下一次按 tab 键应再次将焦点移回内容。
您可以使用 roving tabindex 来做到这一点。只有当前选择的选项卡应该是可聚焦的。所有其他选项卡（特别是代表它们的 <a> 元素）都应该设置 tabindex="-1" 。这样可以防止它们包含在键盘 Tab 键序列中。
使某人能够使用 left/right 箭头键循环浏览选项卡的脚本还应更新每个选项卡上的 tabindex 属性的值，以便除当前选定的选项卡之外的所有选项卡都将 tabindex 设置为 - 1.这里有个working tabpanels demo
这取决于...
如果您允许 li 元素通过更改其语义来调用事件，即将 li 元素作为选项卡组件（在 li 元素本身上添加事件函数），因此使用 role="tab" semantic 属性添加到 li 元素，将 aria 属性 aria-controls 添加到 li 元素。
但是，在您的情况下，由于您已经在使用默认的交互元素，该元素已经调用了一个事件，即超链接，并且主要按原样使用 li 元素的语义...然后将 aria将 aria-controls 属性添加到本身就是选项卡组件的锚标记。
换句话说，超链接是要单击的元素而不是 li 元素，除非您更改 li 元素语义使其成为选项卡组件而不是列表项元素，但在这种情况下，您将锚标记作为目标事件...用户可能会点击它。
我正在使用遵循以下语法的脚本在我的页面中设置一个选项卡式内容部分：
<!-- 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" 可以问同样的问题——这些东西应该放在列表项还是锚点上？
将 aria-controls 放在获得 role="tab" 的项目上。
aria-controls 是创建选项卡与其面板之间关系的原因。请参阅规范中 aria-controls 的描述中的第三个项目符号：https://www.w3.org/TR/wai-aria-1.1/#aria-controls
要回答您的后续问题，请将 role="tab" 放在 <a href> 上，因为它已经准备好接收键盘焦点并可由浏览器操作。这也意味着您根本不需要使用 tabindex。
还考虑在 <li> 元素上抛出 role="presentation" 并在 <ul> 上抛出 role="tablist"（特别是因为您使用 [= 呈现 <li> 惰性17=]).
准备好管理箭头键导航，因为通过使用选项卡角色，您实质上是在告诉专家用户这些选项卡的行为类似于 OS 中的选项卡，这些选项卡支持在选项卡之间切换的箭头键.
值得一试的其他资源：
- https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/（来自在 Mozilla 从事辅助功能工作并且是屏幕 reader 用户的人）
- http://heydonworks.com/practical_aria_examples/#tab-interface（来自一个从事无障碍咨询和修复的人）
完成这一切后，请在屏幕 readers 中对其进行测试，以确保它的行为符合您的预期。
此演示显示 screen reader using tabpanels with ARIA。 Jaws 屏幕 reader 提供了一种快捷方式，用于根据 aria-controls 属性创建的关系从选项卡移动到相应的选项卡面板。
如果你很好奇，这个演示展示了一个 screen reader using tabpanels without ARIA.
当您创建一组选项卡面板时，您希望小部件代表键盘顺序中的单个制表位。当有人使用 tab 键移至选项卡组时，焦点应转到当前选定的选项卡，下一次按 tab 键应再次将焦点移回内容。
您可以使用 roving tabindex 来做到这一点。只有当前选择的选项卡应该是可聚焦的。所有其他选项卡（特别是代表它们的 <a> 元素）都应该设置 tabindex="-1" 。这样可以防止它们包含在键盘 Tab 键序列中。
使某人能够使用 left/right 箭头键循环浏览选项卡的脚本还应更新每个选项卡上的 tabindex 属性的值，以便除当前选定的选项卡之外的所有选项卡都将 tabindex 设置为 - 1.这里有个working tabpanels demo
这取决于...
如果您允许 li 元素通过更改其语义来调用事件，即将 li 元素作为选项卡组件（在 li 元素本身上添加事件函数），因此使用 role="tab" semantic 属性添加到 li 元素，将 aria 属性 aria-controls 添加到 li 元素。
但是，在您的情况下，由于您已经在使用默认的交互元素，该元素已经调用了一个事件，即超链接，并且主要按原样使用 li 元素的语义...然后将 aria将 aria-controls 属性添加到本身就是选项卡组件的锚标记。
换句话说，超链接是要单击的元素而不是 li 元素，除非您更改 li 元素语义使其成为选项卡组件而不是列表项元素，但在这种情况下，您将锚标记作为目标事件...用户可能会点击它。