Screen reader announces progress bar as 'blank' issue and fix
November 12, 2021 12:00 AM
Have others encountered this issue? For me, any progress bar is simply announced as “Blank” by my JAWS screen reader. This is in both v19 and v21.
That’s a bit awkward just saying ‘blank’ out of the blue and the focus indicator shows like in the example below. Not ideal as users would need to skip over it, perhaps not aware of what it really referring to. Because my subtle progress bar is at the bottom of the browser window, the focus highlight also shifts the page upward a bit cutting off the top portion of the page.
My current solution is to suppress it so that its not announced at all and no focus it put on the progress bar by adding an aria-hidden="true" attribute to the progress bar.
To do that, I added a global RUN JS action with the code snippet:
var nodeList = document.querySelectorAll('[id^="progress"]')
nodeList.forEach(node=> { node.setAttribute("aria-hidden","true")})
Now the screen reader will now skip over it as the aria label sets it to hidden.
Here's the before and after html
I wonder if we can get a hide from screen reader option for the progress bar.
Cheers
Trev
Discussion (1)
I should have added that suppressing the progress bar was only a temporary solution as I wanted to avoid the screen reader saying "Blank" when arriving at a progress bar.
Ideally I would love the progress bar object to use aria labels so that the screen reader would announce the learner's progression through the course.
Where the progress bar value would be set using aria-valuenow or aria-valuetext and define the aria-valuemin and aria-valuemax.
If we leverage the sample html of the progress bar in the original post, and add aria attributes to get something like:
I'm working on something that'll meet our needs but if it's built in to the generated html, that'd be awesome!
Reference:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
https://www.digitala11y.com/progressbar-role/
Cheers
Trev