Skip to main content

Progress Bar

A simple and accessible progress bar for use in a multi-step flow to indicate to the user where they are in the overall flow.

Steps that have not yet been reached are $cf-light-gray, the current step is $cf-green, and completed steps are $cf-dark-green. See Colors.

Classes named "passed" and "unpassed" are used to indicate past and future steps.


<div class="progress-bar-container" role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3"> 
  <div class="step passed"></div> 
  <div class="step"></div> <!-- current step -->
  <div class="step unpassed"></div>
</div>

Progress bars are not native to HTML so they need to have some ARIA attributes applied to them in order to make them meaningful to assistive technologies.

There is a role attribute and 3 ARIA attributes that are needed:

  • Role - "progressbar"
  • aria-valuemin - the minimum step number in the flow, usually "1"
  • aria-valuemax - the total number of steps in the flow
  • aria-valuenow - the current step that the user is on

Examples of using these ARIA attributes are included above and in the samples below.

Progress bar no labels

Progress bar labels

Step 1
Step 2
Step 3