Screen Readers

[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.