使屏幕閱讀器以不同的方式閱讀章節

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角色的隱式語義的元素且該元素具有必需的元素時，除了具有呈現的顯式角色的元素外，用戶代理還必須應用的繼承角色向所有未定義明確角色的擁有元素進行演示。

您現在有了一個包含五個項目的列表。