Writing for UX Testing with VoiceOver
First blogged by Pat Godfrey: April 2021
…
Screen readers are an alternative to code inspection. They're useful to content designers who don't master our digital medium. This article examples Apple's VoiceOver. Other screen readers are available including the free to download NVDA screenreader for Windows.
Shared Learning
Flag this content to your friends, connections, and colleagues.
What is a screen reader?
Screen readers help people access digital content in the way that suits their ability scenarios, preferences, and needs.
How screen readers work
You may read that a screen reader takes all the visual information from a screen and presents it in an auditory way. That's not accurate.
Screen readers interpret the information written to the DOM page structure read by web browsers. More specifically, they read what's available to the accessibility tree—described by Mozilla's MDN Docs. They can read content our visual reader can't see, and can omit content only visual readers can see. This can make a different content experience for people reading visually and people using a screen reader. We use these differences to create an inclusive experience.
In short, screen readers read code. They don't interpret visual information although AI is often capable of doing that.
Screen readers present information in the way their technology is designed to do. Some announce content, some print it to the screen in a simplified format, and others drive the dots on a Braille display. So it's incorrect to describe every screen reader's output as an auditory experience and it's also a helpful explaination among a naturally ableist design team.
If you are unsure of this concept, then you really ought to read my article, "Click or Tap? Misunderstanding of Affordance". I hope to convince you there.
Getting started with VoiceOver
Learning to control VoiceOver across all your system and applications is not easy. There is a large number of keystrokes to recall. Competence comes with motivation and practice, which our busy content designer may not have a lot of.
This guide includes the bare minimum of keystroke to learn and relies on our cheating when first positioning VoiceOver's focus on a page.
VoiceOver requirements
You will need the following to test digital content with VoiceOver on a Mac:
- A keyboard.
- A mouse or pointing device of choice. Note that touch pads need specific set-up.
- An internet browser.
Key to VoiceOver keys
You can test a web page with VoiceOver using the following keyboard keys and the arrow keys:
- ^
- ⌥
- ⌘
- Fn
- F5
- ⇧
- Space
The VO keys
The VO key combination tells the computer to expect a VoiceOver key command. Press the ^ + ⌘ together.
Starting VoiceOver
To start VoiceOver press the VO keys + Fn + F5 together.
Note. If your function keys are not dual-purposed, then you won't need to press Fn.
Focussing VoiceOver
With VoiceOver started, use you pointing device to select a piece of content. This cheat gets you testing with VoiceOver quickly.
Navigating content with VoiceOver
There's more to controlling VoiceOver than we can fit on this page. However, we can cheat just a little and navigate through and test our content. Here's a cheat sheet:
Moving around
- Position VoiceOver on a page. Move your cursor to and then select the place to start reading from.
- Select next item. Press the VO keys + →.
- Select previous item. Press the VO keys + ←.
Interactions
- Enter or exit an interactive element. Press the VO keys + ↓ .
- Activate an item or open a menu. Press the VO keys + Space
- Select the next item in a menu. Press the VO keys + ↓ .
- Select the previous item in a menu. Press the VO keys + ↑ .
Try VoiceOver now
Explore the following content exercises with VoiceOver.
You may be surprised to discover what VoiceOver reads isn't what's projected onto the screen. This is an important outcome toward convincing your content designers to specify an inclusive content experience. It needs some knowledge of how the accessibility tree is extracted from the DOM.
We need to know how to design inclusive content using ARIA, HTML attributes, and other coding techniques. We don't need to engineer documents and we do need to specify the inclusive content experience.
Start VoiceOver and focus on the first line of the following content. Note how the screen reader experience guides the visual experience.
Remember to start VoiceOver by pressing the VO keys + Fn + F5 together.
Note. If your function keys are not dual-purposed, then you won't need to press Fn.
The following content types will all display the same way.
A table example.
| Disadvantages | Advantages |
|---|---|
| Navigation | Visual organization |
| Verbosity | Data relationships 1 |
Table summaryOn balance, the advantages are applicable to data tables and not layout tables. Note 1. Data relationships like data value pairs and data sets. |
|
List for tomorrow
- Milk
- Cheese
- Butter
Exercise 1 outcomes
You may have noted that VoiceOver stumbled on the "A" in the line reading as, "A table example". This is because strong (bold) emphasis is applied to "table" as the following code reveals.
<p>A <strong>table</strong> example.</p>
To avoid code conflicts, the exercise fakes the h1 and h2 announcements using div aria-level="1" and div aria-level=2". It's not best practice and should be interesting to you!
Support and tutorials
You can access VoiceOver's help and tutorial while it is open.
Important. Close the VoiceOver tutorial to stop its audible announcements.
Summary
VoiceOver and other screen readers are the content designer's proofs of concept when crafting inclusive experiences. The concept is to provide an equitable experience, which means you may need to offer different content to visual and screen reader audiences.
Plan for the novice new to assistive browsing tecjnology. There's a balance to meet between adding and removing content for each audience group. In particular, screen reader users are reported to be frustrated by over-verbosity. It's worth noting the complaint is made once a screen reader user is fully competent with their browser technology and input devices, which takes time.
We can't occlude the novices who may not have a voice on the internet yet.
Reference this article
Godfrey, P. (Year, Month Day). Article Heading Retrieved Month Day, Year, from URL
Contribute to this article
Please add your comments.