Make screen reader read sections differently

Question

I have a nested, 3-level navigation that looks like this in 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>

It's styled as a 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    |          |                 |
'------------------------------------------------'

The first level is the links up top, which opens a mega menu drop down. The second level would be the "columns" in the mega menu. The third level would be the "rows" inside each column, each containing a list of links. A good way to imagine the layout is to think of the Pinterest "masonry" arrangement.

Now when navigating a screen reader into the menu (the second level), naturally, it would read "region with two items" (or some variant of this blurb depending on your reader) because it sees two lists in each column. Then it would read each third-level list, get out of the list, get out of the first column, and repeat for the other columns.

This makes logical sense when reading the HTML and to a screen reader. You descend a level, read the summary of items, reach each item, repeat.

However...

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

The menu is designed in a way that the first 3 columns don't look like columns. Instead, the first to third columns is seen as one big region with 6 lists of links (imagine the first three columns having the same background, while Random Content has a different-colored background).

Is there a way to tell a screen reader to read the first to third columns as "one region with 6 items", even when the HTML is defined in columns and rows? Or is it already reading it in a compliant manner?

score 2 · Accepted Answer · answered Jul 01 '19 at 05:56

You could force the screen reader to read it the way you want but I don't think it's necessary for your example. Just because you style it to look like one group with six groupings doesn't mean it has to be read that way. There isn't any additional meaning with your visuals.

But if you really want to do it, here's a simple example:

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

This is read as two separate lists, one with two items and another with three items. If you wanted them to be read as one list with five items (essentially what you're asking for), you'd have to use roles to do so.

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

You'd need the <div> as a container for the list and you have to remove the "list-ness" of the <ul> by specifying role="presentation". However, because role="presentation" on a parent element will propagate down to "owned" elements (the <li> elements), you need to reinstate the "list item-ness" of the <li> elements by adding role="listitem".

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

When an explicit or inherited role of presentation is applied to an element with the implicit semantic of a WAI-ARIA role that has required owned elements, in addition to the element with the explicit role of presentation, the user agent MUST apply an inherited role of presentation to any owned elements that do not have an explicit role defined.

You now have one list with five items.

Make screen reader read sections differently

1 Answers1