Illustration of three figures lounging

Screen readers make it possible for Blind, Deafblind and low vision users to comfortably access web or mobile applications. Blind and low vision users will often use screen readers to listen to the words present on a web page, while Deafblind people are more likely to use screen readers connected to refreshable braille output devices to read the content.

How can we  better support our screen reader using friends as they use the applications we design? Here are some great ways to start:

1) Avoid autoplaying audio at all costs

Autoplaying audio can interfere with how well screen reader users are able to hear their device when accessing a page. It can be disorienting, confusing, and ultimately really detrimental to a screen reader's experience.

2) Set a language for your document

<html lang="fr">

Setting language correct within the html attribute is an easy way to make sure screenreader users are able to hear the text on the page with the correct pronunciation rules.

For example, if you set your page language as French, but the text is in English, a screen reader would read out the English text with French pronunciation rules.

3) Make it easy to select the page language

Allow users the option to select the page language near the beginning of the page/DOM. Being able to select the language upon arrival to the page ensures that screen reader users don't have to search through the page (in a potentially unknown language) in order to find their preferred language choice.

4) Use proper alt attributes

This one is important, but can be a bit tricky to remember, but here's how I like to think of it:

All images should have alternative text attributes.

Images that are decorative can have empty text attributes (eg. alt="")

Images that convey meaning should have a short, descriptive alt attribute (eg. a cart icon's alt attribute might look like this: (alt="shopping cart")

4) Remember that text is the most accessible medium

Text is one of the most accessible ways we can present information: it can be aloud via screen reader, converted into braille, and can be translated into other languages. Whenever possible, we should try and convey information in text, along side visuals to communicate to the widest audience.

By avoiding using only visuals (eg. large infographics with detailed text), we can reach a wider audience and make online experiences more enjoyable for screen reader users.

With very little extra effort, we can improve the accessibility and reach of online products.