How to make the screen reader read a list as “list of x number of items”

Question

I'm working with the WCAG. I'm wanting to resolve the way the screen reader is reading my nested list.

 <ul class="L1"> <li> <a href="#">L1 Text Here</a> <ul class="L2"> <li> <span> <a href="link">L2 Text Here</a> </span> <ul class="L3"> <li> <a href="link">L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> </ul> </li> </ul> </li> </ul> <ul class="L1"> <li> <a href="#">L1 Text Here</a> <ul class="L2"> <li> <span> <a href="link">L2 Text Here</a> </span> <ul class="L3"> <li> <a href="link">L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> </ul> </li> </ul> </li> </ul> <ul class="L1"> <li> <a href="#">L1 Text Here</a> <ul class="L2"> <li> <span> <a href="link">L2 Text Here</a> </span> <ul class="L3"> <li> <a href="link">L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> <li> <a href="link">Another L3 Text Here</a> </li> </ul> </li> </ul> </li> </ul>

Currently, the reader reads my list when focused or tabbed in L1 as a "list with 5 items listitem". In L2 , when L1 is hovered, it reads "list with 4 items listitem", and then when focused in L3 it read as "list 6 items listitem". On my code there are 5 L1 , 4 L2 , and then 6 L3 . I just made it short in this snippet.

I want L1 to be read as a "list with 4 items" then L2 as a "list with 6 items". I can only add attribute to the elements through JavaScript file.

Answer 1

I'm not used to readers... But as I understand correctly, such a reader would vocally tell the user how many list items there is in a list... For people with disabilities.

So have a look at your list structure.
This ul is strangely positionned:

<ul>4 more L1 here </ul>

That is a nested list without items...
And it its direct parent is another ul , which isn't valid HTML.

I don't know what is the result with some CSS... Maybe that isn't obvious since modern browser are dealing with bad markup.

Try a cut and paste of this code in the W3C markup validator ...

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <ul class="L1">
      <li>
        <a href="#">L1 Text Here</a>
        <ul class="L2">
          <li>
            <span> <a href="link">L2 Text Here</a> </span>
            <ul class="L3">
              <li> <a href="link">L3 Text Here</a> </li>
              <li> <a href="link">Another L3 Text Here</a> </li>
              <li> <a href="link">Another L3 Text Here</a> </li>
              <li> <a href="link">Another L3 Text Here</a> </li>
              <li> <a href="link">Another L3 Text Here</a> </li>
              <li> <a href="link">Another L3 Text Here</a> </li>
            </ul>
          </li>
          <li> 3 more L2...
            <ul>
              <li> 6 more L3 here </li>
            </ul>
          </li>
          <ul>4 more L1 here </ul>
        </ul>
      </li>
    </ul>
  </body>
</html>

You will get an error due to that ul :

Error: Element ul not allowed as child of element ul in this context.

While this one is valid:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <ul class="L1">
      <li>
        <a href="#">L1#1</a>
        <ul class="L2">
          <li>
            <span> <a href="link">L2 #1</a> </span>
            <ul class="L3">
              <li> <a href="link">L3 #1</a> </li>
              <li> <a href="link">L3 #2</a> </li>
              <li> <a href="link">L3 #3</a> </li>
              <li> <a href="link">L3 #4</a> </li>
              <li> <a href="link">L3 #5</a> </li>
              <li> <a href="link">L3 #6</a> </li>
            </ul>
          </li>
          <li> L2 #2
            <ul class="L3">
              <li> <a href="link">L3 #1</a> </li>
              <li> <a href="link">L3 #2</a> </li>
              <li> <a href="link">L3 #3</a> </li>
              <li> <a href="link">L3 #4</a> </li>
              <li> <a href="link">L3 #5</a> </li>
              <li> <a href="link">L3 #6</a> </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>L1#2</li>
      <li>L1#3</li>
      <li>L1#4</li>
    </ul>
  </body>
</html>

So I think that is the source of your issue.
I would explore this avenue before stating the reader is buggy... Or trying to walk around the issue with additionnal code.

Answer 2

There are two possibilities.

You have ill-written HTML code, as @Louys Patrice Bessette pointed out: <ul>4 more L1 here </ul> is not valid HTML, so your screen reader gets stuck on it.
You misunderstand the way how users work with their screen readers. Actually, they do not hover the mouse over an element, they (in fact, we) almost never use a mouse at all. The mouse echo feature that you seem to be using here is just a helper feature designed for use by people getting blind, for working with sighted assistance and for such rare occasions. Basically, we either tab or arrow through the page, so when testing, use your Tab key and Up/Down arrows to get a clue about what's happening on your page.

How to make the screen reader read a list as “list of x number of items”

Question

2 answers

solution1
0 2017-08-23 04:34:41

solution2
0 2017-08-23 10:56:00

How to make the screen reader read a list as “list of x number of items”

Question

2 answers

solution1 0 2017-08-23 04:34:41

solution2 0 2017-08-23 10:56:00

solution1
0 2017-08-23 04:34:41

solution2
0 2017-08-23 10:56:00