Bootstrap provides a class (.sr-only) to indicate content for screen readers only. This content is hidden visually, but gives visually-impaired users important information about open tabs, instructions for navigation, etc. Take, for example, AE.com‘s sidebar navigation…
![AEO website screen shot.](http://markcarlson.io/wp-content/uploads/2016/11/Screen-Shot-2016-11-04-at-2.10.22-PM.png)
The obvious fix would be to include some screen reader only text so when the user highlights the link, the reader says “Graphic T-Shirts Current Page”. Easy enough, right? How bout this?
Now this should work. But it doesn’t. You can move the <span> out of the <a> and it still won’t work.
Turns out that any element with an ‘aria-label’ attribute will have that content spoken, regardless of the content inside the element.
So the fix didn’t require bootstrap’s .sr-only class at all. We just had to move the “current page” text inside the aria-label attribute, like this:
2 thoughts on “Why won’t screen readers read content in an .sr-only span?”
Simply use the ‘aria-current’ attribute like so: <a href=”#” aria-current=”page”>Graphic T-Shirts</a>. No need for an Aria-label in this particular case.
Good call, @robwth!