I want a source order viewer for rearranged content

Submitted by Adrian Roselli

Judges’ Pick

Since a screen reader, for example, presents the page to a user based on source order, a layout that visually shuffles the order can fail a WCAG review under 1.3.2: Meaningful Sequence and potentially 1.3.1: Info and Relationships. Flex, grid, floats, and absolute positioning can all do this (along with some table trickery). Interactive controls can be easily tested by tabbing, and tools like Microsoft’s Accessibility Insights already show tab order, but non-interactive content is harder to test easily, and harder to present to stakeholders in a meaningful way.

I filed a feature request with Firefox and another with Accessibility Insights. I also created a bookmarklet that will show you the source order (and another bookmarklet to go along with it that animates the sequence in case you want to visualize it hands-free).

Tagged
DevTools Accessibility CSS
This was presented at