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. It helps people who are 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 interact with documents, spreadsheets, and the user’s operating system.
Reading the Web Page
Screen readers provide text-to-speech technique 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 Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make the web content and applications more accessible for the users who rely on assistive technologies (AT).
Accessible Controls
Accessible controls are created by using the HTML and ARIA attributes when needed. When creating a control you have to think about the functionality it provides and how you can represent it, so that the screen readers would announce it correctly.
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 a combobox looks like this:
<div role="combobox" aria-disabled="true" ...> ... </div>
For more information about ARIA attributes, the available roles and respective states they support see: WAI-ARIA 1.2. As an example, on WAI-ARIA 1.2 Button, you can read more about the ARIA attributes for the button role and the supported states.