For the Advanced Trainer: Mew, Mewtwo, the DOM & Accessibility Tree
Your next adventure on the Victory Road towards becoming an Accessibility Champion awaits!
In the last episode of the Accessibility Championships, we covered the basic to intermediate training strategies for building a strong accessibility testing lineup. If you need a quick refresher, visit the previous training ground before advancing to the next level:
The Pokédex of Accessibility
Testing for access barriers is part of a comprehensive quality assurance process. But where does one start? While the WCAG are as extensive as the Pokédex, what exactly is the assistive tech equivalent of Bulbasaur? Where do you start to catch ‘em all?
The Legendaries of Web Accessibility
Now that you have your starter team consisting of automatic and manual testing tools ready and leveled up, it’s time to set out to catch the big ones. Let’s set out to the developer region to catch the equivalents of Mew and Mewtwo!
Mew = DOM Tree
The Document Object Model (DOM) is an API for manipulating DOM trees of HTML and XML documents (among other tree-like documents). This API is at the root of the description of a page and serves as a base for scripting on the web. Quoted from MDN Web Docs
The DOM contains objects representing all the markup elements, attributes, and text nodes. Just like Mew’s DNA served as the base for Mewtwo, based on the DOM the respective browser from which your user is accessing your page will sprout an accessibility tree. The accessibility tree is how screen readers and other assistive tech devices navigate through a website. Assistive tech climbs heading levels and document structures to find the desired information.
This is precisely why following the h1, h2, h3 … heading structure is important. When you skip heading levels, imagine that as cutting off branches from the DOM tree. Assistive tech needs these branches to climb a route along the webpage and collect all the information berries on it.
Mew is also notable for its unique ability to learn every move a trainer could teach a Pokémon with items. While your DOM tree won’t learn any attacks, it still offers you plenty of choices to customize your webpage in an accessible way. For example, through HTML tags like <ruby> to indicate pronunciation for Japanese content.
Mewtwo = Accessibility Tree
Based on the DOM tree, the respective browser from which your user is accessing the page will sprout an accessibility tree, which is in turn accessed by platform-specific Accessibility APIs.
Accessibility Trees generally contain 4 pieces of information about an object:
Name: The name alone should make it clear what element we are looking at. Think “Who’s that Pokémon?” It’s a lot easier to guess when the Pokémon is named after the sound it makes, so it is also if it's a descriptive link instead of simply saying “more”.
Description: What additional information do we need to know about this Pokémon?
Role: Think of the types Pokémons can have: Is this a button, a navigation menu, an ordered or unordered list?
State: Does the Pokémon have an ability, like Mewtwo can have the ability “Pressure”? Not all elements have states, but for example, checkboxes can be checked or unchecked.
Mewtwo is the strongest Pokémon in the first generation and we want an accessibility tree to match its strength. To achieve that we need it fully fledged out, not with half the information missing!
Accessibility APIs
An API (application programming interface) in general is a way for two or more computer programs to communicate with each other. It is some sort of software interface, offering a service to other pieces of software. Quoted from YuriDevAT
Contrary to Mewtwo, multiple Accessibility APIs exist. Let’s have a look at the Accessibility APIs of the most used browsers:
Microsoft UI Automation
Microsoft UI Automation is the Windows framework that allows assistive tech to access UI elements on the desktop.
By using UI Automation and following accessible design practices, developers can make applications running on Windows more accessible to many people with vision, hearing, or motion disabilities. Also, UI Automation is specifically designed to provide robust functionality for automated testing scenarios. Quoted from Learn Microsoft
The accessibility tree in Edge
Learn how to check the Accessibility Tree for keyboard and screen reader support in Edge.
MacOS accessibility API
Apple is well known for its user-centered efforts to make products accessible, but the MacOS Accessibility API offers even more options to make your application accessible, so get familiar with it!
Even though standard AppKit views and controls already adopt the accessibility API, you may want to add additional information to make the controls more useful within the context of your app.
Additionally, if your app uses custom controls, those controls need to adopt the appropriate accessibility protocols to ensure that they provide the required information to accessibility clients. Quoted from Apple Developer Library