使屏幕 reader 以不同方式阅读部分

Question

我有一个嵌套的 3 级导航，在 HTML 中看起来像这样：

<ul class="level-0 top">
  <li>
    <a>Link</a>
    <ul class="level-1 column">
      <li>
        <a>Header</a>
        <ul class="level-3 row">
          <li>
            <a>Link</a>
          </li>
          <li>
            <a>Link</a>
          </li>
          <li>
            <a>Link</a>
          </li>
        </ul>
  <!-- more 1st, 2nd, and 3rd levels that look like the above -->
</ul>

它的样式为 megamenu：

                             *Link1* Link2 Link 3
 ________________________________________________
| Header |  Header  |  Header  |  Random Content |
| Link   |  Link    |  Link    |                 |
| Link   |  Link    |  Link    |                 |
| Link   |  Link    |          |                 |
|        |  Link    |  Header  |                 |
| Header |  Link    |  Link    |                 |
| Link   |          |  Link    |                 |
| Link   |  Header  |  Link    |                 |
|        |  Link    |  Link    |                 |
|        |  Link    |          |                 |
|        |  Link    |          |                 |
'------------------------------------------------'

第一级是顶部的链接，它会打开一个大型下拉菜单。第二级是大型菜单中的 "columns"。第三层是每列内的 "rows"，每列包含一个链接列表。想象布局的一个好方法是考虑 Pinterest "masonry" 排列。

现在，当将 屏幕 reader 导航到菜单（第二级）时，自然会显示 "region with two items"（或此的某些变体blurb 取决于你的 reader) 因为它在每一列中看到两个列表。然后它会读取每个第三级列表，离开列表，离开第一列，并为其他列重复。

这在阅读 HTML 和屏幕 reader 时合乎逻辑。您下降一个级别，阅读项目摘要，到达每个项目，重复。

然而...

                             *Link1* Link2 Link 3
 ________________________________________________
| Header    Header     Header  |  Random Content |
| Link      Link       Link    |                 |
| Link      Link       Link    |                 |
| Link      Link               |                 |
|           Link       Header  |                 |
| Header    Link       Link    |                 |
| Link                 Link    |                 |
| Link      Header     Link    |                 |
|           Link       Link    |                 |
|           Link               |                 |
|           Link               |                 |
'------------------------------------------------'

菜单的前 3 列 看起来不像列 。相反，第一到第三列被视为一个包含 6 个链接列表的大区域（假设前三列具有相同的背景，而随机内容具有不同颜色的背景）。

有没有办法告诉屏幕 reader 将第一到第三列读作 "one region with 6 items"，即使 HTML 是在列和行中定义的？或者它已经在以合规的方式阅读它？

Answer 1

您可以强制屏幕reader按照您想要的方式阅读它，但我认为您的示例没有必要这样做。仅仅因为您将其样式设置为看起来像一个包含六个分组的组并不意味着它必须以这种方式阅读。你的视觉效果没有任何额外的意义。

但如果你真的想这样做，这里有一个简单的例子：

<ul>
  <li>a</li>
  <li>b</li>
</ul>
<ul>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

这被解读为两个单独的列表，一个包含两个项目，另一个包含三个项目。如果您希望将它们作为包含五个项目（基本上是您所要求的）的列表来阅读，则必须使用角色来实现。

<div role="list">
  <ul role="presentation">
    <li role="listitem">a</li>
    <li role="listitem">b</li>
  </ul>
  <ul role="presentation">
    <li role="listitem">c</li>
    <li role="listitem">d</li>
    <li role="listitem">e</li>
  </ul>
</div>

您需要 <div> 作为列表的容器，并且您必须通过指定 role="presentation" 删除 <ul> 的 "list-ness"。但是，因为父元素上的 role="presentation" 会向下传播到 "owned" 元素（

元素），您需要通过添加来恢复 <li> 元素的 "list item-ness" role="listitem"。

见https://www.w3.org/TR/wai-aria/#presentation

When an explicit or inherited role of presentation is applied to an element with the implicit semantic of a WAI-ARIA role that has required owned elements, in addition to the element with the explicit role of presentation, the user agent MUST apply an inherited role of presentation to any owned elements that do not have an explicit role defined.

您现在有一个包含五个项目的列表。

使屏幕 reader 以不同方式阅读部分

Make screen reader read sections differently

html

accessibility

wcag

screen-readers

wai-aria