Testing websites with VoiceOver on Mac: a beginner’s guide

VoiceOver is the screen reader built into macOS. It reads the screen aloud and lets you navigate a website with the keyboard.

It can quickly reveal whether a website makes sense without a mouse or looking at the screen. You hear headings, links, buttons, forms, images and tables. This helps you find practical problems yourself.

You do not need to master VoiceOver to test with it. The aim is not to pretend to be blind. It is to check whether important parts of your website are understandable and usable with a screen reader.

What can you test with VoiceOver?

You can check whether:

• The page has a logical heading structure.
• Links have clear text.
• Buttons are announced understandably.
• Forms have suitable labels and errors.
• Images have useful alternatives.
• The page order makes sense.
• Tables have understandable row and column headers.
• Elements can be reached and operated with the keyboard.

Useful terms

The VO key

Many VoiceOver commands begin with VO. This is not a separate key: it means the VoiceOver modifier.

By default, you can use:

• Control + Option
• Caps Lock

For VO + Space, press Control + Option + Space or Caps Lock + Space.

VoiceOver cursor

The VoiceOver cursor identifies the element VoiceOver is currently reading.

It is not always the same as ordinary keyboard focus. That difference may be confusing at first, but becomes familiar.

On the left of the image, ordinary keyboard focus surrounds the Toegankelijk Online logo, shown as Chrome’s default blue outline. On the right, the black outline is the VoiceOver cursor around the menu being read.

Rotor

The rotor is a VoiceOver menu for choosing which elements to navigate by, such as headings, links, forms, tables and images.

It can also adjust settings such as speaking rate or language when multiple voices are installed. Customise it in VoiceOver settings.

Open the rotor with VO + U.

Interacting with website elements

Sometimes you encounter a group, table or other element that you must enter first. Apple calls this “interacting”.

This is a distinctive VoiceOver concept. An element can have several layers, and you move deeper to access more information.

• Start interacting with VO + Shift + Down Arrow.
• Stop interacting with VO + Shift + Up Arrow.

VoiceOver across Apple devices

Apple introduced VoiceOver in 2005 with Mac OS X 10.4 Tiger. It is now built into macOS, iOS and iPadOS.

On Mac, you mainly use the keyboard. On iPhone and iPad, you mainly use touchscreen gestures.

For website testing on Mac, start with Safari. VoiceOver is an Apple product developed for Safari. Other browsers may work too, with results that can be better or worse.

Set up macOS for keyboard navigation

On some macOS versions, first enable keyboard navigation for the operating system. This lets you use Tab to move through buttons, fields and other controls.

Go to System Settings > Accessibility > Keyboard and enable Full Keyboard Access or keyboard navigation.

The location varies by macOS version. It may be under System Settings > Keyboard > Keyboard Shortcuts. Older versions call System Settings System Preferences.

Set up Safari

Next, let Safari use Tab to reach every page element.

Go to Safari > Settings > Advanced and enable Press Tab to highlight each item on a webpage.

Without this setting, Tab often moves only to fields and selection menus. Enabling it includes links, buttons and other elements.

Turning VoiceOver on and off

Start VoiceOver in one of these ways:

• Press Command + F5.
• Hold Command and quickly press Touch ID three times, if your Mac or keyboard has it.
• Open Accessibility Shortcuts with Option + Command + F5.
• Go to System Settings > Accessibility > VoiceOver.

A welcome window often appears. It also provides interactive practice, useful if you have never used VoiceOver.

Adjust voice and speed in VoiceOver Utility

VoiceOver Utility is the separate settings app for adjusting voices, speed and the rotor, and adding voices.

With VoiceOver active, open it using VO + Fn + F8. On some keyboards, VO + Fn + 8 also works.

It is also available through System Settings > Accessibility > VoiceOver.

While using VoiceOver:

• Choose a speech setting with VO + Command + Left Arrow or VO + Command + Right Arrow.
• Adjust it with VO + Command + Up Arrow or VO + Command + Down Arrow.

Testing with VoiceOver

Here is how to put those commands into practice. Start by reading the page, then test individual elements.

Test 1: read the page

Open the page in Safari and enable VoiceOver.

Use these commands:

While listening, consider:

• Do you understand what the page is about?
• Is important information read in a logical order?
• Do you hear unexpected text, duplicates or filenames?
• Is visible information missing?
• Are any elements unclear?

Test 2: headings

Headings help screen reader users quickly understand a page’s structure.

Open the rotor with VO + U. Use Left Arrow and Right Arrow to choose Headings, then move through them with Up Arrow and Down Arrow.

Check:

• Is there a clear main heading?
• Is the order logical?
• Do headings explain what the page is about?
• Are levels skipped without a good reason?
• Is text marked as a heading only when it is a heading?
• Are any visible headings missing from the list?

You can also move to the next heading with VO + Command + H.

Test 3: links and buttons

Links and buttons often need to make sense without extra context.

Open the rotor with VO + U and choose Links or Form Controls, depending on what you are checking.

Other commands:

Check:

• Does link text say more than read more, click here or more information?
• Is the outcome of opening a link clear?
• Are buttons identified as buttons?
• Do icon buttons have clear names?
• Can you operate the element with the keyboard?

Test 4: forms

Forms often cause problems. Check each field separately.

Use Tab, Shift + Tab, the rotor or VO + Right Arrow to move through the form.

Check:

• Does every field announce a clear label?
• Are required fields identified?
• Are instructions announced at the right time?
• Do you hear errors when entering invalid information?
• Is it clear how to fix errors?
• Can you submit without a mouse?

Example of a problem

A field visually says Email, but VoiceOver announces only text field. It probably lacks a properly associated label.

Test 5: images

Find images with VO + Command + G.

Check:

• Do informative images have useful alternatives?
• Are decorative images ignored?
• Do you hear filenames such as image-1234.png?
• Is visible text inside an image also available in the page text or its alternative?

Not every image needs a long description. Decorative images should have an empty alternative.

Test 6: tables

Find the next table with VO + Command + T.

Tables demonstrate VoiceOver’s layers. Enter the table with VO + Shift + Down Arrow.

Move between cells using arrow keys with the VO modifier.

Useful commands:

Check:

• Is the number of rows and columns clear?
• Are column headers read correctly?
• Are row headers read when needed?
• Is it genuinely a data table?
• Can you understand its content cell by cell?

Extra: check ordinary Tab order

This also matters to people who use a keyboard without a screen reader. For this check, use ordinary commands:

• Tab
• Shift + Tab
• Enter
• Space
• Arrow keys where appropriate

Check:

• Can you reach all interactive elements?
• Is the order logical?
• Can you see where focus is?
• Can you open and close menus?
• Can you use and close dialogs or pop-ups?
• Does focus get trapped anywhere?

Common problems

Watch for these signs:

• A button is announced only as group or image.
• Link text says only read more.
• A form field has no name.
• An error is not announced.
• An icon button has no accessible name.
• Headings follow an illogical order.
• Visible text is not announced.
• VoiceOver reads duplicate or unnecessary text.
• Focus moves unexpectedly.
• A menu, pop-up or slider cannot be operated with a keyboard.

Keyboard reference

Learn more

Apple’s detailed VoiceOver guide helps you learn more commands or understand differences on your Mac.

• Apple VoiceOver User Guide for Mac
• Get started with VoiceOver on Mac
• VoiceOver commands and gestures on Mac
• Keyboard shortcuts and gestures in Safari on Mac