UI Architect, Full Stack Web Developer – San Francisco Bay Area (Walnut Creek), CA
UI Architect, Full Stack Web Developer – San Francisco Bay Area (Walnut Creek), CA
AEO website screen shot.

Why won’t screen readers read content in an .sr-only span?

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.
The current page is communicated with a highlighted bar. How are visually impaired users to know which page they are on?

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?

Source HTML

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:

HTML source code

 

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 thoughts on “Why won’t screen readers read content in an .sr-only span?”