AEO website screen shot.

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


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. Required fields are marked *

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