Automating Display screen Reader Testing On macOS Utilizing Auto VO

In the event you’re an accessibility nerd like me, or simply inquisitive about assistive expertise, you’ll dig Auto-VO. Auto-VO is a node module and CLI for automated testing of net content material with the VoiceOver display reader on macOS.

I created Auto VO to make it simpler for builders, PMs, and QA to extra shortly carry out repeatable, automated checks with actual assistive expertise, with out the intimidation issue of studying learn how to use a display reader.

Let’s Go!

First, let’s see it in motion, after which I’ll go into extra element about the way it works. Right here’s operating auto-vo CLI on smashingmagazine.com to get all of the VoiceOver output as textual content.

$ auto-vo –url https://smashingmagazine.com –limit 200 > output.txt
$ cat output.txt
hyperlink Soar to all subjects
hyperlink Soar to listing of all articles
hyperlink picture Smashing Journal
listing 6 objects
hyperlink Articles
hyperlink Guides 2 of 6
hyperlink Books 3 of 6
hyperlink Workshops 4 of 6
hyperlink Membership 5 of 6
Extra menu pop up collapsed button 6 of 6
finish of listing
finish of navigation
…(truncated)

Looks as if an affordable web page construction: we’ve obtained skip navigation hyperlinks, well-structured lists, and semantic navigation. Nice work! Let’s dig a bit deeper although. How’s the heading construction?

$ cat output.txt | grep heading
heading stage 2 hyperlink A Full Information To Accessibility Tooling
heading stage 2 hyperlink Spinning Up A number of WordPress Websites Regionally With DevKinsta
heading stage 2 hyperlink Smashing Podcast Episode 39 With Addy Osmani: Picture Optimization
heading stage 2 2 objects A SMASHING GUIDE TO Accessible Entrance-Finish Parts
heading stage 2 2 objects A SMASHING GUIDE TO CSS Mills & Instruments
heading stage 2 2 objects A SMASHING GUIDE TO Entrance-Finish Efficiency 2021
heading stage 4 LATEST POSTS
heading stage 1 hyperlink When CSS Isn’t Sufficient: JavaScript Necessities For Accessible Parts
heading stage 1 hyperlink Internet Design Performed Properly: Making Use Of Audio
heading stage 1 hyperlink Helpful Entrance-Finish Boilerplates And Starter Kits
heading stage 1 hyperlink Three Entrance-Finish Auditing Instruments I Found Lately
heading stage 1 hyperlink Meet :has, A Native CSS Guardian Selector (And Extra)
heading stage 1 hyperlink From AVIF to WebP: A New Smashing E-book By Addy Osmani

Hmm! One thing’s a bit funky with our heading hierarchy. We should see an overview, with one heading stage one and an ordered hierarchy after that. As an alternative, we see a little bit of a mishmash of stage 1, stage 2, and an errant stage 4. This wants consideration because it impacts display reader customers’ expertise navigating the web page.

Having the display reader output as textual content is nice as a result of this kind of evaluation turns into a lot simpler.

Some Background

VoiceOver is the display reader on macOS. Display screen readers let individuals learn utility content material aloud, and likewise work together with content material. That implies that individuals with low imaginative and prescient or who’re blind can in concept entry content material, together with net content material. In follow although, 98% of touchdown pages on the net have apparent errors that may be captured with automated testing and assessment.

There are numerous automated testing and assessment instruments on the market, together with AccessLint.com for automated code assessment (disclosure: I constructed AccessLint), and Axe, a standard go-to for automation. These instruments are essential and helpful, however they’re solely a part of the image. Handbook testing is equally or maybe extra essential, however it’s additionally extra time-consuming and might be intimidating.

You will have heard steerage to “simply flip in your display reader and hear” to provide you a way of the blind expertise. I feel that is misguided. Display screen readers are subtle purposes that may take months or years to grasp, and are overwhelming at first. Utilizing it haphazardly to simulate the blind expertise may lead you to really feel sorry for blind individuals, or worse, attempt to “repair” the expertise the improper methods.

I’ve seen individuals panic once they allow VoiceOver, not figuring out learn how to flip it off. Auto-VO manages the lifecycle of the display reader for you. It automates the launch, management, and shutting of VoiceOver, so that you don’t must. As an alternative of attempting to hear and sustain, the output is returned as textual content, which you’ll then learn, consider, and seize for later as a reference in a bug or for automated snapshotting.

Utilization

Caveat

Proper now, due to the requirement to allow AppleScript for VoiceOver, this may increasingly require customized configuration of CI construct machines to run.

Situation 1: QA & Acceptance

Let’s say I (the developer) have a design with blueline annotations – the place the designer has added descriptions of issues like accessible identify and function. As soon as I’ve constructed the function and reviewed the markup in Chrome or Firefox dev instruments, I wish to output the outcomes to a textual content file in order that after I mark the function as full, my PM can examine the display reader output with the design specs. I can try this utilizing the auto-vo CLI and outputting the outcomes to a file or the terminal. We noticed an instance of this earlier within the article:

$ auto-vo –url https://smashingmagazine.com –limit 100

Situation 2: Check Pushed Growth

Right here I’m once more because the developer, constructing out my function with a blueline annotated design. I wish to take a look at drive the content material in order that I don’t must refactor the markup afterward to match the design. I can try this utilizing the auto-vo node module imported into my most well-liked take a look at runner, e.g. Mocha.

$ npm set up –save-dev auto-vo
import { run } from ‘auto-vo’;
import { count on } from ‘chai’;

describe(‘loading instance.com’, async () => {
it(‘returns bulletins’, async () => {
const choices = { url: ‘https://www.instance.com’, restrict: 10, till: ‘Instance’ };

const bulletins = await run(choices);

count on(bulletins).to.embody.members([‘Example Domain web content’]);
}).timeout(5000);
});

Beneath the Hood

Auto-VO makes use of a mixture of shell scripting and AppleScript to drive VoiceOver. Whereas digging into the VoiceOver utility, I got here throughout a CLI that helps beginning VoiceOver from the command line.

/System/Library/CoreServices/VoiceOver.app/Contents/MacOS/VoiceOverStarter

Then, a collection of JavaScript executables handle the AppleScript directions to navigate and seize VoiceOver bulletins. For instance, this script will get the final phrase from the display reader bulletins:

operate run() {
const voiceOver = Utility(‘VoiceOver’);
return voiceOver.lastPhrase.content material();
}

In Closing

I’d love to listen to your expertise with auto-vo, and welcome contributions on GitHub. Strive it out and let me know the way it goes!