Making Your Website Accessible and Compatible with Screen Readers

A lot has been written about making your site compatible with smartphones and tablets, improving performance and the importance of SEO. But making your site accessible is just as important, and even written into laws in some countries. Accessibility is the term given to the ability for a site to be compatible with screen readers and in turn makes them readable by people with disabilities.

Making your site accessible doesn’t require a lot of new code, but it does require that you follow HTML5 standards. Some changes will even make it easier for standard users to read your content. Most changes are invisible to the user, but for a screen reader they play an important role.

Use HTML5 Standard Tags

For years, developers had to use div containers to categorize different sections of a site.

<div class="header"></div>

While the above code works fine for a standard browser, it doesn’t help a visually impaired user since a screen reader doesn’t know what to do with this header. Luckily, HTML5 has semantic tags that help organize content. Header, footer, button, and nav elements help the reader better understand your code’s intent. Instead of using the previous code to create a header, you use the HTML5 header tag.

<header class="header"></header>

You should also use the button tag when defining a button. Prior to HTML5, it was common to use images or links and then use JavaScript to define the click event. For accessibility, always use the button tag.

<button>Sign up for our newsletter</button>

When a screen reader comes across this button, it reads the text aloud for the visually impaired viewer. Always make sure that your buttons have text that explain what happens when it’s clicked. Don’t use “click here” for either links or buttons, because it doesn’t tell the viewer what happens when they click the button.

HTML5 and ARIA Roles

You can take HTML5 code a step further. You can add ARIA roles. Accessible Rich Internet Applications (ARIA), provides you with standards and guidelines that you can use to help mold your site code. The ARIA roles further describe the purpose of any containers, so that the reader knows what to do with them.

Roles are useful when you don’t have an HTML5 site and don’t want to upgrade, or there is no HTML5 equivalent for a role.

<div role="banner"></div>

In the above code, the “banner” role is equivalent to the HTML5 header tag.

There are several other roles that apply to navigation, menus, tree views, and grids. Any significant element should be tagged using the role property where appropriate.

Using Alt Text in Images

The alt property in images is often used for SEO purposes, but it’s also a necessity for screen readers. Make sure your images have proper descriptions in alt property definitions instead of using only keywords or phrases solely for SEO.

When a screen reader comes across an image, the description is read aloud for the viewer. An image with poor alt text (or none at all), makes it confusing for the reader. Viewers with slow web connections will also thank you. The alt text is shown when the image link is broken or a slow web connection is detected in some browsers.

Video and Audio

Videos are a part of a content-rich site, but they can’t be seen or heard by all of your viewers. You can make your videos accessible using two methods: subtitles and transcripts. Streaming sites such as YouTube has specific settings that you can use to provide subtitles in your videos. Turn them on for the hearing impaired.

You can also transcribe content from videos to text. The text shown at the bottom of the video can be read by a screen reader for people who cannot see the content. It’s also beneficial for people who cannot hear the audio and prefer reading text that describes the content.

Don’t Forget Your Other Code

It’s not uncommon to have a JS-heavy website. When you’re reviewing your code for accessibility, don’t forget to edit JS including jQuery.

One more point to mention is the use of hide/show containers. A reader won’t read hidden content to the viewer. You might have text that you think is unnecessary for the page and hide it unless the user clicks an image or button. This causes poor navigation for the visually impaired using a reader. Instead of hiding text, add as much content to the page as possible. When you run out of room, provide a button with a popup that users can use to view more information.

Get the latest in Web Performance

Subscribe now to receive the latest news, tips and tricks in web performance!

The information you provide will be used in accordance with the terms of our privacy policy