How to fix: lists not marked up as lists

What it looks like in the wild

Screen readers do not announce list count or position.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Semantic lists provide programmatic structure.

The wrong pattern (avoid)

<div class="bullet">• Item 1</div>
<div class="bullet">• Item 2</div>

The right pattern (copy this)

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Notes from real audits

• Screen readers announce the list count ("list, 5 items") and position ("item 2 of 5") — this context is lost with div-based lists.

• Use <ol> for ordered sequences where the position matters (steps, rankings); use <ul> for unordered collections.

• Navigation menus are typically lists: <nav><ul><li><a>...</a></li></ul></nav> is the correct pattern.

• list-style: none in CSS does not affect semantic list behaviour, though Safari/VoiceOver may de-list it — add role="list" if needed for compatibility.