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

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

第一个层次是顶部的链接，它打开一个大菜单下拉列表。第二级是大菜单中的“列”。第三级是每列中的“行”，每个行包含一个链接列表。想象布局的一个好方法是考虑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是在列和行中定义的？或者它已经以兼容的方式阅读了吗？

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

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

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

a
b


c
d
e

这是两个单独的列表，一个包含两个项目，另一个包含三个项目。如果您希望将它们作为一个包含五项的列表来阅读（基本上就是您所要求的），那么您必须使用角色来完成这一任务

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

a
b


c
d
e

您需要

作为列表的容器，并且必须通过指定

role=“presentation”

来删除

的“列表性”。但是，由于父元素上的

role=“presentation”

将向下传播到“owned”元素（元素

），因此需要通过添加

role=“listitem”

来恢复

元素的“列表项属性”

看

当显式或继承的表示角色应用于具有WAI-ARIA角色隐式语义的元素时，除了具有显式表示角色的元素外，还需要拥有的元素，用户代理必须将继承的表示角色应用于未定义明确角色的所有元素

您现在有了一个包含五个项目的列表。
您可以强制屏幕阅读器以您想要的方式阅读它，但我认为您的示例没有必要这样做。仅仅因为你把它设计成一组六组，并不意味着它必须这样读。你的视觉效果没有任何额外的意义

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

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


a
b


c
d
e


这是两个单独的列表，一个包含两个项目，另一个包含三个项目。如果您希望将它们作为一个包含五项的列表来阅读（基本上就是您所要求的），那么您必须使用角色来完成这一任务

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



a
b


c
d
e


您需要
作为列表的容器，并且必须通过指定
role=“presentation”
来删除
的“列表性”。但是，由于父元素上的
role=“presentation”
将向下传播到“owned”元素（元素
），因此需要通过添加
role=“listitem”
来恢复
元素的“列表项属性”

看

当显式或继承的表示角色应用于具有WAI-ARIA角色隐式语义的元素时，除了具有显式表示角色的元素外，还需要拥有的元素，用户代理必须将继承的表示角色应用于未定义明确角色的所有元素

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