Apr 10, 2022
Web accessibility
 min read

How to be more screen reader friendly

Screen readers make it possible for people to hear the words on a web page read out to them or outputted to a refreshable braille output device. We often think of screen reader users as people who are Blind, Deaf-blind or have low-vision, but in reality, screen readers are also used by people who prefer listening to content instead of reading it.

How can we  better support our screen reader using friends as they use the applications we design and develop? 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.

Subscribe to my weekly newsletter

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thanks for joining our newsletter.
Oops! Something went wrong.