Question

我有一个嵌套的三级导航，在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               |                 |
'------------------------------------------------'

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

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

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>作为列表的容器，并且必须通过指定<ul>来删除role="presentation"的“列表性”。但是，由于父元素上的role="presentation"会向下传播到“所有”元素（

元素），因此您需要通过添加{来恢复<li>元素的“列表项”。 {1}}。

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

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

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

使屏幕阅读器以不同的方式阅读章节

1 个答案: