Text

List (unordered)

Published on

Description

Unordered lists present items where sequence does not matter. Screen readers announce the number of items, giving users context about list length.

Example

Open in new tab
View HTML markup 
  <ul>
  <li>Item</li>
  <li>Item <ul>
      <li>Item</li>
      <li>Item <ul>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ul>
      </li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item</li>
</ul>

Accessibility

  • The <ul> element has an implicit ARIA role of list. Screen readers announce "list, X items" on entry.
  • Safari removes list semantics when list-style: none is applied. Use role="list" to restore semantics if needed.
  • CSS display properties (flex, grid, contents) can strip list semantics in some browsers. Test with screen readers if using non-default display values.

References

Variables

None for lists