为什么“角色”属性没有“容器”值？

Question

<div class= "container" role= "grid">

对于div.container的role属性，我选择grid值。

为什么没有container值？

<!-- =layout: start -->
<div class="container" role="grid">
    <div class="row" role="row">
        <aside class="col col-aside" role="complementary">
            <h2>aside</h2>
        </aside>
        <main class="col col-main" role="main">
            <h2>main</h2>
            <!-- =panel: start -->
            <div class="panel" role="region">
                <h3>panel</h3>
            </div>
            <!-- =panel: end -->
        </main>
    </div>
</div>
<!-- =layout: end -->

Answer 1

您可以在ARIA in HTML reference doc

中了解有关ARIA授权角色的更多信息

没有“容器”角色。你完全正确。

为什么？因为您不必为纯粹用于装饰目的的元素赋予角色，例如在您的情况下为非交互元素使用包装div。

例如查看grid定义：

  

网格是一个交互式控件，其中包含以表格和表格形式排列的表格数据单元格。

这里不是这种情况。

Answer 2

ARIA标志性角色（通过region值）与您所描述的相似，因为它们 do 允许您创建和命名自己的容器，然后辅助技术即可识别并直接导航到。

  <div role="region" aria-labelledby="region1"> 
    <h2 id="region1">Title for Region Area 1</h2> 
      ... some content ...
  </div> 

这里的警告是，您应该只创建对辅助技术用户实际上有用的命名区域。不要四处为每个小东西创建地标，因为它们会很烦人。

还值得注意的是，该区域的标题应该是有用的，并且在没有其他上下文的情况下才有意义。一个很好的例子是“ Search ”。一个不好的例子是“ Region 1 ”。

下图显示了按角色导航时屏幕阅读器（NVDA）用户将看到的内容。除search以外，所有使用的角色均为默认值。