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

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

第一层是顶部的链接，它会打开一个下拉菜单。第二级是大型菜单中的“列”。第三层是每列内的“行”，每个包含一个链接列表。想象布局的一个好方法是考虑 Pinterest 的“砌体”布置。

现在，当将 屏幕阅读器 导航到菜单（第二级）时，它自然会显示“包含两个项目的区域”（或此简介的某些变体，取决于您的阅读器），因为它在每列中看到两个列表。然后它会读取每个三级列表，退出列表，退出第一列，然后重复其他列。

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

不过……

                             *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 个链接列表的大区域（假设前三列具有相同的背景，而随机内容具有不同颜色的背景）。

有没有办法告诉屏幕阅读器将第一到第三列读取为“一个包含 6 个项目的区域”，即使 HTML 是在列和行中定义的？还是它已经以合规的方式阅读它？

Answer 1

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

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

<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> 的“列表性”。但是，由于父元素上的role="presentation" 会向下传播到“拥有”元素（

元素），因此您需要通过添加role="listitem" 来恢复<li> 元素的“列表项性”。

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

当显式或继承的表示角色应用于具有 WAI-ARIA 角色隐含语义的元素时，除了具有显式表示角色的元素外，用户代理必须应用呈现给任何未明确定义角色的拥有元素的继承角色。

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