Screen reader announces progress bar as 'blank' issue and fix

trog
trog Community Member Posts: 25 ♪ Opening Act ♪
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

Comments