Ropes Course Objectives
The goal of the ropes course is to give you guided screen reader practice navigating this simple web page with your screen reader of choice. We anticipate that the course will get its most use from people who are beginners with screen readers, and that by tackling the following tasks a number of times, you will achieve a level of proficiency and comfort at screen reader use, even if you don't achieve mastery here. Still, it should increase your skills to go through these various tasks forward, backward, with and without the help text, and even potentially with your screen turned off.
If this is your first time here, you may want to avail yourself of the Course Setup section that offers a crash course, cheat sheet, and tips. If you're an old pro at your screen reader, feel free to jump right to the tasks.
Course Setup
For beginners of the course, we recommend activating the Instructions in Tasks at first, and then the Crash Course. Save the Cheat Sheet for subsequent practice, as it covers much of the screen and can be disorienting. On the other hand, having some or all of the screen covered can be helpful to get a better sense of the experience of a screen reader, so it's not a bad idea to activate the Cheat Sheet for further practice.
VoiceOver Hints
NVDA Hints
Narrator Hints
JAWS Hints
VoiceOver for iOS Hints
Talkback for Android Hints
Screen Reader Crash Course
VoiceOver
VoiceOver is included in every Macintosh computer, and is the only screen reader available for that platform.
VO key and Control Option Lock
VoiceOver can be a bit challenging for some because it can require the pressing of many multiple keys simultaneously. The VoiceOver key (here, and elsewhere referred to as VO), for example, is actually a combination of Control and Command pressed simultaneously.
These two keys, along with whatever additional keys to activate various controls, need to be pressed simultaneously, which can be tricky. In order to make this process easier, VoiceOver allows you to lock those keys on so you don't have to press them when hitting another key. You activate this "Control Option lock" by pressing VO + ;. While this makes managing all the other keypresses easier, it does change in a few instances what otherwise would be single keypresses, so it may take a little extra cognitive load to remember if Control Option Lock is on or not.
The Rotor
VoiceOver for Mac is navigable in several differnt ways, which gives its users options, but also makes it a little more tricky to learn than some of the other screen readers. For sighted users looking to utilize VoiceOver for testing purposes, the VoiceOver Rotor is a useful way to navigate since it displays a list of navigable elements in whichever category is chosen. Sighted users might find it quicker to visually scan the list of accessible names for the elements than going through them each auditorily.
Open the Rotor by pressing VO + U. Change the Rotor mode by pressing the right or left arrow keys. The modes you'll cycle through in the Rotor are Links, Headings, Form Controls, Tables, Landmarks, Frames, Window Spots, and Content Chooser. Those last two are mostly used in applications, so you don't need to worry about them for now.
Once you settle on the desired Rotor mode, use the down and up arrow keys to navigate the list of elements. When you find the one you want, type Enter to jump to it. Once you find yourself in the page at your desired element, VoiceOver will read that element to you. To have it read the next one to you, type VO and the right arrow.
If you just want VoiceOver to start reading down the page from there, type VO + A. If you want to read letter by letter, press just the right arrow without pressing VO. The down arrow without VO will read the whole next line.
QuickNav
Yet another layer of complexity VoiceOver has is called "QuickNav". This is activated by pressing both the right and left arrow keys simultaneously without VO. QuickNav has a few uses, but most important in this circumstance is the ability to continue navigating by the selected Rotor mode without having to reopen the Rotor. For example, if you arrived at a heading by hitting enter on it in the Headings mode of the Rotor, with QuickNav on you can hit the down arrow to jump to the next heading.
More standard screen reader navigation
If QuickNav is enabled, VoiceOver can also jump around various elements of the page directly, similar to how most other screen readers do it, without having to open the separate Rotor. Again, the way to do this is to press the left and right arrow keys simultaneously to activate QuickNav, and then press whichever additional key indicates the desired element. For example, H takes you to the next heading, and Shift + H takes you to the previous one.
The most useful one-letter keys that can be used with QuickNav are as follows:
- H = Heading
- 1-6 = Heading levels 1-6
- L = Link
- B = Button
- J = Form Element
- T = Table
- X = List
- G = Graphic/Image
NVDA
NVDA must be downloaded and installed for free by going to https://www.nvaccess.org/download/ and following the installation steps. You launch it by clicking on it in the Windows start menu, then activate it on this webpage by clicking CONTROL + ALT + N. The first time you launch it'll have you do some basic setup, like choose whether you're using the desktop keyboard layout (with separated numberpad, I think), or laptop keyboard layout. You can also choose at this time to set the caps lock key to work as the NVDA key.
After tabbing to the options you want and selecting them by hitting Enter, you can then tab to the Okay button that will close the dialog, get you back into the web page, and start reading it from top to bottom. If you want to stop it from reading, press Control.
Once in the webpage, you will be able to navigate in a linear fashion, or jump around the page.
Linear navigation
If you want to work through the page element by element, you can do that by pressing the down or up arrow key. Once you arrive on an interactive element (a link, a button, or a form element), you can activate it by pressing Enter. Jump to the next interactive element by pressing Tab.
Jumping around the page
With NVDA you generally jump around the page by pressing single keys, though some commands call for the NVDA key. By default, the NVDA key is the insert key. In NVDA settings (NVDA + N), you can also set NVDA to be the Caps Lock.
You only need to use the NVDA key for a few commands. You've already seen that you open NVDA's settings with NVDA + N, and another helpful setting to turn on is for the Speech Viewer that will display what NVDA is reading so you can see it as well as hear it. Enable that in the Tools menu of the Settings.
Single-key navigation is pretty simple. For example, if you wanted to jump to the next heading, you'd type H. To jump to the previous heading, you'd type Shift + H.
Other keys to use to jump around the page are these:
- H = Heading
- 1-6 = Heading levels 1-6
- D = Landmark (main, header, footer, nav, aside)
- K = Link
- V = Visited Link
- U = Unvisited Link
- F = Form field
- B = Button
- X = Checkbox
- T = Table
- L = List
- I = List Item
- G = Graphic/Image
After arriving at the element you've just jumped to, you can begin reading the screen from that point by pressing NVDA + down arrow. Stop NVDA from reading continuously by pressing Control.
Narrator
Narrator has come preinstalled on every machine running the Windows operating system since Windows 2000. For quite a while it did little more than read web pages in a linear fashion, though now it works more similarly to NVDA and JAWS by letting you jump around the page.
Turn on Narrator by typing the Windows key and Control + Enter. This will open a message box with some information that you'll have to dismiss by tabbing to the Ok button and hitting Enter. After that will open the Narrator Home where you can learn how to use it. You can tab to the Minimize button and activate it which will bring you back to this web page.
Back in this web page, and start reading it from top to bottom. If you want to stop it from reading, press Control.
Once in the webpage, you will be able to navigate in a linear fashion, or jump around the page.
Linear navigation
If you want to work through the page element by element, you can do that by pressing the down or up arrow key. Once you arrive on an interactive element (a link, a button, or a form element), you can activate it by pressing Enter. Jump to the next interactive element by pressing Tab.
Jumping around the page
With Narrator you generally jump around the page by pressing single keys, though some commands call for the Narrator key. By default, the Narrator key is either the insert key or the Caps Lock key.
Single-key navigation is pretty simple. For example, if you wanted to jump to the next heading, you'd type H. To jump to the previous heading, you'd type Shift + H.
Other keys to use to jump around the page are these:
- H = Heading
- 1-6 = Heading levels 1-6
- D = Landmark (main, header, footer, nav, aside)
- K = Link
- F = Form field
- B = Button
- X = Checkbox
- T = Table
- G = Graphic/Image
After arriving at the element you've just jumped to, you can begin reading the screen from that point by pressing NVDA + down arrow. Stop NVDA from reading continuously by pressing Control.
JAWS
JAWS must be downloaded, installed, and activated with an annual license by going to https://www.freedomscientific.com/products/software/jaws/ and following the installation steps. You launch it by clicking on it in the Windows start menu, then activate it on this webpage by clicking CONTROL + ALT + N.
Once in the webpage, you will be able to navigate in a linear fashion, or jump around the page.
Linear navigation
If you want to work through the page element by element, you can do that by pressing the down or up arrow key. Once you arrive on an interactive element (a link, a button, or a form element), you can activate it by pressing Enter. Jump to the next interactive element by pressing Tab.
Jumping around the page
With JAWS you generally jump around the page by pressing single keys, though some commands call for additional keys like Insert or Control.
You open JAWS's settings with Insert + J, and then Alt + O and then Enter to edit the options. another helpful setting to turn on is for the Speech Viewer that will display what JAWS has read so you can see it as well as hear it. Enable that in by typing Insert + Space + H. Because this is a separate window rather than a floating window, you'll have to make it very narrow and set it side-by-side to your open browser window to refer to if you want.
Single-key navigation
Single-key navigation is pretty simple. For example, if you wanted to jump to the next heading, you'd type H. To jump to the previous heading, you'd type Shift + H.
Other keys to use to jump around the page are these:
- H = Heading
- 1-6 = Heading levels 1-6
- R = Landmark (main, header, footer, nav, aside)
- Q = Main content landmark
- U = Unvisited Link
- V = Visited Link
- F = Form field
- B = Button
- X = Checkbox
- T = Table
- L = List
- I = List Item
- G = Graphic/Image
After arriving at the element you've just jumped to, you can begin reading the screen from that point by pressing Insert + down arrow. Stop JAWS from reading continuously by pressing Control.
VoiceOver for iOS
VoiceOver currently comes installed on every iPhone and iPad. To start it you can open the iOS Settings, then Accessibility, then VoiceOver. Here you can turn it on if you want, but I don't recommend it. Instead, you should activate another of the options: enabling quick launch. Activate quick launch by triple clicking the home button or the side button.
This will turn VoiceOver on and set its focus on whichever app you're currently in. If you turn VoiceOver on from the Accessibility menu directly, you'll first have to switch back to your web browser, which can be just a little tricky with VoiceOver. Instead, enable the accessibility shortcut option, which is towards the bottom of the options.
Once you agree to the permissions that pop up when you turn the accessibility shortcut on, you can return to this page and turn VoiceOver on by triple clicking the home button or the side button.
Once on this or any webpage, you can move through it in either a linear fashion, or by jumping around the page by different kinds of elements.
Linear navigation
You move through the page by swiping right to move forward or left to move backward. When you move forward or backward, VoiceOver will automatically read you a part of the whole of the next or previous element. For example, if you're moving forward into a paragraph, you'll typically get the entire paragraph, unless it has a link or some other sort of element inside of it, like a bolded STRONG element. In that case, you'll only hear the sentence up to that new element, and will have to swipe right to hear the rest.
When you land on an interactive element like a link or a button, VoiceOver will read it out and announce what it is, for example, "contact us, link". To activate this element, you can double tap anywhere on the screen with a single finger.
Jumping around the page
If you want to jump around the page, you can do that by turning the VoiceOver rotor to the kind of element you'd like to jump by in the VoiceOver reading controls, and then swiping down to go to the next of that kind of element, or up to go to the previous.
Set the rotor to your desired kind of element by twisting two fingers on the screen as if you were rotating a dial. This moves you through the list of controls you can navigate by: Links, Controls, Headings, Paragraphs, Lines, Words, Characters, as well as several other reading options. Once you've settled on an element type to read by, swipe down or up with a single finger to go to the next or previous of that kind of element.
There are a lot of elements you can choose to enable on the Rotor in VoiceOver settings, among them Characters, Words, Lines, Containers, Headings, Landmarks, Links, Visited Links, Non-visited Links, Tables, Lists, Buttons, Form Controls, Text Fields, Search Fields, and Images. I recommend enabling Headings, Landmarks, Lists, Links, Buttons, Form controls, and Tables.
TalkBack for Android
TalkBack currently comes installed on every Android phone. To start it you can open Android Settings, then Accessibility, then TalkBack. Here you can turn it on if you want, but I don't recommend it. Instead, you should activate another of the options, the TalkBack shortcut, which is to hold the volume up and down keys simultaneously for a few seconds. This will turn TalkBack on and set its focus on whichever app you're currently in. If you turn TalkBack on from this Accessibility menu, you'll be stuck in it. Don't do that. Instead, activate the TalkBack shortcut option, which is a little farther down.
Once you agree to the permissions that pop up when you toggle the Talkback shortcut button, you can return to this page and turn TalkBack on by holding the volume up and down button simultaneously for a few seconds.
Once on this or any webpage, you can move through it in either a linear fashion, or by jumping around the page by different kinds of elements.
Linear navigation
You move through the page by swiping right to move forward or left to move backward. When you move forward or backward, TalkBack will automatically read you a part of the whole of the next or previous element. For example, if you're moving forward into a paragraph, you'll typically get the entire paragraph, unless it has a link or some other sort of element inside of it, like a STRONG element. In that case, you'll only hear the sentence up to that new element, and will have to swipe right to hear the rest.
When you land on an interactive element like a link or a button, TalkBack will read it out and announce what it is, for example, "contact us, link". To activate this element, you can double tap anywhere on the screen with a single finger.
Jumping around the page
If you want to jump around the page, you can do that by activating the kind of element you'd like to jump by in the TalkBack controls, and then swiping down to go to the next of that kind of element, or up to go to the previous.
Activate your desired kind of element by either swiping left or right with three fingers, or swiping up, then down in one movement with a single finger, or down then up. Either way moves you through the list of controls you can navigate by: Links, Controls, Headings, Paragraphs, Lines, Words, Characters, as well as several other reading options. Once you've settled on an element type to read by, swipe down or up with a single finger to go to the next or previous of that kind of element.
Tips and tricks
I've found it pretty difficult to perform the double-tap action with the thumb while holding the phone in one hand. It's much easier to achieve the correct double-tap gesture by tapping with a single finger.
I suspect this is because the thumb, while holding the phone in the same hand, has more play over the screen, which activates the alternate method of moving around the screen: the Explore by Touch option where TalkBack reads out the elements of the page as you drag your finger over them. I haven't found a way to turn this feature off, and it makes one-handed navigation while holding the phone in your hand a bit inconsistent.
VoiceOver Cheat Sheet
These commands require you to have VoiceOver's QuickNav feature on by pressing the right and left arrow keys simultaneously:
- H = Heading
- 1-6 = Heading levels 1-6
- L = Link
- B = Button
- J = Form Field
- T = Table
- X = List
- G = Graphic/Image
NVDA Cheat Sheet
Single-key commands:
- H = Heading
- 1-6 = Heading levels 1-6
- D = Landmark
- K = Link
- B = Button
- J = Form Field
- T = Table
- Control + Alt + arrow keys to move inside table
- L = List
- I = List Item
- G = Graphic/Image
Narrator Cheat Sheet
Single-key commands:
- H = Heading
- 1-6 = Heading levels 1-6
- D = Landmark
- TAB = Link
- B = Button
- F = Form Field
- T = Table
- Control + Alt + arrow keys to move inside table
- L = List
- I = List Item
- G = Graphic/Image
JAWS Cheat Sheet
Single-key commands:
- H = Heading
- 1-6 = Heading levels 1-6
- D = Landmark
- TAB = Link, button, form field
- B = Button
- X = Checkbox
- F = Form Field
- T = Table
- Control + Alt + arrow keys to move inside table
- L = List
- I = List Item
- G = Graphic/Image
VoiceOver for iOS Cheat Sheet
Gestures
- Swipe left/right = forward/backward one element
- Swipe down/up = next or previous element of specified type
- Two-finger twisting motion = change the indicated element type in the Rotor
- Two-finger swipe down = read on from next element
- Two-finger swipe up = read entire page
- Two-finger single tap = stop reading
Recommended Reading controls order
- Headings,
- Landmarks,
- Links,
- In-Page Links,
- Tables,
- Lists,
- Buttons,
- Form Controls,
- Images,
TalkBack Cheat Sheet
Gestures
- Swipe left/right = forward/backward one element
- Swipe down/up = next/previous element of secified type
- Three-finger swipe right/left, or one-finger swipe up-then-down or down-then-up = change specified element type
- Two-finger triple tap = read on from next element
- Two-finger single tap = stop reading
Reading controls order
- Characters
- Words
- Lines
- Paragraphs
- Headings
- Controls
- Links
- Windows
- Landmarks*
- *(Landmarks must be added in Android settings > Accessibility > Talkback > Talkback settings > Customize menus > Reading controls)
Course Timer
The tasks
Practice web page
Despite the tasks up above, the best way to start feeling comfortable with your screen reader might be to simply arrow through this page, listening to all the elements in order to familiarize yourself with what a screen reader sounds like.
What is a screen reader?
Blind people can't see computer screens where most web pages are intended to display. Luckily, since HTML (the language all web pages are based on) is text-based, this can be refactored into something that can be understood by blind users. This is done with a screen reader program in connection with a web browser.
The screen reader and browser work together to read a webpage out loud to its user. Since it would be very tedious for the user to hear every element of the webpage read to him or her just as it appears on screen, screen readers give their users methods of skipping around the page in various ways. Although in most cases these don't make it so that screen reader users can digest the page as shallowly and quickly as a sighted user, it does help to close the gap somewhat.
The major screen readers
There are dozens of different screen readers that each work in a slightly different manner, but there are basically three dominant screen readers.
VoiceOver
VoiceOver is the least used of the big three screen readers, but we mention it first for a couple reasons. First, it's the most easily available to the certain demographic that it serves: the Apple Computer users. VoiceOver comes preinstalled with every Apple computer and iphone OS, and has done since 2005 for the computers and 2009 for the phones. You don't need to download it, or pay for a license, or set it up, or anything. It's there already, and ready to work.
Second, if you're an Apple user, VoiceOver is the only option. While I mentioned there are dozens of screen readers out there, the only one available for Apple is VoiceOver. I'm not sure whether Apple created and maintains VoiceOver because the other screen reader creaters hadn't made one available for Mac, or whether the creators haven't offered a Mac product because VoiceOver is already an option, but for whatever reason, VoiceOver is all there is for Mac.
Top three reasons to use VoiceOver
- You use a Mac for your laptop or desktop computer, so VoiceOver is your only option
- You regularly use VoiceOver on your phone, and are used to the Rotor, and navigating the page in different ways through it.
- You want to support the company that has made accessibility for the blind a built-in and well-supported part of its offering.
Getting Started with VoiceOver
Follow this link to learn how to get started with VoiceOver.NVDA
In 2006 two blind computer scientists started developing the NonVisual Desktop Access (NVDA) program which they released for Windows and made it open-source. Initially NVDA was the least-used screen reader because it was the newest, but since its release its popularity has steadily grown until it surpassed the major commercial product in 2019, but then its usage declined and was again surpassed in 2020.
Top three reasons to use NVDA
- You are a blind Windows user and can't or don't want to pay an expensive license for a screen reader.
- You are a web developer who uses Windows or Linux and wants to test your work without JAWS's opinionated guesses. You want to know what problems there are with the site rather than have a smooth experience based on the screen reader's attempt to present everything in the site to you most intelligently.
- You are a blind computer user who lives outside of the United States. JAWS is extremely difficult to obtain a license for outside of the United States, but NVDA is freely available everywhere.
Getting Started with NVDA
Follow this link to learn how to get started with NVDA.JAWS
Freedom Scientific had created a freely available screen reader for MS DOS machines in the 80s, and called it Job Access With Speech (JAWS). In the mid-nineties when Windows began to be the dominant operating system, JAWS was rewritten for Windows and has served that platform since then. It is the most expensive of the screen reader options, costing about $100 for an annual personal license, or $250 per quarter for a professional license.
JAWS was very briefly surpassed in pupularity by NVDA, but is now back in the most-popular spot, particularly among blind users. JAWS is reportedly the most customizable screen reader, and it also does some guessing to try to provide to its users such things as missing labels for form fields. These features make for a better experience for users who depend on the software for their experience online, though this makes it a less useful tool for web developers trying to provide an accessible experience to their users, as JAWS's guesses may hide or obfuscate some problems in the code that ought to be remediated.
Top three reasons to use JAWS
- You have a Windows computer and use JAWS as your daily driver because of how smoothly it works.
- You like the extensive customization that is allowed by JAWS.
- Your JAWS license is provided by your school or work.
Getting Started with JAWS
Follow this link to learn how to get started with JAWS.Screen Reader Comparison
| Screen Reader | Year Released | Operating System | Optimal Browser | Cost | Estmated US Users |
|---|---|---|---|---|---|
| VoiceOver | 2005 | Mac | Safari | Free | 286,000 |
| NVDA | 2006 | Windows | Firefox | Free | 1,350,800 |
| JAWS | 1995 | Windows | Firefox | $95/year | 2,362,800 |
Why you should test your site with a screen reader
Many aspects of your site can be tested without a screen reader. There are lots of visual aspects of your site that can present problems to users with colorblindness or contrast sensitivity problems, as well as parts of it that can present cognitive challenges to users with ADHD or other cognitive disabilities. But the single largest group of internet users from the disabled community likely to visit your site are the blind.
While you can theoretically code things in such a way as it should be correctly read by all screen readers, the sad fact of the matter is that screen readers often interpret code slightly differently from what you'd expect. Because of this, you should really test your site on a screen reader, and ideally on several different ones. Just like you check your site out to make sure it works well at a variety of different screen sizes, you should really make sure that it works for screen readers as well.
Acknowledgements: This ropes course was designed and implemented by Deneb Pulsipher, Captain Accessible here at SeaMonster Studios, with the help and guidance of Kosi Asabere, accessibility UX specialist.