Using VoiceOver

A activity to practice navigating a website using MacOS’s VoiceOver accessibility tool.

Go fullscreen: ⌃⌥F

Using VoiceOver

What & why

There are many people who use other tools to navigate websites: a very common tool is the screen reader.

We need to make sure our websites work well with screen readers—because it’s the law & the right thing to do.

With some practice using VoiceOver we can become comfortable testing & improving our websites.

Set-up

  1. Work alone on your computer
  2. Use your web browser—Safari works best with VoiceOver (This’ll be the only time I recommend using Safari.)
  3. Get out a set of headphones

Instructions

  1. You’ll be given a step-by-step task
  2. Complete the task with VoiceOver
  3. Show the teacher when you’re done

VoiceOver keys

  • ⌘ F5 — Turn VoiceOver on/off
  • ⌃ — Pause VoiceOver
  • ⌃⌥ ➔ — Move to next item
  • ⌃⌥ ← — Move to previous item
  • ⌃⌥ U — Open the rotor (Use arrow keys to navigate)
  • ⌃⌥⌘ H — Next heading (+ Shift for previous)
  • ⌃⌥⌘ L — Next link
  • ⌃⌥⌘ G — Next graphic
  • ⌃⌥⌘ X — Next list

VoiceOver task

Do all of this with VoiceOver—we’ll be watching.

  1. Go to Wikipedia.org
  2. Search for “Doctor Who”
  3. Go down to the “Changes of appearance” heading
  4. In the table, find & activate the “Jodie Whittaker” link
  5. At the bottom of the page, find & activate her “IMDB” link
  6. Under “Filmography”, find & click the “Doctor Who” link

Show the teacher you’re on IMDB’s “Doctor Who” page.

Start

Using VoiceOver

A activity to practice navigating a website using MacOS’s VoiceOver accessibility tool.