可行性:在嵌套列表(ul)中使用ARIA组“role=”

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，用一个具有相同li的每个条目的ul来构建所有的东西？

或者我会这样做：

<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>

​