Screen Readers
Getting familiar with the screen reader assistive technology
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Screen readers are just one of the numerous assistive technologies available to users. In this lesson, you will learn what screen readers are, how to install and set up one on your operating system, and some standard features and navigation techniques.
What are Screen Readers?
A screen reader is an assistive technology designed to make digital content accessible to people with visual impairments. Screen readers convey information by converting digital text into synthesized speech, which can be heard through a computer's speakers or headphones.
Several screen reader options are available, but they all generally work the same way. When a user navigates to a web page or opens a document, the screen reader reads the page's content in the order presented in the HTML, allowing the user to listen to the text and interact with the content using keyboard commands and navigation techniques.
Since most screen reader users cannot navigate using a mouse, keyboard commands are commonly used instead. These commands include opening and closing programs, reading documents, and navigating web pages.
Installation of Screen Readers
Windows, Mac, and Linux all have native screen readers designed to work specifically with their respective operating systems (OS). This section will cover installing some of the most popular screen readers for each OS.
Mac
![VoiceOver logo](https://d2uusema5elisf.cloudfront.net/courses/the-approachable-guide-to-accessible-components/module_02/lesson_02.02/public/assets/voiceover-logo.png)
By default, Mac’s have a built-in screen reader called VoiceOver. As a result, no separate installation is required, and you’ll look at how to perform basic commands in VoiceOver following the “Installation” section.
Windows
![NVDA logo](https://d2uusema5elisf.cloudfront.net/courses/the-approachable-guide-to-accessible-components/module_02/lesson_02.02/public/assets/nvda-logo.png)
NVDA (NonVisual Desktop Access) is a free and open-source screen reader that allows users to access and navigate digital content using keyboard commands and speech output. It supports various applications and can be customized to meet individual needs.
To install NVDA, navigate to the "Download" page and click the “Download” button. From here, you can follow the instructions to complete the installation process.
💸 Interested in a paid solution?
JAWS is an alternative screen reader for Windows users seeking a premium option.
Linux
![Orca logo](https://d2uusema5elisf.cloudfront.net/courses/the-approachable-guide-to-accessible-components/module_02/lesson_02.02/public/assets/orca-logo.png)
Orca is a free and open-source screen reader developed for Linux that provides access to the computer via user-customizable combinations of speech and braille. For more information on Orca, check out the project's Wiki and public repository to learn how to set up and configure the screen reader on a Linux machine.
Basic Commands
Now that you’ve covered the different screen readers for the respective operating systems, it’s time to go over some basic commands to get familiar with this assistive technology.
Since I own a Mac, I'll show you how to use VoiceOver as an example. But don't worry if you're not using the same tool as me, as you can always check the instructions for your OS's screen reader and follow along that way.
Operation | NVDA | VoiceOver |
---|---|---|
Toggle screen reader on | Control + Alt + N | Command + F5 |
Toggle screen reader off | Insert + Q | Command + F5 |
Pause voice | Control | Control |
Read next focusable item (e.g. link, button) | Tab | Tab |
Read previous focusable item | Shift + Tab | Shift + Tab |
Navigate to next heading | H | VO + Command + H |
Emulate click | Enter | Enter |
Read contents within the section | Insert + Down Arrow | VO + A |
Go to next image | G | VO + Command + G |
Open Elements List or VoiceOver Rotor | Insert + F7 | VO + U |
* Note: The VoiceOver modifier key, represented as VO, is unique to VoiceOver and equivalent to pressing the Control + Option keys.
Nuggets of Knowledge
-
Screen readers are an assistive technology designed to make digital content accessible to people with visual impairments and convey this information by converting digital text into synthesized speech.
-
Free screen readers available based on the operating system:
- VoiceOver on Mac
- NVDA on Windows
- Orca on Linux
Lesson Transcript
[00:00 - 00:12] Screen readers are one of the numerous assistive technologies available to users. In this lesson, you will learn what screen readers are, what options are available based on your operating system, and some common features and navigation techniques.
[00:13 - 00:26] A screen reader is an assistive technology designed to make digital content accessible to people with visual impairments. Screen readers convey information by converting text into synthesized speech, which could be heard through computer speakers or headphones.
[00:27 - 00:39] There are several screen reader options available, but they all generally work in the same manner. When a user navigates to a web page or opens a document, the screen reader reads out the content of the page in the order they are presented in the HTML.
[00:40 - 00:51] This allows the user to listen to the text and interact with the content using a series of navigation techniques. Since most users of a screen reader are unable to navigate using a mouse, keyboard commands are commonly used instead.
[00:52 - 01:04] These commands include things like opening and closing programs, reading documents, and navigating web pages. Windows, Mac, and Linux all have native screen readers that are designed to work specifically with their respective operating systems.
[01:05 - 01:15] And the next couple of slides will take a look at the available options, all of which are free to download and install. By default, Macs have a built-in screen reader called VoiceOver.
[01:16 - 01:26] As a result, no separate installation is required, and we'll look at how to perform basic commands and voiceover later in the lesson. On Windows, there is NVDA, which stands for Non-Visual Desktop Access.
[01:27 - 01:39] This is a free and open-source screen reader that supports a wide range of applications and can be customized to meet individual needs. To install NVDA, navigate to the download page and scroll down until you see the download button.
[01:40 - 01:53] From here, you can follow the instructions to complete the installation process . ORCA is a free and open-source screen reader developed for Linux that provides access to the computer via user customizable combinations of speech and Braille .
[01:54 - 02:10] For more information on ORCA, you can check out the project's wiki and public GitLab repository links that are provided in the lesson manuscript. Now that we've covered the different screen readers for the respective operating systems, it's time to go over some basic commands to familiarize ourselves with this assistive technology.
[02:11 - 02:18] In the lesson manuscript, I provided a table of commands that we will be going through. Since I personally own a Mac, I'll show you how to use VoiceOver as an example.
[02:19 - 02:32] But don't worry if you're not using the same tool as me, as you can always check the instructions for your operating system screen reader and follow along that way. Alright, I'm in the Chrome browser and on the ARIA Authoring Practices Guide website.
[02:33 - 02:44] You will see me reference this site a lot throughout the course, and what better page to test than one that is intended for providing accessible component patterns. The first command I want to show is how to toggle VoiceOver on and off.
[02:45 - 02:48] And the shortcut for this is command F5. VoiceOver on Chrome.
[02:49 - 02:53] Patterns vertical line APG vertical line way vertical line W3C. The toggle it back off will press command F5 again.
[02:54 - 02:59] VoiceOver off. But of course we want to actually test the screen reader, so let's toggle it back on.
[03:00 - 03:04] VoiceOver on Chrome. Patterns vertical line APG vertical line way vertical line W3C.
[03:05 - 03:10] Google Entering Patterns. To navigate between flexible items, you just press the tab key and VoiceOver read out the flexible items in order.
[03:11 - 03:17] The previously-focused-able item press shift-tapp. Link W3C Web Accessibility Initiative.
[03:18 - 03:22] Banner. VoiceOver can get a little chatty, so if you ever want to pause a voice at any time, press the control key.
[03:23 - 03:31] Next, I want to show how to navigate by heading. And the shortcut for this is control option command H.
[03:32 - 03:35] Heading level one. Patterns. You are current heading level two. Read this first.
[03:36 - 03:40] You are accordion. Sections with show/hide functionality. Link heading level two.
[03:41 - 03:47] To read the contents within the section, you press control option A. This will read out the content within the card.
[03:48 - 03:53] The recording card is going to read the description about the accordion. Link heading level two. Alert.
[03:54 - 04:04] Then it will navigate to the alert pattern card and then read the content within the alert card. Next, I want to show how to open up the VoiceOver rotor window.
[04:05 - 04:08] The shortcut for this is control option. Links menu.
[04:09 - 04:11] Heading menu. And I'll navigate through the different options that are available.
[04:12 - 04:13] Link. Link.
[04:14 - 04:17] I want to go to the tabs link, so I'm going to spell tabs. Link.
[04:18 - 04:20] And then press enter. And that will take me directly to the tabs card.
[04:21 - 04:22] Link. You are currently on the page.
[04:23 - 04:24] Link. Click enter.
[04:25 - 04:28] And now I'm on the tabs pattern page. Shortcut option plus zero button.
[04:29 - 04:36] If I wanted to navigate by image on a page, I would press control option command G. W3C Web Accessibility Initiative.
[04:37 - 04:53] There's only one image on this page, so we aren't going to get many options to iterate through, but if there are multiple images, VoiceOver would announce each one in the order that it's presented in the DOM. And that's a brief overview of how to use VoiceOver on a web page.
[04:54 - 05:00] In the subsequent lessons, we will see how to use VoiceOver to conduct accessibility audits on websites and individual components.
Screen readers are one of the numerous assistive technologies available to users. In this lesson, you will learn what screen readers are, what options are available based on your operating system, and some common features and navigation techniques. A screen reader is an assistive technology designed to make digital content accessible to people with visual impairments. Screen readers convey information by converting text into synthesized speech, which could be heard through computer speakers or headphones. There are several screen reader options available, but they all generally work in the same manner. When a user navigates to a web page or opens a document, the screen reader reads out the content of the page in the order they are presented in the HTML. This allows the user to listen to the text and interact with the content using a series of navigation techniques. Since most users of a screen reader are unable to navigate using a mouse, keyboard commands are commonly used instead. These commands include things like opening and closing programs, reading documents, and navigating web pages. Windows, Mac, and Linux all have native screen readers that are designed to work specifically with their respective operating systems. And the next couple of slides will take a look at the available options, all of which are free to download and install. By default, Macs have a built-in screen reader called VoiceOver. As a result, no separate installation is required, and we'll look at how to perform basic commands and voiceover later in the lesson. On Windows, there is NVDA, which stands for Non-Visual Desktop Access. This is a free and open-source screen reader that supports a wide range of applications and can be customized to meet individual needs. To install NVDA, navigate to the download page and scroll down until you see the download button. From here, you can follow the instructions to complete the installation process . ORCA is a free and open-source screen reader developed for Linux that provides access to the computer via user customizable combinations of speech and Braille . For more information on ORCA, you can check out the project's wiki and public GitLab repository links that are provided in the lesson manuscript. Now that we've covered the different screen readers for the respective operating systems, it's time to go over some basic commands to familiarize ourselves with this assistive technology. In the lesson manuscript, I provided a table of commands that we will be going through. Since I personally own a Mac, I'll show you how to use VoiceOver as an example. But don't worry if you're not using the same tool as me, as you can always check the instructions for your operating system screen reader and follow along that way. Alright, I'm in the Chrome browser and on the ARIA Authoring Practices Guide website. You will see me reference this site a lot throughout the course, and what better page to test than one that is intended for providing accessible component patterns. The first command I want to show is how to toggle VoiceOver on and off. And the shortcut for this is command F5. VoiceOver on Chrome. Patterns vertical line APG vertical line way vertical line W3C. The toggle it back off will press command F5 again. VoiceOver off. But of course we want to actually test the screen reader, so let's toggle it back on. VoiceOver on Chrome. Patterns vertical line APG vertical line way vertical line W3C. Google Entering Patterns. To navigate between flexible items, you just press the tab key and VoiceOver read out the flexible items in order. The previously-focused-able item press shift-tapp. Link W3C Web Accessibility Initiative. Banner. VoiceOver can get a little chatty, so if you ever want to pause a voice at any time, press the control key. Next, I want to show how to navigate by heading. And the shortcut for this is control option command H. Heading level one. Patterns. You are current heading level two. Read this first. You are accordion. Sections with show/hide functionality. Link heading level two. To read the contents within the section, you press control option A. This will read out the content within the card. The recording card is going to read the description about the accordion. Link heading level two. Alert. Then it will navigate to the alert pattern card and then read the content within the alert card. Next, I want to show how to open up the VoiceOver rotor window. The shortcut for this is control option. Links menu. Heading menu. And I'll navigate through the different options that are available. Link. Link. I want to go to the tabs link, so I'm going to spell tabs. Link. And then press enter. And that will take me directly to the tabs card. Link. You are currently on the page. Link. Click enter. And now I'm on the tabs pattern page. Shortcut option plus zero button. If I wanted to navigate by image on a page, I would press control option command G. W3C Web Accessibility Initiative. There's only one image on this page, so we aren't going to get many options to iterate through, but if there are multiple images, VoiceOver would announce each one in the order that it's presented in the DOM. And that's a brief overview of how to use VoiceOver on a web page. In the subsequent lessons, we will see how to use VoiceOver to conduct accessibility audits on websites and individual components. [BLANK_AUDIO]