如何使屏幕阅读器读取列表？

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.

Answer 1

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.