The Role of DOM Order in Accessibility
At Walmart Labs, we strive to create delightful and seamless user interfaces that are robust, inclusive and accessible. We do this so that everyone can easily browse through the pages and understand the products before they make any decisions — decisions which could range from saving a product to a list, adding it to a registry, and purchasing it along with any protection plan that works best for the customer. In order to achieve this, we must consider the diverse range of users in the world, understand the kinds of impairments that are known to affect people in how they use digital media, as well as educate ourselves about the features and limitations of assistive technologies that they may use.
There are millions of people accessing www.walmart.com daily and many of them depend on accessibility technologies such as screen readers, keyboards, braille displays, high-contrast browser modes, browser zoom and text-to-speech software.
To illustrate how important it is to support these technologies, here are some statistics on disability for the US:
- There were 326,155,000 people in the U.S. in 2018 and 13.1% of them (42,630,000 people) had a disability of some kind.
- Around 2% of the population has some kind of vision disability (i.e. are blind or have significant difficulty seeing even with glasses)
- Around 50% of the population has some kind of clinically significant refractive error (a visual impairment which may be corrected with glasses if mild enough).
- Around 8% of males and 0.5% of females have congenital or inherited color vision deficiencies.
- Around 2% of adults have a hearing disability.
- Over 4% have a cognitive disability (difficulty remembering, concentrating, or making decisions).
In order to accommodate screen reader technologies, software developers should ensure that all of the semantics of HTML web pages are expressed correctly. If we have to design custom elements that need to have the same behavior as their native counterparts (for example a button that is created using <div> tags), we would need to also manually incorporate the necessary functionalities, such as adding tabIndex to make the elements focusable.
This is a partial screenshot of Walmart’s item page taken in 2018. All interactive elements on this page were focusable, readable (by screen readers), discoverable, and all images were provided with succinct descriptions using the “alt” attribute.
However there was still room for improvement. Although the visual order of the information was logical and intuitive, it turned out that screen readers were put into a potentially confusing situation: the shipping and pickup information, which when available is displayed higher up in the page, can change when selecting a new color or size. Screen reader users may miss that updated information since it’s located before their current position in the page.
We wanted to visually display the shipping and pickup information before the options, but since screen readers read content according to the DOM order, we decided to adjust the DOM order while applying flexbox “order” attributes in CSS. This approach allowed screen readers to read the shipping and pickup information after options selection, but sighted users still saw the available shipping and pickup information above the options (which was a requirement set by our UI design).
However changing the DOM order to address the screen reader issues came with a side effect: the tabbing order for interactive page elements was no longer in sync with the visual order. This could have potentially disrupted the experience of keyboard users because they would see their focus ring jumping between elements in a confusing manner. In order to provide equally understandable experiences to typical users as well as screen reader and keyboard users, we needed to ensure that the order of the information was presented logically and intuitively (see Web AIM checklist states in section 1.3.2).
Accommodating screen reader and keyboard users couldn’t be done perfectly if we still preserved the visual order of showing shipping/pickup information before the options selection (which could be color, size, etc). The solution? We had to stop using the flexbox “order” style, and instead rely directly on the DOM order, which we would set dynamically with React.
Therefore, after a long fruitful discussion with other frontend developers, the accessibility experts, and the UI/UX designers, we collectively agreed to re-design the visual order, so that shipping and pickup information appear below the options selection.
This is the updated design of the section:
The new design has given us a lot of benefits:
- We can rely on just the DOM order to dictate the visual, tabbing and screen reader order.
- Because the visual order is already taken care of by the DOM, we can remove the CSS flexbox order code which reduces potential technical debt.
- The focus ring moves in a logical order that matches the visual order.
- The screen reader users can understand the information easily as relevant information such as shipping and pickup are read after any decisions affecting them are made.
In the beginning, everything seemed great — the UI design was delightful for typical users, all interactive elements were focusable, and meaningful information was readable by all screen reader applications. But we learned this wasn’t enough, and that our earlier assumptions about the design needed to be reevaluated against more rigorous standards. I’m happy to say that we all came out of this journey with a brand new perspective and a stronger commitment to people who rely on assistive technologies.
