Assistive technology guide, VoiceOver for Mac testing steps

We’ll take you step by step through how to test a component or feature with VoiceOver screen reader for Mac. Test with the latest version available.

How to turn VoiceOver on / off

VoiceOver screen reader for Mac OS comes already installed on Macs. It's recommended to use a shortcut to turn VoiceOver on or off.

1. To toggle VoiceOver on or off, from any screen or web page, at any time, use a keyboard shortcut, press 'Cmd + F5'. VoiceOver may take a few seconds to start.
2. When VoiceOver opens, you will hear an annoucement. If at any time you would like to stop VoiceOver while announcing something, press 'Ctrl'.
3. To activate an item, once it has focus, press 'Ctrl + Opt + Space'.
4. There are many VoiceOver keyboard commands that you can use, though only a few are needed to perform the testing steps, all of which are explained below.
5. The VoiceOver (VO) modifier keys are 'Ctrl + Opt'.
6. Use VoiceOver with the default settings.

Back to page contents

It's speaking too fast

If you are new to VoiceOver, you may find the rate in which announcements are made too quick to understand. To find a speaking rate that you are comfortable with:

1. Select ‘Rate’ in the settings rotor menu. Press 'Ctrl + Opt + Cmd + Shift + right arrow' to cycle through the menu options, until you hear 'Rate' announced.
2. Press 'Ctrl + Opt + Cmd + Shift + down arrow' to decrease the speaking rate.
3. Press 'Ctrl + Opt + Cmd + Shift + up arrow' increase the speaking rate.
4. When you have adjusted the rate, release the keys.

Back to page contents

Testing in a foreign language

When testing with assistive technology it's important to test with content in a language that you can understand and with a language that is supported by the assistive technology. For further information see the assistive technology testing in a foreign language guide.

VoiceOver supports over 30 languages on Mac.

Back to page contents

Testing steps

We’ll take you step by step through how to test a component or feature. Following the same steps every time, ensures that everyone is testing using the same methods and using the most common techniques. The steps also enable anyone, in any role, to use VoiceOver for the first time.

To become more familiar and proficient using assistive technology, resist the temptation to cheat, always try to navigate like a user would.

As you go, make notes of any bugs you find.

Step 1 - Open Safari

Open Safari, this is the most used browser by VoiceOver users.

Note: VoiceOver is an Apple product built primarily for other Apple products such as Safari, while VoiceOver will work with other browsers you may encounter bugs which aren’t present in Safari; the default VoiceOver browser.

Step 2 - Go to the testing url

Navigate to or type in the testing url.

Step 3 - Turn VoiceOver on

Press 'Cmd + F5' to turn VoiceOver on via a keyboard shortcut.

Step 4 - Get in position to start testing

Get in position to start testing by navigating as follows, depending on the context on which you are testing your component, either within a page, at the top of a page or in isolation. This will ensure that when you start testing you don’t miss out any elements within the component that you can’t see, such as:

• Semantics for any landmark or sectioning elements
• Visually hidden off screen elements

Testing a component within a page

Navigate as follows, to the last element in the component before the component you're going to test.

1. To enter the web area press 'Ctrl + Opt + Shift + down arrow'. You will hear the page title and first element announced.
2. Press 'Ctrl + Opt + right arrow' until you reach the last element in the component before the component you're going to test.

If the component you're going to test starts with a heading, you may find it quicker to navigate to that heading via the web rotor menu, then press 'Ctrl + Opt + left arrow' until you reach the last element in the component before the component you're going to test.

Testing a component at the top of a page or in isolation

Ensure you are right at the top of the page.

1. To enter the web area press 'Ctrl + Opt + Shift + down arrow'. You will hear the page title and first element announced.
2. Press 'Ctrl + Opt + left arrow' to ensure you are right at the top of the page, you will hear a 'dong'.

Press 'Ctrl + Opt + right arrow' to move to the next item, press 'Ctrl + Opt + left arrow' to move to the previous item.

Step 5 - Navigate through all items

You are now ready to start testing.

1. Press 'Ctrl + Opt + right arrow', you should enter the component.
2. Listen to what's announced and check that the semantics and announced content match the screen reader UX. If the documented screen reader UX is missing, ask UX for this before continuing.
3. If you need to hear what was announced again, press 'Ctrl + Opt + left arrow' to move to the previous item, then press 'Ctrl + Opt + right arrow' again.
4. Move through all items in the component, listening to what’s announced, until you reach the first item in the component after the component you're testing, or the bottom of the page if testing in isolation.

Navigating to the component after the one you're testing, will ensure that you don’t miss out any elements that you can’t see at the end, such as a visually hidden off screen element.

Navigating through all items bug examples

• You press 'Ctrl + Opt + right arrow' and nothing is announced
• What's announced doesn’t match the screen reader UX
• Semantics not announced for any landmark or sectioning elements
• List semantics not announced
• Something is announced twice

Step 6 - Navigate by headings

1. Get in position to start testing, using the heading keyboard shortcut, press 'Ctrl + Opt + Cmd + Shift + H' to navigate through headings until you reach the last heading in the component before the one you're testing, or if testing in isolation (or there are no other headings above) move to the top of the page, press 'Cmd + L' to move to the address bar, press enter to reload the page, then press 'Ctrl + Opt + Shift + down arrow' to enter the web area, you will hear the page title and first element announced.
2. Press 'Ctrl + Opt + Cmd + H' to read the first heading in the component you're testing. Check that the semantics and announced content match the screen reader UX.
3. If you need to hear what was announced again, press 'Ctrl + Opt + Cmd + Shift + H' to move to the previous heading, then press 'Ctrl + Opt + Cmd + H' again.
4. Use the heading keyboard shortcut, to go through all headings in the component, listening to what’s announced, until you reach the first heading in the component after the component you're testing, or the bottom of the page if testing in isolation (or there are no other headings).

Navigating to the component before the one you're testing, will ensure that you don’t miss out any elements that you can’t see at the beginning of the component, such as a visually hidden off screen element.

Navigating by headings bug examples

• A heading is defined in the screen reader UX, you press 'Ctrl + Opt + Cmd + H' and nothing is announced
• A heading was announced and none were defined in the screen reader UX
• A heading is announced twice
• What's announced doesn’t match the screen reader UX

Step 7 - Navigate by links and buttons

1. Get in position to start testing, navigate through actionable elements, such as links, buttons and form elements, press 'Shift + Tab' until you reach the last actionable element in the component before the one you're testing, or if testing in isolation (or there are no other actionable elements above) move to the top of the page, press 'Cmd + L' to move to the address bar, press enter to reload the page, then press 'Ctrl + Opt + Shift + down arrow' to enter the web area, you will hear the page title and first element announced.
2. Press 'Tab' to read the first link or button in the component you're testing. Check that the semantics and announced content match the screen reader UX.
3. If you need to hear what was announced again, press 'Shift + Tab' to move to the previous link or button, then press 'Tab' again.
4. Press 'Tab' to go through all links and buttons in the component, listening to what’s announced, until you reach the first link or button in the component after the component you're testing, or the bottom of the page if testing in isolation (or there are no other links or buttons).

To activate a link or button, once it has focus, press 'Enter'.

Navigating by links and buttons bug examples

• A link or button is defined in the screen reader UX, you press 'Tab', focus moves but nothing is announced
• A link or button was announced and none were defined in the screen reader UX
• A link or button is announced twice
• What's announced doesn’t match the screen reader UX

Step 8 - Navigate by landmarks

1. Select ‘Landmarks’ in the web rotor menu. If that method of navigation isn't present, add it to the web rotor menu.
2. Press the down arrow key to read the first landmark in the component you're testing. Check that the semantics and announced content match the screen reader UX.
3. If you need to hear what was announced again, press the up arrow key to move to the previous landmark, then press the down arrow key again.
4. Press the down arrow key to go through all landmarks in the component, listening to what’s announced, until you reach the first landmark after the component you're testing, or the bottom of the page if testing in isolation (or there are no other landmarks).

Web rotor menu

To use the web rotor menu:

1. Press 'Ctrl + Opt + U' to open the menu
2. Press the left or right arrow key to cycle through the menu options
3. Press the up or down arrow key to read the menu items
4. Press 'Enter' to select and navigate to an item
5. To close the menu, press 'Esc'

Adding items to the web rotor menu:

1. If VoiceOver is on, press 'Cmd + F5' to toggle VoiceOver off
2. Go to the ‘Accessibility’ menu in ‘System preferences’
3. Within the 'VoiceOver' menu select 'Open VoiceOver utility'
4. Within the 'Web' menu select 'Web rotor'
5. Check the desired item, such as 'Landmarks' or 'Buttons'
6. Navigate back to your testing url
7. To resume testing, press 'Cmd + F5' to toggle VoiceOver on

Navigating by landmarks bug examples

• A landmark is defined in the screen reader UX, you press the down arrow key and nothing is announced
• A landmark was announced and none were defined in the screen reader UX
• A landmark was announced without a label
• What's announced doesn’t match the screen reader UX

Step 9 - Accessibility acceptance criteria

Accessibility acceptance criteria can be used for additional manual testing steps specific to your component and documented screen reader UX, specific VoiceOver keyboard commands maybe needed.

1. Read the accessibility acceptance criteria. If the accessibility acceptance criteria is missing, ask your team's business analyst for the criteria before continuing.
2. Check that any criteria that is specific to using a screen reader is met with VoiceOver on Mac.

Step 10 - Components with a table

1. Get in position to start testing, using the table keyboard shortcut, press 'Ctrl + Opt + Cmd + Shift + T' to navigate through tables until you reach a table in a component before the one you're testing, or if testing in isolation (or there are no other tables above) move to the top of the page, press 'Cmd + L' to move to the address bar, press enter to reload the page, then press 'Ctrl + Opt + Shift + down arrow' to enter the web area, you will hear the page title and first element announced.
2. Press 'Ctrl + Opt + Cmd + T' to move to the first table in the component you're testing. Check that the number of rows and columns announced is correct, and that a table caption was announced if one was defined in the screen reader UX. If you need to hear what was announced again, press 'Ctrl + Opt + left arrow' to move to the previous item, then press 'Ctrl + Opt + right arrow'.
3. Navigate the table by cell, reading through each row and column, until all table cells are read. Press 'Ctrl + Opt + right arrow' to move to the next cell, press 'Ctrl + Opt + left arrow' to move to the previous cell, press 'Ctrl + Opt + down arrow' to move to the cell below, and press 'Ctrl + Opt + up arrow' to move to the cell above. Check that the semantics and announced content match the screen reader UX.
4. Press 'Ctrl + Opt + Cmd + T' to go through all tables in the component, repeating the above steps, listening to what’s announced, until you reach the first table after the component you're testing, or the bottom of the page if testing in isolation (or there are no other tables).

Navigating by tables bug examples

• You press 'Ctrl + Opt + Cmd + T' and nothing is announced
• Number of rows and columns announced isn't correct
• A table was announced without a caption
• Table headings aren't announced when moving through table data
• A table was announced and none where defined in the screen reader UX
• What's announced doesn’t match the screen reader UX

Step 11 - Document any bugs

Document any accessibility bugs found, include as much information as you can, including information on how to replicate the issue and the bug priority level.

Note, this guide takes one approach, there are other ways you could do this. Back to top