可用性：在嵌套列表ul中使用ARIA role =“ group”

编程问答 2022-08-12

问题描述

我有一个要显示的议程项目列表。 为此，我将使用简单的ul。

问题是，在此列表中，我按月对项目进行了分组。因此，一般来说，它们是按日期排序的，而现在它们也按月分组。

示例：

January 2010
- Item 1
– Item 2

February 2010
- Item 3
– Item 4

march 2010
- Item 5
– Item 6

如何使这些信息更易于访问。

我发现有关role="group"的帖子似乎就在这里？！ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role

那么下面的结构有意义吗？

<ul>
  <li role="group">
    <h3>January 2010</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li role="group">
    <h3>February 2010</h3>
    <ul>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </li>
</ul>

或者我该如何明确说明嵌套的ul是一个组。

还是我会舍弃嵌套的ul，而是用一个ul且每个条目都等于li来构建所有内容？

或者我会做类似的事情：

<div role="list">
  <div>
    <h3 id="label-1">January 2010</h3>
    <ul aria-labelledby="label-1" role="group">
      <div role="listitem">Item 1</div>
      <div role="listitem">Item 2</div>
    </ul>
  </div>
  <div>
    <h3 id="label-2">February 2010</h3>
    <ul aria-labelledby="label-2" role="group">
      <div role="listitem">Item 3</div>
      <div role="listitem">Item 4</div>
    </ul>
  </div>
</div>

我很高兴获得一些投入。

先谢谢您。 欢呼

解决方法

role="group"不适用于非交互式项目。它旨在将控件（例如输入，按钮）组合在一起，或者对相关元素进行组合。

您的第三个示例最接近该示例的结构方式。标题非常适合快速导航（因为标题级别是屏幕阅读器用户浏览页面的主要方式之一），并且在HTML本身内创建了关系，从而无需任何额外的WAI-ARIA。

再次没有必要role="group"。

以下示例将完全可以接受并且可以访问。我已将其更改为列出的<ul>和<li>的集合，因为从语义上讲这是正确的，并且那里也不需要WAI-ARIA。 （黄金法则，请使用语义元素，如果可以的话，请使用语义元素support for WAI-ARIA is a little patchy still.作为支持，tutorial，因此应将其用作补充信息/如果无法使用标准HTML5元素实现所需的文档结构/关系，则应使用语义元素。 ）

很显然，如果第1到第4项是交互式元素，为简洁起见，您将其省略了，那完全是另一回事了，我将更改此答案。

    <ul>
      <li>
        <h3>January 2010</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
      <li>
        <h3>February 2010</h3>
        <ul>
          <li>Item 3</li>
          <li>Item 4</li>
        </ul>
      </li>
    </ul>

accessibilityhtmllistwai-aria