Web-Design
Wednesday June 23, 2021 By David Quintanilla
Automating Screen Reader Testing On macOS Using Auto VO — Smashing Magazine


About The Creator

Cameron Cundiff is a Software program Engineer and chief in Accessibility and Inclusive Design. He builds AccessLint and is the co-founder and organizer of the New …

More about

Cameron

Automated testing is a crucial a part of any software program challenge, together with testing for accessibility. There are already instruments for linting and integration testing accessibility, however what about end-to-end testing with actual assistive expertise? Since I hadn’t seen this earlier than, I got down to construct Auto VO, a driver for the VoiceOver display reader.

When you’re an accessibility nerd like me, or simply interested by assistive expertise, you’ll dig Auto-VO. Auto-VO is a node module and CLI for automated testing of internet 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 exams with actual assistive expertise, with out the intimidation issue of studying easy methods 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 working 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 record of all articles
hyperlink picture Smashing Journal
record 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 record
finish of navigation
...(truncated)

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

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

Hmm! One thing’s a bit of funky with our heading hierarchy. We should see an overview, with one heading degree one and an ordered hierarchy after that. As an alternative, we see a little bit of a mishmash of degree 1, degree 2, and an errant degree 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 form of evaluation turns into a lot simpler.

Some Background

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

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

You will have heard steerage to “simply flip in your display reader and hear” to present you a way of the blind expertise. I believe that is misguided. Display readers are refined 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 unsuitable methods.

I’ve seen individuals panic after they allow VoiceOver, not understanding easy methods 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 should. As an alternative of attempting to hear and sustain, the output is returned as textual content, which you’ll be able to 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 will likely require customized configuration of CI construct machines to run.

State of affairs 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 characteristic 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 characteristic as full, my PM can examine the display reader output with the design specs. I can do 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
State of affairs 2: Check Pushed Growth

Right here I’m once more because the developer, constructing out my characteristic with a blueline annotated design. I wish to take a look at drive the content material in order that I don’t should refactor the markup afterward to match the design. I can do 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.embrace.members(['Example Domain web content']);
  }).timeout(5000);
});

Below 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 sequence 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 = Software('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!

Smashing Editorial
(vf, il)



Source link