How to Enable Screen Reader Support?

Overview

Screen readers convert digital text into synthesized speech. They empower users to hear content and navigate with the keyboard. This technology helps people who visually impaired to use information technology with the same level of independence and privacy as anyone else. Screen readers are also used by people with certain cognitive or learning disabilities, or users who simply prefer audio content over text. Beyond the web, screen readers also work with documents, spreadsheets, and the user’s operating system.


Reading the Web Page

Screen readers use the technique text-to-speech by going through the HTML of the page and interpreting the HTML tags and attributes.
Well structured web pages should include headings, lists, paragraphs and quotations where appropriate. They can also have tables that include relevant information about their content, images that carry an alternative text description and links that have clear link text.
When accessibility issues cannot be managed with native HTML, ARIA can help bridge those gaps.


Accessible Control

Accessible controls are created by using the HTML and ARIA attributes when needed.. When creating a control you have to think of what functionality you have and how to represent it so screen readers will announce it.

Creating a button that a screen reader will understand can look like this:

<button>Save</button>

or this:

<div role="button">Save</div>

ARIA can have attributes to represent different states trough screen readers. Disabling the button looks like this:

<div role="button" aria-disabled="true">Save</div>

Here we can read more about aria attributes and what roles support what states. For more information about ARIA attributes and the roles and respective states they support: WAI-ARIA 1.1 Button role.