##How to implement and use a screen reader text class
There is one class that should be in every developer's toolbox. This one class can make various features on a site accessible friendly - ranging from icon fonts, links that warn a user that a new window or tab is about to opened, or in general, better UI for screen reader users. This class is handy because there may be text on the site that you want to hide from sighted users, but still have available for those using a screen reader.
You can name the class whatever you’d like. For purposes of this demo, we can call it screen-reader-text. This will be our class for hiding content on a site without hiding it for screen reader users.
When we create this class, we’ll need to write the Css so that it’s cross browser compatible and moves the text out of view without removing it. By removing it, I mean using Css like display: none or visibility: hidden. These will hide the content from both sighted users and screen reader users. This isn’t what we want to use for our screen-reader-class. Instead, we’ll use a combination of other Css declarations. Let’s get started building our class!
.screen-reader-text {
// stuff is going to happen here
}
The first we’ll add absolute positioning:
.screen-reader-text {
position: absolute;
}
What this does is remove the element from the page flow. Then we just want to position it out of view with a negative left value:
.screen-reader-text {
position: absolute;
left: -10000px;
}
We can make that left value whatever we’d like so long as it’s some absurd number you’ll know will never be visible.
Next we’ll add the “clip” Css property:
.screen-reader-text {
position: absolute;
left: -10000px;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
What clip does above is it makes the visible area of that content a 1 pixel rectangle - which is virtually invisible. Or well it’s visible, but just about impossible to actually see because it’s only taking up 1 pixel of space.
Due to the clip property being deprecated and dropped from use in the future, we can secure our class even more by setting a width and height of 1 pixel. Careful not to set a width and height of 0 instead or it will be ignored by screen readers.
.screen-reader-text {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
We also add a hidden overflow for any content that spills out of that 1 pixel width and height. We’re pretty much imitating what clip is already doing using width, height, and overflow for browsers that don’t support clip or for when it is dropped in the future. Notice that clip has been placed last in our declaration block because we want to treat the width, height, and overflow as fallbacks for when clip doesn’t kick in.
And there you have it! Our browser friendly screen reader class ready to be applied during development. Now how do we go about using it? We can use this for any content that would help screen reader users navigate the site without visuals. Two popular examples are icon fonts (especially for navigation) and links that open to external urls.
If you’re using an icon font for decorational purposes only, then there’s no need to use the class. However, if you’re using an icon font for key functionality like the site menu or call to action links/buttons without accompanying text to tell the user what it’s for, this is where we want to use this class. The markup may differ depending on how you’re implementing your icon fonts, but the general goal is to add text in there that tells the user what it is.
Here’s what a “hamburger icon” might look like to trigger the main menu using an icon font and Chris Coyier’s technique.
<button role="button" name=“main-menu-trigger” class=“main-menu-link“>
<span aria-hidden="true" data-icon=""></span>
<span class="screen-reader-text">Open main menu</span>
</button>
The aria-hidden attribute set to true hides the icon from screen readers so it won’t read out the unicode - which won’t make sense and clutter the experience. Instead, it will read out “Open main menu” to screen reader users. Visually, only the hamburger icon is showing, but for screen reader users, they’ll get the information they need to properly interact with the site without confusion.
Another way to use this class is for links that open new windows/tabs. The reason we want to use this class here is because it’s not always clear to screen reader users when a new tab or window has been triggered. To prevent the surprise or confusion, our class can help out.
<a href=“www.someurl.com” target=“_blank”>Our Partner Company<span class=“screen-reader-text”> will open in a new window or tab.</span></a>
On the link above, we’re using target to trigger the new window or tab. Visually, this links just says “Our Partner Company”. For screen reader users, it says, “Our Partner Company will open in a new window or tab.” You can write this however you feel makes the most sense and will help the user, but the gist of it is to warn the user that the link is going to make them leave the current page they’re on.
If you’re thinking that you can also use this class to warn when a modal is triggered, that’s also right!
<button role="button" name=“newsletter-modal-trigger" class=“newsletter-link“>
Sign up for our newsletter!
<span class=“screen-reader-text”>This will trigger a modal to open.</span>
</button>
The above example will read “Sign up for our newsletter!” for sighted users and will still warn screen readers that a modal is about to be triggered.
Once you’ve gotten the hang of using this class for instances like these, it will become second nature. Every link you create, every interactive element you build, you’ll ask yourself, how will a screen reader view this? Is it clear enough? If not, how can I use this class to make it better?
References: