Stepper

This component is designed to give users feedback in terms of how much longer they have in order to complete a process.

If you are using numbers as part of the step text, as in the example below, it makes more sense to use and ul so that screen reader users don't hear step numbers being read twice:

Steps

  • 1
  • 2
  • 3
  • 4
  • Pay

If you are using more descriptive step names then be mindful of spacing limitations on mobile and consider using an ol so that screen reader users are aware of the step number:

Progress:

  1. About
  2. Order
  3. Confirmation
  4. Payment