Progress Bar potential user experience enhancement

[SarahKay8]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Our team is working on the Accredited Reps: A Representative Form. We received this from the 508 office in regards to the Progress Bar component - “Throughout the Site, the visual representation of the current state of the steps cannot be understood by assistive technology. For example, on “Steps 1 of 5 Accredited representative information,“, as a JAWS user, reading the “1 of 5", the JAWS user cannot determine that the color-coded step 1 indicates the current step” Adding an sr-only for extra clarity would be helpful for the user. Example

You are on Step 1 of 5: Accredited Representative Information

Is this something we need to bring to DST council?

What I expected to happen

Users will hear "You are on Step 1 of 5: Accredited Representative Infromation

Reproducing

• CSS Library version:
• Device: (e.g. iPhone 8, Macbook)
• Browser: (e.g. Firefox, IE 11)

Steps to reproduce:

1. Navigate to progress bar component
2. Cut voiceover on
3. Confirm voiceover reads out "Step 1"

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

Original 508 office ticket for reference