Designing for users of screenreaders

Describe images and provide transcripts for video

Don't only show information in an image or video

People with severe sight impairments need a way of getting the information that visual elements on a page try to convey. They also need to know if there are any additional details they are missing. Provide text content and/or descriptions of: photos, illustrations, diagrams, graphs, animations and videos so a screenreader can read it aloud. This is good for informing search engines too. Also use audio-description in videos, either as a natural part of the narration or additional to it.

Follow a linear logical layout

Don't spread content all over a page

A screenreader takes people through a web page in the order they appear in the HTML code. This might not be the same as how they appear visually on the page. It can be confusing if things are announced out of context or in the wrong sequence. And a users flow can be interrupted because the element expected next, for example a submit button after an input field, is a lot later or earlier in the HTML, even though visually it is close by. Ensure that screenreaders move around pages in the correct order.

Structure content using HTML5

Don't rely on text size and placement for structure

A screenreader will usually read out text with the same voice regardless of font size, weight or other styling. Screenreaders will also not convey the visual arrangement of content on a web page, and what it implies.

To interpret a web page effectively, users need elements like headings, form labels and lists marked up correctly in HTML. Similarly building blocks of the page (header, navigation, main content and footer) should be set out with landmark tags, so the structure can be announced audibly, understood and jumped to.

Build for keyboard use only

Don't force mouse or screen use

People who use screenreaders often cannot see a mouse pointer. Instead of a mouse, they use the keyboard to navigate, moving between elements such as links, form fields and buttons. Ensure that all the actions on the page can be started and finished using only a keyboard. This includes: closing notifications, getting help, controlling videos and submitting forms.

Write descriptive links and headings

Don't write uninformative links and headings

Screenreaders can read out a list of all the headings or links on a page. This enables the user to jump to the desired item without listening to all the content. Heading links need to make sense out of context - a list of ‘Read more' links is meaningless. Instead describe the target section so a decision can be made about if it is the one required.