Goal
Ensure that the DOM (Document Object Model) reflects the reading order that UX designed, so that the visual display of the content matches the structure of the content.
Why this matters
The DOM represents the actual contents of the page and the order that the browser and assistive technology (AT) process it in. When the DOM doesn’t match the visual order (usually rendered in CSS) then what someone using AT experiences may be very different from what someone who can see the page experiences.
Examples:
If you use CSS float: rules to float a list of links to the right, they will float the first link to the rightmost edge, and each item after that, until the last item is the leftmost item. But in the US we read from left to right. So for someone who is looking at the, the first (leftmost) link read is the last link in the list, and for someone who’s listening to the page, the first link read is the first link in the list.
Similarly, if you use Javascript to make a menu or dialog appear, but you put the content for that menu or dialog at the bottom of the page, some assistive technology can have difficulty accurately representing that the content at the bottom of the page is related to the menu or dialog’s trigger. The content you’re hiding should always be in the DOM directly after its trigger.
How to implement
Work with the UX Designer to determine what the reading order is, to ensure you’re in agreement.
Follow the recommendations in Making the DOM Order Match the Visual Order by the W3C for technical implementation.
How to test
- View the page and determine what order it would be read (top to bottom and left to right for English-speaking pages.)
- Inspect the DOM in the browser’s code inspection tool. Google has provided a tutorial to Get Started With Viewing And Changing The DOM for Chrome, and other browsers have similar steps and features.
- Ensure that the order of the content in the source code sections match the visual presentation of the content in the Web page.
If any element is not in the same order as the visual order, or if any element is not in the same order as the UX Designer has specified, raise an issue.