可访问性：在嵌套列表 (ul) 中使用 ARIA role="group"

Question

我有一个要显示的议程项目列表。 为此，我会使用一个简单的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 是一个组。

或者我是否会放弃嵌套的 uls，使用单个 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>

我很乐意提供一些意见。

提前谢谢你。 干杯

Answer 1

role="group" 不适用于非交互式项目。它旨在将输入、按钮等控件组合在一起，或将相关的元素组合在一起。

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

再一次，不需要role="group"。

以下示例完全可以接受和访问。我已将其更改为一组列出的<ul> 和<li>，因为这在语义上是正确的，并且也不需要任何 WAI-ARIA。 （黄金法则，如果可以，请使用语义元素，因为对这些元素的支持是 100%，support for WAI-ARIA is a little patchy still. 等应用于补充信息/如果无法使用标准 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>