Screen reader testing

 

Why you should learn

Many people with disabilities use text readers or screen readers; both types of software read out the text that is on the page. Additionally, screen readers provide further information for people with limited vision. For example, if the text is a link, the screen reader will announce that; if the screen reader encounters a non-text element, it will read its text alternative.

Screen-reading software can be quite complicated and may seem intimidating at first. However, here’s some good news for you:

  • If you’re sighted, you won’t be as disoriented as a fully blind person trying to learn it, because you can still see your screen and keyboard.
  • The basic keys you learned about on our keyboard testing page still apply here (for devices with keyboards).
  • If you’re just gonna use a screen reader to test websites, you can get by with just a few additional keystrokes and/or gestures, which we have compiled for you below.

Voices and languages

The screen reader voice is the voice synthesizer being used at any given time.

The language can be:

  • The language of your operating system.
  • The language of your screen reader UI.
  • The language of the web content.

You might use a website in multilanguage situations; for example, your operating system or screen reader UI might be in Finnish and the web content in English. Unfortunately, this leads to buggy language behaviour in all major screen reader, OS, and browser combinations, even when the language of a page or part of a page is set correctly. For example, the screen reader might read English text with a Finnish voice (or “accent”). Our former colleague Xurxe Toivo García performed experiments regarding this; check out his article, “The troubled state of screen readers in multilanguage situations.

Reading cursor

The reading cursor is an indicator of where the screen reader “is at”. It often shows up as an outline around the item. When using a screen reader on a website, if might go like this:

  1. Cursor on the navigation bar, and the screen reader announcing “Navigation”.
  2. Cursor on each link, announcing “Link” plus the link text.
  3. Cursor on the navigation bar again, and announcing “End, navigation”.

Note: in the case of many (but not all) screen readers, as the reading cursor goes over a focusable element, it moves keyboard focus to it. The focus will remain on that element as the screen reader carries on until it encounters a new focusable element.

Reading modes

There are two general reading modes, which have to do with how actively the user is controlling the reading cursor:

  1. In continuous reading mode, the user initiates reading (by pressing specific keys or performing a specific gesture), and after that, the reader goes through the rest of the page by itself.
  2. In controlled reading mode, the user moves the reading cursor to the next or previous element, every time using the specific keystroke or gesture. Most screen readers allow users to control the reading granularity; this can mean, for example, choosing whether to read the next letter, word, sentence, or paragraph.

Additionally, if the user is tabbing to jump through the focusable elements on the page, the screen reader announces each element as it comes into focus.

Screen readers don’t always announce the same element in the same way during different reading modes. As a result, it’s important to test using the three methods we just described.

Tips for VoiceOver on macOS (desktop)

  • Learn how to turn it on and off without having to go to Preferences > Accessibility; the specific shortcut depends on your system (you can also set up a personalized shortcut).
  • If you might test content in several languages, set a different voice for each language on VoiceOver Tools.

Basic VoiceOver key presses for testing webpages on macOS

  • VO: VoiceOver modifier (Caps Lock and/or Control + Option, depending on your settings).
  • All the key presses you learned about on our keyboard testing page (Tab, Enter, Space, arrow keys, and Escape).
  • Caps Lock: pause/unpause reading.
  • VO + A: continue reading from the current location of the screen reader cursor.
  • VO + Right Arrow: move the reading cursor to the next item (useful, for example, when the reader encounters a long paragraph and you just wanna move on to the next one instead of listening to all of it).
  • VO + Left Arrow: move the reading cursor to the previous item.

Intermediate VoiceOver key presses for testing websites on macOS

  • VO + U: open VoiceOver rotor. On the desktop, the rotor is a menu that can help you choose how to navigate quickly around the page. You can already use tabbing to jump through all focusable elements, but the rotor might show you a list of, for example, links, landmarks, headings, articles… (you can customize this).
    • Right and Left arrows: switch between rotor lists.
    • Up and Down arrows: switch between items on a rotor list.
    • Enter: select an item on a rotor list.
    • Escape: close rotor menu.
  • VO + Fn + Right Arrow: move the reading cursor to the end of the current landmark region.
  • VO + Fn + Left Arrow: move the reading cursor to the beginning of the current landmark region.
  • VO + Space: activate the focused element.

Tips for VoiceOver on iOS (mobile)

  • Learn how to turn it on and off without having to go to Settings > Accessibility; the specific shortcut depends on your system (you can also set up a personalized shortcut).
  • If you might test content in several languages, set a different voice for each language on Settings > Accessibility VoiceOver > Speech > Rotor Languages.

Basic VoiceOver gestures for testing webpages on iOS

  • 1-finger single tap: select and read an item.
  • 1-finger double tap: activate an item.
  • 1-finger swipe right: move the reading cursor to the next item (useful, for example, when the reader encounters a long paragraph and you just wanna move on to the next one instead of listening to all of it).
  • 1-finger swipe left: move the reading cursor to the previous item.
  • 2-finger single tap: pause/unpause reading.
  • 2-finger swipe up: read everything from the beginning.
  • 2-finger swipe down: continue reading from the current location of the screen reader cursor.
  • 3-finger swipe: scroll (depending on the direction of the swipe).

Intermediate VoiceOver gestures for testing webpages on iOS

On mobile, the VoiceOver rotor is a menu that can help you:

  • Navigate faster: for example, if you choose Rotor > Headings, you can quickly jump through the headings on the page.
  • Change reading granulation: for example, if you choose Rotor > Words, you can read one word at a time.
  • Change screen reader settings: for example, if you choose Rotor > Language, you can change the screen reader voice (“accent”).

Here are some rotor-related gestures:

  • 2-finger rotate clockwise: next Rotor list.
  • 2-finger rotate counterclockwise: previous Rotor list.
  • 1-finger swipe down: next Rotor item.
  • 1-finger swipe up: previous Rotor item.

Other useful gestures:

  • 3-finger double tap: toggle mute (this mutes the screen reader speech completely until you repeat the gesture)
  • 2-finger scrub: Escape
  • 3-finger double tap, hold and flick up: copy
  • 3-finger double tap, hold and flick down: paste
  • 3-finger double tap, hold and flick left: undo
  • 3-finger double tap, hold and flick right: redo

Tips for NVDA on Windows

  • Launch the program like any other; for example, double-click on the shortcut on your desktop.
  • Here are some settings you should check and/or change. To open the settings dialogue, press NVDA + N (see next section to learn more about the NVDA modifier key), and go to Preferences > Settings. This will open the settings dialogue.
    • General > Language: change the language (of the screen reader UI) to match the language of your system.
    • Speech > Synthesizer: choose eSpeak NG or another synthesizer with multilanguage support.
    • Speech > Voice: change the main screen reader voice to match the language of your system.
    • Keyboard > Keyboard layout: you can make it match your machine, or you can choose “Laptop” if you want shortcuts to be a little more similar to VoiceOver on Mac.
    • Keyboard > Select NVDA modifier keys: this is up to you, but it might be a good idea to select all options for more flexibility.

Basic NVDA key presses for testing webpages

  • NVDA: NVDA modifier. By default, this is the Insert key, but you can change the settings so that it can be the Insert key and/or the Numpad Insert key and/or the Caps Lock key.
  • All the key presses you learned about on our keyboard testing page (Tab, Enter, Space, arrow keys, and Escape).
  • Control: stop reading.
  • Shift: pause/unpause reading.
  • NVDA + Down Arrow (desktop) or NVDA + A (laptop): continue reading from the current location of the screen reader cursor.
  • Numpad 9 (desktop) or NVDA + Down Arrow (laptop): move the reading cursor to the next item (useful, for example, when the reader encounters a long paragraph and you just wanna move on to the next one instead of listening to all of it).
  • Numpad 7 (desktop) or NVDA + Up Arrow (laptop): move the reading cursor to the previous item.
  • NVDA + Q: quit NVDA

Intermediate NVDA key presses for testing webpages

  • The following keys by themselves jump to the next available element of that type while adding the Shift key causes them to jump to the previous element of that type (there’s more, we listed just a few):
    • D: landmark
    • H: heading
    • 1 to 6: heading levels 1 to 6
    • K: link
    • U: unvisited link
    • V: visited link
    • L: list
    • I: list item
  • NVDA + Enter: activate focused element.
  • NVDA + Shift + Z (desktop) or NVDA + Shift + S (laptop): turn sleep mode on and off (this affects the current application only)

Tips for JAWS on Windows

  • JAWS is a paid program, and licenses can be over 1000 USD. However, you can download the software for free and use it in 40-minute sessions.
  • Launch the program like any other; for example, double-click on the shortcut on your Desktop. The first time you do this, you will get a dialogue where you can choose to use the 40-minute trial version (you can choose for this dialogue to not be shown in the future).
  • Here are some settings you should check and/or change. To see the JAWS window, simply click on the JAWS icon on your menu bar.
    • Language > JAWS Language: change the language (of the screen reader UI) to match the language of your system.
    • Options > Voices > Voice Adjustment > Profile Name: choose Eloquence or another synthesizer with multilanguage support.
    • Options > Voices > Voice Adjustment > Synthesizer Language: choose “Match JAWS UI Language”
    • Speech > Voice: change the main screen reader voice to match the language of your system.
    • Options > Basic > Use Keyboard layout: you can make it match your machine, or you can choose “Laptop” if you want shortcuts to be a little more similar to VoiceOver on Mac.
  • To close the program, simply close the JAWS window as you would any other program.

Basic JAWS key presses for testing webpages

  • JAWS: JAWS modifier. This is the Insert key on the desktop layout and the Caps Lock key on laptop layout.
  • All the key presses you learned about on our keyboard testing page (Tab, Enter, Space, arrow keys, and Escape).
  • NVDA or Control: stop reading.
  • NVDA + Down Arrow (desktop) or NVDA + A (laptop): continue reading from the current location of the screen reader cursor.
  • Down Arrow (desktop) or NVDA + O (laptop): move the reading cursor to the next item (useful, for example, when the reader encounters a long paragraph and you just wanna move on to the next one instead of listening to all of it).
  • Up Arrow (desktop) or NVDA + U (laptop): move the reading cursor to the previous item.

Intermediate JAWS key presses for testing webpages

The following keys by themselves jump to the next available element of that type while adding the Shift key causes them to jump to the previous element of that type (there’s more, we have only listed a few):

  • R: region (landmark)
  • H: heading
  • 1 to 6: heading levels 1 to 6
  • U: unvisited link
  • V: visited link
  • L: list
  • I: list item

Tips for TalkBack on Android

  • TalkBack may come from your device, or you may have to download it. You can download, for example, the Android Accessibility Suite from Google Play, which includes TalkBack.
  • Learn how to turn it on and off from Settings. It may be under Settings > Accessibility > Screen Reader, under Settings > Accessibility > Installed Services > TalkBack, or somewhere else, depending on your system.
  • Set up a shortcut. It may be under Settings > Accessibility > Advanced Settings, or somewhere else, depending on your system. The shortcuts available will also depend on your system, but they may include “Power and Volume up keys” and/or “Volume up and down keys”.

Basic TalkBack gestures for testing webpages

  • All TalkBack gestures use one finger: this means that you can perform all the other gestures you’re used to, as long as you use more than one finger. For example, to scroll down while TalkBack is on, use two or more fingers.
  • 1-finger single tap: select and read an item.
  • 1-finger double tap: activate an item.
  • 1-finger swipe right: move the reading cursor to the next item in the current navigation setting (useful, for example, when the reader encounters a long paragraph and you just wanna move on to the next one instead of listening to all of it).
  • 1-finger swipe left: move the reading cursor to the previous item in the current navigation setting.
  • Tap with any amount of fingers while reading: stop reading.
  • 1-finger swipe down and then right: open Global Context Menu. This reveals a dialogue with a number of options, including:
    • Read from top
    • Read from next item
    • TalkBack settings
    • Languages
    • etc.

Intermediate TalkBack gestures for testing webpages

  • 1-finger swipe down: switch to next navigation setting. Settings may include:
    • Default: swiping right will move the reading cursor to the next item, regardless of what it is.
    • Headings: swiping right will move the reading cursor to the next heading, skipping the content in between.
    • Links: swiping right will move the reading cursor to the next link, skipping the content in between.
    • etc.
  • 1-finger swipe up: switch to previous navigation setting.
  • 1-finger swipe up, then down: move the reading cursor to the first item on the screen.
  • 1-finger swipe down, then up: move the reading cursor to the last item on the screen.
  • 1-finger swipe right, then left: move the slider up (for example, a volume slider).
  • 1-finger swipe left, then right: move the slider down (for example, a volume slider).
  • 1-finger swipe up, then right: open Local Context Menu. This reveals a dialogue with a number of options, which will depend on the item that’s currently selected. For example:
    • In an editable text field, you’ll get some options related to text editing such as copying, pasting, etc.
    • In other items, you’ll get options related to reading granularity, controls, etc.
  • 1-finger swipe down, then left: go back

Resources

Screen readers and languages:

VoiceOver on macOS:

VoiceOver on iOS:

NVDA on Windows:

JAWS on Windows:

TalkBack on Android: