How to Format Lists Accessibly: Complete Guide (2026)

Why Accessible Lists Matter

• Screen-reader context: entering a <ul>in NVDA produces "List with 5 items." That single phrase tells the user how much content is coming, whether to skip it, and where they are when they navigate inside it.
• Item position: each <li>is announced with its index ("1 of 5," "2 of 5"). Without semantic markup, a user near the bottom has no idea how much further the list goes.
• Skip-by-list navigation: screen-reader users can jump past a list with one keystroke. <br>-separated paragraphs offer no such shortcut.
• SEO and AI search: Google's featured-snippet extractor and the citation extractors used by ChatGPT, Perplexity, and Google AI Overviews all parse list semantics. A page with proper <ol>for "How to do X" is dramatically more likely to be cited as bullets in an AI answer.
• Nested structure: outline relationships (sub-steps, sub-categories) only survive when they are expressed as nested <ul>/<ol>. Indenting <div>s with CSS communicates nothing to assistive tech.

The Three List Elements — and How Each Behaves

HTML provides three list types. Choose the one that matches the relationship between items.

• <ul> (unordered list): bullets. Order does not change the meaning. Examples: features, ingredients, key points.
• <ol> (ordered list): numbers. Order is meaningful. Supports start, reversed, and type attributes. Examples: steps, ranked results, instructions.
• <li> (list item): one entry. Must be a direct child of <ul>, <ol>, or <menu>.
• <dl> (description list): term/description pairs (covered in a separate article).

<!-- Bad: <br>-separated text. No list semantics at all. -->
<p>
  Apples<br>
  Oranges<br>
  Bananas
</p>

<!-- Bad: <div>s styled to look like a list. -->
<div class="list">
  <div>Apples</div>
  <div>Oranges</div>
  <div>Bananas</div>
</div>

<!-- Bad: <li> outside of a <ul> or <ol>. Invalid HTML. -->
<li>Apples</li>
<li>Oranges</li>

<!-- Good: unordered list -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<!-- Good: ordered list with start attribute -->
<ol start="3">
  <li>Preheat the oven to 180C.</li>
  <li>Mix the dry ingredients.</li>
  <li>Fold in the wet ingredients.</li>
</ol>

<!-- Good: nested list -->
<ul>
  <li>
    Fruits
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

<!-- Good: bulletless list with VoiceOver workaround -->
<ul role="list" class="no-bullets">
  <li>Item one</li>
  <li>Item two</li>
</ul>

How to Check Your Lists

• Greadme deep scan — flags pages where lists are constructed from <br>-separated text or styled <div>s, and pairs each issue with an AI-generated fix or one-click GitHub PR.
• Greadme crawler scan — checks list semantics across every indexable page; useful for catching templates (FAQs, navigation, recipe steps) that ship without proper <ul>/<ol>.
• Greadme AI visibility analyzer — shows whether AI search engines extract your "steps" and "features" sections as bullets in citations, which depends on real list markup.
• Browser developer tools accessibility tree — inspect a list element and confirm the role is "list" with the correct aria-setsize on each item.
• Screen reader smoke test: listen to NVDA or VoiceOver enter a list — "List with N items" should be the first thing announced.
• Open-source axe-core — its list and listitem rules fail any <li> outside a list parent, and any list with non-<li> children.

8 Best Practices for Accessible Lists

.no-bullets {
  list-style: none;
  padding-left: 0;
}

<ul role="list" class="no-bullets">
  <li>One</li>
  <li>Two</li>
</ul>

Common Issues With Lists — and Fixes

<ul> vs <ol> vs <div>-Based Lists

The difference between a real list and a fake one is invisible to sighted users and dramatic to everyone else.

FAQ

What does a screen reader actually say when entering a list?

On entering a <ul> with five items, NVDA announces "List with 5 items." As the user moves down, it reads each item as "1 of 5," "2 of 5," and so on. JAWS and VoiceOver behave similarly. None of these announcements fire when the "list" is built from <div>s or <br>s.

Is the "list-style-none breaks VoiceOver" bug really real?

Yes. Safari intentionally drops the list role from the accessibility tree when a list has list-style: none applied — a behavior preserved through every recent macOS and iOS release. The community fix is to add role="list" back onto the <ul>, which restores the announcement.

Does the <ul> vs <ol> choice matter for SEO?

Yes. Google's "How to" featured snippets and AI Overview answers preferentially extract numbered <ol> markup for sequential content. Using <ul> for steps reduces the chance of being chosen for that snippet, even if the visual result looks identical.

Can I put a heading or paragraph inside <li>?

Yes — <li> is flow content and can hold paragraphs, headings, nested lists, and most other elements. Use that flexibility for genuinely structured items, but for simple labels just put the text directly in <li> without an extra <p> wrapper.

Is <li> outside a <ul> ever valid?

No. <li> is only valid as a direct child of <ul>, <ol>, or <menu>. A floating <li> is a parser-level error and will break the list and listitem rules in any automated audit.

How do AI search engines like ChatGPT and Perplexity treat lists?

Generative engines parse list semantics to recognize "these are steps," "these are options," or "these are 5 features," and they preserve that structure when citing. A page with proper <ol> markup is more likely to appear in an AI answer as actual bullets — sometimes with a direct citation back to the source — than a page where the same content lives in <br>-separated prose.

What about navigation menus — should those be lists?

Yes. Wrap navigation links in a <ul> inside <nav>. The list provides structure (item count, position), and the <nav> provides the landmark. Apply list-style: none visually and add role="list" for the Safari/VoiceOver fix if the design has no bullets.