Accessibility Inspector

DevTools extension to inspect accessibility features with non-interfering overlays.

Accessibility Inspector Accessibility Inspector is a targeted, interactive DevTools extension designed for web developers, QA testers, and accessibility auditors. Unlike automated scanning tools that run background scripts and generate overwhelming pass/fail reports, Accessibility Inspector is a hands-on visual inspection tool. It puts you in total control, allowing you to toggle targeted visual overlays on and off to inspect, spot, and evaluate the most common web accessibility violations directly within your live page layout. Built for maximum speed, security, and privacy with pure JavaScript and zero external dependencies, all checks run locally inside your Chrome DevTools panel without transmitting data or impacting page performance. MAIN CAPABILITIES: • Interactive Visual Overlays: Toggle individual checks on demand to render non-obtrusive highlight boxes, badge counts, and category subtotals over offending DOM nodes. • Deep iFrame Inspection: Full support for evaluating DOM elements across nested frames and cross-origin iFrames. • Precision Element Locator: Automatically generates unique CSS selectors for every flagged element. Clicking the crosshair button automatically scrolls the page and triggers a 3-second yellow highlight pulse over the exact element. • One-Click Reporting: Copy structured reports (complete with check titles, descriptions, legend subtypes, and CSS selectors) directly to your clipboard for Jira tickets, bug reports, or emails. • WCAG Reference Modals: Integrated guidance panels explain the rationale behind every check, complete with direct links to WCAG guidelines. SUPPORTED INSPECTION TOGGLES: Headings & Document Structure • Heading Hierarchy: Identifies valid headings and flags skipped hierarchy levels. • Fake Headings: Highlights non-semantic elements styled visually to look like headings. • Landmarks & Regions: Visualizes HTML5 structural landmarks. Images & Media • Image Alt Text: Evaluates image tags for missing, empty, or redundant alt attributes. • Auto-playing Media: Flags audio and video tags configured to play automatically. • Media Captions: Checks video elements for missing track caption tags. Forms & Controls • Form Field Labels: Highlights inputs, textareas, and select elements missing explicit label tags or ARIA labels. • Fieldsets & Legends: Identifies grouped form controls missing proper fieldset and legend wrapping. • Form Submissions: Flags form elements lacking explicit submit controls. Keyboard & Interactive Elements • Focusable Elements: Highlights all focusable elements to verify keyboard tab flow. • Focus Indicators: Spots interactive elements where visual focus rings have been suppressed (outline: none). • Target Size: Identifies small buttons or links that fall below standard touch target dimensions. Links & Text Semantics • Generic Link Text: Flags non-descriptive link labels such as "click here" or "read more". • New Window Links: Spotlights links opening in new tabs without accessible warnings. • Link vs. Button Semantics: Highlights semantic misuses, such as anchor tags functioning as script buttons. ARIA & DOM Integrity • ARIA Roles & States: Visualizes custom role, aria-expanded, and aria-hidden usage. • Positive Tabindex: Flags elements with tabindex values greater than 0 that disrupt natural tab navigation. • Duplicate IDs: Detects non-unique ID attributes that break screen reader relationship mapping.