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

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的“砌体”布置。

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

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

即使在列和行中定义了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>作为列表的容器，并且必须通过指定role="presentation"来删除<ul>的“ list-ness role="presentation" 。 然而，由于role="presentation"父元素将向下传播到“拥有”元素（在<LI>元素），您需要重新恢复的“列表项性” <li>通过添加元素role="listitem" 。

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

当呈现的显式或继承角色应用于具有WAI-ARIA角色的隐式语义的元素且该元素具有必需的元素时，除了具有呈现的显式角色的元素外，用户代理还必须应用的继承角色向所有未定义明确角色的拥有元素进行演示。

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