What are screen readers or TTS (Text To Speech)? Screen readers are normally software that is installed on a computer, tablet or smart phone. Its primary purpose is to read out in a synthetic voice, the text information on the screen. There are a number of controls that help with choosing what is read out at any given time and how it is read. Such as reading a page title or spelling out a word.
Generally it will tend to be visually impaired people who will depend on using screen reader software. However, many other people may choose to use screen reader software for reasons from reading difficulties or language differences to ease of proof reading or multi-tasking.
How is screen reader software used?
The way people use screen reader software will depend on both the device and the person using it. For example a touch screen device with screen reader software will use touch gestures to control what is read out and these gestures will tend to be different to those used without the screen reader software enabled.
To help explain this, the Voiceover screen reader software on Apple devices change the single tap gesture to a double tap gesture for activating an item. This is designed to allow people who may not be able to see the screen to locate an item by the voice output before activating it.
Screen reader software on computers generally use keyboard controls to manage the various speech options and can be different from one software package to another. The level of support for the latest web technology or browser will also vary.
People who have a reasonably good level of sight, may use a mouse or other pointer device and may combine the screen reader with a screen magnifier. People who have little or very limited sight will tend to use only a keyboard or touch gestures and may combine the screen reader with a Braille display.
How do screen readers work with the web?
A key difference between using a screen reader compared to a visual display is the way information is presented. Visually, you may have multiple columns, boxes or other sections on a page, that can be quickly identified and read. However, as screen readers only output voice, you can only hear a single piece of information at any one time. A little like a music player, you only listen to one song at a time.
There are many controls within the screen reader software, that allow people to control what they would like to hear. Perhaps a little like the controls on a music player for play/pause or skip forward/backward.
Within a web page, if it follows good semantics, it will give screen reader software valuable information about the content. Things like where the headings or page sections are, what is a link or list, the details of tabular data or what images are on the page.
This information can then be used by the screen reader controls to move between these items more quickly without having to read from start to end. This giving people who use screen readers a similar experience to the visual display.
One thing to note is screen reader software will only look at the HTML or DOM content and ignore the visual styling from CSS. So the order of information being read out is based on the order it is within the HTML or DOM content and not where it is displayed visually.
This is often an area of confusion as an example a page may be displayed visually in three columns with navigation in the left column, main content and footer message in the centre column while additional information like contact details in the right column.
Depending on the order it is coded in the HTML or DOM, a screen reader may read it from left to right or the left column followed by the right column before the main content or alternatively read the main content first.
If we look at what happens in this example if the main content is read first, a user may get down to the footer information and assume this is the end of the content and not bother reading any further.
What can we do for screen reader users to help?
One thing some developers do to help is include skip to links and section markers. Skip to links allow people to quickly skip over a block of content to a specific part of the page and section markers can be used by many screen readers to either list as a summery or skip to just like skip to links.
Headings are another thing most screen readers can list or skip to and is often used by people to get an overview of content or quickly jump to an item of interest. You can read more about headings in the article: Get started with Structured Headings.
The text content is crucial as it is this that screen readers can read out. Things like colour and other visual information is ignored. You can read more about colour in the article: The Smart Design: Accessibility and Colour.
Remember for image content, you can add something called alt text. This is a short bit of text that says the main purpose for the image. I will cover images and alt text in a later article.
Have your say
- Have you ever used or seen someone use a screen reader?
- Do you know if your site is screen reader friendly?
- Would you like to know more about screen readers?
Fantastic items from you, man. I have be aware your stuff previous to and you are just too magnificent.
I really like what you’ve obtained here, certainly like what you’re saying and
the way in which you say it. You are making it enjoyable and you continue to care for to keep it smart.
I can not wait to learn much more from you. This is actually a great web site.