• Success Criterion 1.3.1
  • Conformance level A

Bulleted List Built From Divs Instead of Real List Markup

1.3.1 — Info and Relationships

Scenario

Setting

A fitness app's workout tracker

What’s wrong

Visual lists marked up as <div>/<br> sequences instead of list code (list code (ul/ol)/dl).

Example 

<div>Push-ups x 20</div><br>
<div>Squats x 15</div><br>
<div>Plank 60 sec</div>

Why it matters

A screen reader user following the workout hears three unrelated lines of text instead of a set they can count.

How to test

Select a visual bulleted/numbered list and inspect DevTools: it must use ul/ol/li — if built from div/br instead, a screen reader announces plain paragraphs with no item count.

How to fix

Real list markup announces the total item count and each item's position, which div and br sequences never do.

<ul>
  <li>Push-ups x 20</li>
  <li>Squats x 15</li>
  <li>Plank 60 sec</li>
</ul>

Outcome

Knowing there are three items left, a user paces the workout with confidence instead of guessing.

Who is affected

Screen reader users tracking a workout get no sense of how many exercises the set contains or where they are in it.

Learn more

Related scenarios