# Lists properly — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-lists

> Use semantic list elements to convey structure and relationships.

## Ordered, unordered, description lists

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

```html
<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.