Visual Accessibility Auditing Across Interaction States and Reading Orders

Automated accessibility checkers evaluate a single snapshot of a page, but many barriers emerge only over multiple interactions, not in a single static state. Several WCAG 2.2 criteria depend on geometry, focus state, or interaction history, such as a button that becomes obscured once a sticky header appears. Others arise when the visual layout, the screen-reader order, and the keyboard (Tab) order of a page disagree, so different users encounter the same content in conflicting sequences. Auditing these requires reasoning about geometry and structure alongside the live page, which makes it both a detection and a visualization problem. We present Site Accessibility Auditor, a Chrome DevTools extension with two coordinated lenses. The interaction lens automatically drives the page through its reachable states and overlays interaction-dependent issues as inspectable visual evidence on a full-page capture. The reading and focus order lens aligns the visual, screen-reader, and keyboard orders, shows where they diverge, and suppresses intentional patterns such as skip links. We evaluate the extension from two vantage points: as site owners and as an external auditor. In a design partnership with the Utah Wastewater Surveillance System dashboard, our tool motivated the team to ship accessibility fixes. We used the tool on the Our World in Data site, showing that the approach runs on an unmodified, in-the-wild site.

The interaction lens drives the Utah Wastewater Surveillance System dashboard through its reachable states (the Sort menu, an info popover, and a map marker) and audits each one, building a graph of four page states that are each audited and captured.