Media
6 items
Description
DevTools accessibility auditing for touch targets, keyboard flow, charts, and AI-assisted color and data-visualization analysis. Site Accessibility Auditor adds a suite of accessibility auditing panels to Chrome DevTools, helping developers and designers find and fix real-world usability problems before they ship. WHAT IT CHECKS • Touch targets — Finds interactive elements that are too small or too close together to tap reliably, and overlays a visual map of every touch target on the page so you can see problem areas at a glance. • Keyboard flow and reading order — Traces the sequence in which keyboard and screen-reader users move through your page, exposing focus traps, illogical tab order, and content that reads in the wrong sequence. • Interactive states — Audits hover, focus, and active states so keyboard users always know where they are on the page. • Color and contrast — Reviews your page's color usage for contrast failures and combinations that are hard to distinguish for users with low vision or color-vision deficiencies. • Charts and data visualizations — AI-assisted analysis of charts and graphs flags color palettes and encodings that are unreadable for colorblind users, and suggests accessible alternatives. HOW IT WORKS Open Chrome DevTools on any page and switch to the auditor panels. Results are computed from the live DOM, so you can fix an issue, re-run the audit, and confirm it instantly — no build step, no CI wait. The AI-assisted color and chart analysis uses the OpenAI API with your own API key, configured in the panel settings. Page data is only sent for analysis when you explicitly run an AI audit; nothing is collected, stored, or shared otherwise. WHO IT'S FOR Front-end developers, designers, and accessibility specialists who want fast, visual, in-context feedback on WCAG-related issues — especially the ones automated linters miss, like tap target sizing, focus order, and data-visualization readability.