Screen reader setup and resources

Set up for Windows

Though Windows includes a screen reader called Narrator, it seems to get limited use in practice. As such, we'll use NVDA, a free and open source screen reader with fairly wide usage, for our demo.*

Installing NVDA

Here's my recommended setup for NVDA. You are, of course, welcome to deviate from this or experiment with different options.

1. Download NVDA from here
2. When you run the downloaded executable, it will start talking, but you can continue to use the mouse as normal if you'd like.
3. Choose to install NVDA on your computer.
4. Make sure to uncheck "Use NVDA on the Windows logon screen" so it doesn't get annoying later.
5. After it's finished installing, you'll see a welcome dialog. For keyboard layout, choose "desktop" if your computer has a number keypad on the right side of your keyboard or "laptop" if not. Check "Use Caps Lock as an NVDA modifier."
6. Open the NVDA settings by right-clicking on the NVDA icon in your system tray and choosing Preferences -> Settings.
7. Under Speech, you can experiment with the different voices and rate/pitch settings if you want. This is usually where I'll turn up the rate because I find the default to be too slow.
8. Under the Vision section, check "Enable Highlighting." This will draw a rectangle around the thing NVDA is reading, which can be useful for visually tracking what it's doing.
9. There are a ton of other options, but you can probably leave them for now. Click OK to save.
10. If you're having trouble understanding the speech or would just rather read what NVDA would say instead, you can enable the Speech Viewer under the Tools menu.
11. When you're done, you can exit NVDA from the menu. You can start it again from the desktop shortcut (if you left that box checked) or from the start menu.

Navigation with NVDA

• The NVDA Commands Quick Reference, accessed from the Help menu, lists a ton of keyboard commands. You certainly don't have to memorize any of them, but it may be useful to scroll through the page to get a sense for how navigating the screen entirely by speech would work.
• Many commands on that page use the "NVDA key." It acts as a sort of Control key for NVDA commands. The NVDA key is usually the Insert key, but if you checked the box on the welcome screen, you can also use Caps Lock. So when the page says you can bring up the NVDA menu by pressing "NVDA+N", this means holding down either Insert or Caps Lock and then pressing N.
• The difference between the desktop and laptop keyboard layouts is mainly that the desktop layout makes heavy use of the numpad (and thus has fewer commands that require holding down multiple keys). In this layout, you need to have Num Lock off, or else the numpad keys will just type numbers.
• One set of keys that are particularly useful with web pages is covered in the Single-Letter Navigation section of the quick reference. When reading a web page, the letter keys let you jump to important items throughout the page. Note that these don't use the NVDA key; for example, to jump to the next heading, you just press H. (If you're typing in a text box, these keys won't work until you hit ESC.)

With that, you should be able to go through the Teach Access tutorial below.

Set up for macOS

macOS's built-in screen reader, VoiceOver, is pretty good. It even has a tutorial that goes over some essential commands with opportunities to practice.

1. To enable VoiceOver, you can go to System Preferences -> Accessibility -> VoiceOver and check the box. Or you may be able to press Command + F5.
2. When you start VoiceOver for the first time, it will launch the tutorial. I highly recommend flipping through the screens of the tutorial to learn some of the commands.
   (The tutorial voice is rather slow, even compared to VoiceOver's default. You can just read the text and click "Start Practice" to try things.)
3. I don't have much experience with VoiceOver since I don't have a Mac. But between the built-in tutorial and some of the commands listed in the Teach Access tutorial, I think you should be good to go.
4. I believe the default behavior if you shut down your computer with VoiceOver running is to start it again when your computer boots. You should be able to turn it off using the same process as turning it on (System Preferences or the keyboard shortcut).

Tutorial and resources

The Teach Access tutorial offers an introduction to making web pages accessible. Now that you have a screen reader set up, try going through a few pages to get a feel for the design patterns that work well and those that work poorly.

Here are a few assorted resources:

• MDN article on ARIA
• List of ARIA roles and examples of using them
• Example JavaScript for a modal dialog
• Index of ARIA Design Pattern Examples (There are many examples here, some of which are very complex. I personally would recommend erring on the side of simplicity in many cases, but the more involved examples serve to demonstrate just how powerful these techniques are.)