How to make screen reader reads a list?

Question

I would like to use the screen reader for accessibility purpose in order to read the text in a list, I found out some example on the web that make it work when the items of <li> wrapped with <a>.

I tried something like the following but it doesn't work:

<ul role="list">
  <li role="listitem">
    <div><h3 aria-label="item 1">item 1</h3></div>
  </li>
  <li role="listitem">
    <div><h3 aria-label="item 2">item 2</h3></div>
  </li>
  <li role="listitem">
    <div><h3 aria-label="item 2">item 3</h3></div>
  </li>
  <li role="listitem">
    <div><h3 aria-label="item 4">itwem 4</h3></div>
  </li>
</ul>

Hope you can help me with that.

Your markup looks fine to me - what happens exactly? What screen-reader software are you using? What happens when you run it, exactly? — Dai
I use MacOS voice over, it select the first item of the list but doesn't read it or any of the items. — zb22

slugolicious slugolicious · Accepted Answer · 2018-08-14T20:37:09

The #1 rule for using ARIA (both aria-* attributes and the role attribute) is to not use it if you don't have to. Your code sample, while valid, has too much aria, all of it superfluous.

A <ul> has a role=list by default and the spec specifically says not to set the role.

Same with the <li> element.

The accessible name for your headings (<h3>) will come from the text content of the heading, according to step 2F of the "Accessible Name and Description Computation", so having an aria-label for the <h3> is not necessary.

So, your code sample is exactly the same as this code snippet:

<ul>
  <li>
    <div>
      <h3>item 1</h3>
    </div>
  </li>
  <li>
    <div>
      <h3>item 2</h3>
    </div>
  </li>
  <li>
    <div>
      <h3>item 3</h3>
    </div>
  </li>
  <li>
    <div>
      <h3>item 4</h3>
    </div>
  </li>
</ul>

Lists, in general, are not keyboard focusable so you won't navigate to them with the TAB key. I think that's why you mentioned wrapping the list item in an anchor tag, <a>, to allow you to TAB to the link.

The way a screen reader user will navigate to a list is with shortcut keys. Both JAWS and NVDA use the L key to navigate to a list and the I ('eye') key to navigate to a list item. A screen reader user can also walk the DOM using the up/down arrow keys. VoiceOver users on iOS devices can set their rotor to "Lists" and can then swipe up/down to the next list.

So, if you are trying to force lists to be focusable using the keyboard, you would be doing a screen reader user a disservice because they're not used to navigating to a list in that manner. Non-interactive elements (such as <ul> or <p> or <h3>) should not be keyboard focusable.

How to make screen reader reads a list?

1 Answers