Lesson 16 / 26

Lists properly

Mark up sequences, groups and definitions with ol, ul and dl so assistive technology can announce list structure.

Ordered, unordered, description lists

Use <ol> for sequence, <ul> for groups, <dl> for definitions. Screen readers announce list length and item position.

<ol>
  <li>Clarify requirements</li>
  <li>Design mockups</li>
</ol>

<ul>
  <li>Free shipping</li>
  <li>30-day returns</li>
</ul>

<dl>
  <dt>A11y</dt>
  <dd>Accessibility</dd>
</dl>

Lists in navigation

Navigation menus should use <ul> or <ol> inside <nav>. This helps screen readers understand structure.

Styling lists accessibly

Keep <li> elements even if you hide the bullets with CSS. Screen readers still announce them properly.

Nested lists

Nested lists properly convey hierarchy. Screen readers announce nesting level.