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

Question

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

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

Answer 1

来自Aria Authoring Practices文档:

两个关系扩展了 WAI-ARIA Web 应用程序的逻辑结构。这些是 aria-owns和 aria-controls . aria-owns当不能从标记解析创建的 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>