VoiceOver Basics for Web Accessibility Testers
- Pamela Thomas (Deactivated)
This guide is intended for Syracuse University staff who would like to use VoiceOver as part of a WCAG 2.x assessment of a web site or web application. It is not intended to be a comprehensive introduction to the VoiceOver screen reader. For in-depth instruction on using VoiceOver please refer to VoiceOver User Guide on the Apple website.
The WCAG 2.x A and AA Manual Evaluation form used by Syracuse University staff for testing web sites and web applications includes a number of checkpoints that are best tested using a screen reader. The following table lists the relevant checkpoints, a recommended testing technique with the corresponding VoiceOver keystrokes, and video clips illustrating VoiceOver output for each command.
Notes:
- VoiceOver was developed for use with Safari, but it is also compatible with Chrome.
- You must enable full keyboard access on your Mac and enable tab key navigation in Safari.
- VoiceOver includes a feature called the Rotor which is a popup window that displays information about the current page. You can use the Rotor as described below to quickly view a list of page headings, links, form controls, etc. Be aware that images are not listed in the Rotor by default. If you would like to be able to check for alternative text using the Rotor you must go to System Preferences > Accessibility > VoiceOver > Open VoiceOver Utility > Web > Web Rotor
- By default VoiceOver will offer audible and on screen instructions for how to interact with screen elements. Once you are comfortable with VoiceOver commands you may wish to lower the verbosity level by going to System Preferences > Accessibility > VoiceOver > Verbosity.
- It is recommended that you test on a Mac or Macbook with a full keyboard. If you do not have a full keyboard you may need to consult your system Help for guidance in using F1 - F12 keys, Home/End keys, etc.
- These instructions use the standard abbreviation 'VO' when referring to the VoiceOver modifier key, which by default is CTRL + Option.
| Step | WCAG Checkpoint | Description | JAWS Keystrokes | Video |
|---|---|---|---|---|
| Listen to the Page | 2.4.2 2.1.1 | Check that the page title is descriptive. Listen for content that might be missed by VoiceOver. Check that the content reading order is logical and intuitive. Listen for alternative text on images. Check that navigation regions and main content regions are announced. | VO + A (Start) CTRL (Stop) | |
| Tab through the interactive elements on the page | 2.4.1 1.3.2 | Confirm that there is a Skip Navigation option and that it is functioning properly. Confirm that navigation menus function and that menu options are announced properly. Confirm that tab order is logical and intuitive. | Tab (Move forward) Shift + Tab (Move back) Spacebar (Activate a menu) Up arrow/Down Arrow (Move through menu items) Esc (Close popup windows) | |
| Check for headings | 1.3.1 2.4.6 Headings are used and nested appropriately | Tab between page headings to check that heading structure is logical and begins with Level 1. You can also open the Rotor and view a list of page headings. | VO + Cmd + H or VO + U (Open the Rotor) Right Arrow to toggle to the Headings view | |
| Check for descriptive links | 2.4.4 Link text is descriptive | Tab between page links or open the Rotor and view a list of page links. | VO + Cmd + L or VO + U (Open the Rotor) Right Arrow to toggle to the Links view | |
| Check for alternative text | 1.1.1 Alternative text on images, buttons, embedded multimedia, and frames is appropriate and meaningful. | Tab between images on the page or open the Rotor and view a list of images. | VO + Cmd + G or VO + U (Open the Rotor) Right Arrow to toggle to the Images view | |
| Verify that forms are properly labelled and that all fields are usable. | 3.3.1 | Tab through form fields or use the Rotor to check that all form fields, including search fields, are properly identified and include informative labels, the type of form element (text field, checkbox, radio button, etc.) as well as the current state of the element (checked, not checked, etc.) | VO + U (Open Rotor) Right Arrow to toggle to the Form Controls view | |
| Verify that required fields are identifed and that there is proper error handling. | 3.3.1 3.3.2 3.3.3 Sufficient information is provided for filling out forms, identifying required fields and correcting errors. | Fill out a form and test required fields or validated fields for proper error handling. | Same as above | Same as above |
| Verify that tables are marked up properly | 1.3.1 Data tables have simple structure. Information, structure, and relationships conveyed through presentation can be programmatically determined | Check the tables list to be sure that VoiceOver correctly interprets the column headings. Move around the cells and make sure that for each cell the correct column header, cell content, and column number is announced.
| VO + C (Read column headings) VO + Arrow keys (move to cells) |