2.37 Progress bar not announced by screen readers (M)

Progress bar highlighted on the Enrolment Basic Information page

FIGURE 2.72: Progress bar highlighted on the Enrolment Basic Information page

2.37.1 WCAG 1.1.1 (A), 4.1.3 (AA) - Desktop

On the Enrolment Basic Information page, a progress bar at the side of the page dynamically updates showing the user how far through they are in the process. These updates are communicated visually, however, they are not announced by screen readers.

This may result in the user abandoning the application form as they do not know how much longer the application process will take.

2.37.2 Recommendation

While it’s good to have a progress bar, screen reader users need to know the following:

  • where they are in the process
  • the number of steps in the process
  • what the previous and next step of the process is

As the progress indicator needs to communicate the number of steps to be completed and current location to help all users orient themselves within the application process, the ARIA role=“progressbar” can be used for elements that displays the progress status for a task that take a long time or consists of several steps. In addition, adding span elements letting users know what step of the process they are currently on would also be greatly beneficial to these users.

E.g. ‘Step 1 of 3, Patient Profile - Basic Information, current step’.

2.37.3 Spot check: : December 2022

This issue is unresolved. Please refer to the recommendation above to fix the issue.