Text

List (ordered)

Published on

Description

Ordered lists present items where sequence matters. Screen readers announce item numbers, giving users position context within the list.

Example

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

Accessibility

  • The <ol> element has an implicit ARIA role of list. Screen readers announce item positions.
  • 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