• Success Criterion 1.3.1
  • Conformance level A

List Item Count That Doesn’t Match What’s Actually Announced

1.3.1 — Info and Relationships

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

A list is announced with the wrong item count because wrapper or decorative elements are coded as list items — screen reader users hear '6 items' when there are 3, and can't trust the structure.

Example 

<ul>
  <li class="section-divider"></li>
  <li>Lesson 1: Greetings</li>
  <li class="spacer"></li>
  <li>Lesson 2: Numbers</li>
  <li>Lesson 3: Colors</li>
  <li class="spacer"></li>
</ul>

Why it matters

A screen reader user hears "list, 6 items" but only three actually contain a lesson, wasting time checking empty entries.

How to test

Use a screen reader's list navigation on a list of items: compare the announced count ('6 items') to the actual visible item count — a mismatch means wrapper/decorative elements were coded as list items.

How to fix

Keep decorative spacers and dividers out of list markup entirely; style spacing with CSS margin instead.

<ul>
  <li>Lesson 1: Greetings</li>
  <li>Lesson 2: Numbers</li>
  <li>Lesson 3: Colors</li>
</ul>

Outcome

A learner hears list, 3 items and trusts the count matches the three actual lessons on screen.

Who is affected

Screen reader users browsing lessons can't trust the announced count to reflect real content.

Learn more

Related scenarios