Visual Accessibility Auditing Across Interaction States and Reading Orders

Authors

Md Rahat-uz- Zaman (University of Utah), Jake Wagoner (University of Utah), Tingying He (University of Utah), Alexander Lex (Graz University of Technology), Paul Rosen (University of Utah)

Abstract

Automated accessibility checkers evaluate a single snapshot of a page, but many barriers only emerge over multiple interactions rather than a static snapshot. 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 \emph{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 & focus order lens aligns the visual, screen-reader, and keyboard orders, shows where they diverge, and suppresses intentional patterns such as skip links. We actively evaluate the extension as site owners and as an 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, which shows that the approach runs on an unmodified in-the-wild example.