aria-controls 做什么 aria-owns 不做什么？

Question

人们问过 aria-controls 和 aria-owns 之间的区别。 aria-controls 是基于层次结构的父子关系，而 aria-owns 不是。

我想说得非常具体。 aria-controls 究竟做了哪些 aria-owns 没有做的事情。

Answer 1

两个关系扩展了 WAI-ARIA Web 应用程序的逻辑结构。它们是 aria-owns 和 aria-controls 。 aria-owns 关系完成 parent/child 关系时不能完全确定从标记解析创建的 DOM。 aria-controls 关系定义了因果关系，以便辅助技术可以导航到受用户操作的内容影响的内容和更改的内容。

所以这实际上意味着如果您有一个带有选项卡面板的选项卡控件。选项卡列表必须拥有选项卡，选项卡控制各自的选项卡面板。这些选项卡应该作为选项卡列表的子级分层存在，如果它们不存在，那么您必须使用 aria-owns 指向它们。

选项卡面板可以放在任何你想要的地方，但你应该从选项卡指向它们（使用 aria-controls）以便辅助技术可以找到它们并将它们显示给用户（例如使用键盘快捷键）

来自 Open Ajax Alliance tab panel example

的选项卡示例

<ul class="tablist" role="tablist">
    <li id="tab1" class="tab selected" aria-controls="panel1" aria-selected="true" role="tab" tabindex="0">Crust</li>
    <li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="-1">Veggies</li>
    <li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="-1">Carnivore</li>
    <li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="-1">Delivery</li>
</ul>
<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false" style="display: block;">
</div>
<div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true" style="display: none;">
</div>

该标记具有选项卡列表和选项卡之间所需的层次关系以及每个选项卡控制其各自的选项卡面板这一事实的语义标记。

标记可以这样完成（为简洁起见，我省略了必需的 aria-setsize 来弥补 <ul> 的替换）

<div class="tablist" role="tablist" aria-owns="tab1 tab2 tab3 tab4"></div>

<div id="tab1" class="tab selected" aria-controls="panel1" aria-selected="true" role="tab" tabindex="0">Crust</div>
<div id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="-1">Veggies</div>
<div id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="-1">Carnivore</div>
<div id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="-1">Delivery</div>

<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false" style="display: block;">
</div>
<div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true" style="display: none;">
</div>

aria-controls 做什么 aria-owns 不做什么？

What does aria-controls do that aria-owns does not do?

accessibility

wai-aria