为什么'role'属性没有“容器”值？

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标志性角色（通过region值）与您所描述的类似，因为它们允许您创建和命名自己的容器，辅助技术可以识别并直接导航到。

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

这里需要注意的是，您应该只创建命名区域，它们实际上对辅助技术的用户有用。不要为每件小事创造地标，因为它们会令人讨厌。

值得注意的是，该区域的标题应该是有用的，没有额外的背景也是有意义的。一个很好的例子是“搜索”。一个不好的例子是“1区”。

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

Answer 2

您可以在ARIA in HTML reference doc中阅读有关ARIA授权角色的更多信息

没有“容器”角色。你是对的。

为什么？因为您不必为纯粹用于装饰目的的元素赋予角色，就像您的情况一样，用于非交互元素的包装器div。

例如，参见grid定义：

网格是一种交互式控件，它包含按行和列排列的表格数据单元格，如表格。

这不是这种情况。