Role Document structure

`list`

Marks an element as a list of items. Use <ul>, <ol>, or <dl> first — native handles the role, the count, and the visual marker. Reach for role="list" only when CSS list-style: none triggers Safari's list-role removal heuristic.

When to use

Use <ul> for unordered lists, <ol> for ordered lists, <dl> for description lists. Each is exposed as a list with a correct item count for free.

The one practical reason to explicitly set role="list" on a <ul> is Safari’s “list role removal” behaviour: when a <ul> has list-style: none applied, WebKit removes the list role from the accessibility tree on the assumption that it’s a styling-only list. Explicitly setting role="list" overrides that heuristic.

Do NOT confuse role="list" with role="listbox". A list is static content; a listbox is an interactive selection widget. Mixing them up trips screen readers into expecting selection semantics that don’t exist.

Common failures

role="list" on <div> containers that hold <div> “items” without role="listitem". The list role requires listitem children to be exposed; without them the count is wrong.
Using role="list" for a navigation menu instead of <nav> with <ul>. The navigation landmark is more useful.
Adding role="list" to a <ul> that doesn’t have list-style: none. Redundant; the native role is already there.
Using role="list" when role="listbox" is what was meant.
Wrapping <li> elements in a non-list parent (a <div>) — the listitems become orphans.

Example

<!-- Preferred -->
<ul>
  <li>Screen reader</li>
  <li>Switch control</li>
  <li>Voice control</li>
</ul>

<!-- Override Safari's list-role removal -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Screen reader</li>
  <li role="listitem">Switch control</li>
</ul>