辅助功能：在嵌套列表 (ul) 中使用 ARIA role="group"

Question

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

问题是，在此列表中，我按月对项目进行了分组。所以通常它们是按日期排序的，现在它们也按月分组。

示例：

January 2010
- Item 1
– Item 2

February 2010
- Item 3
– Item 4

March 2010
- Item 5
– Item 6

我怎样才能使这些信息更易于访问。

我发现这个 POST 关于 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" 不适用于 non-interactive 项。它旨在将输入、按钮等控件组合在一起，或将相关元素组合在一起。

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

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

以下示例将是完全可以接受和访问的。我已将其更改为一组列出的 <ul> 和 <li>，因为这在语义上是正确的，并且也消除了对任何 WAI-ARIA 的需要。（黄金法则，如果可以，请使用语义元素，因为对这些元素的支持是 100%，support for WAI-ARIA is a little patchy still. 因此应该用于免费信息/如果无法使用标准 [=35 实现所需的文档结构/关系=]5个元素。）

显然，如果第 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>

辅助功能：在嵌套列表 (ul) 中使用 ARIA role="group"

Acessibility: Using ARIA role="group" within nested list (ul)

html

accessibility

list

wai-aria