A11y Navigation Auditor - WCAG Web Accessibility Structure Audit & AI

Description

View page structure at a glance for WCAG audits. Check headings, links, landmarks and more in your side panel. AI guidance included. A11y Navigation Auditor visualizes your page's structural accessibility implementation—headings, landmarks, accessible names, and live ARIA states—all in one Chrome side panel. Inspired by VoiceOver's Rotor (a feature that lists headings, links, forms, and other elements by category) as an information-organizing model, the panel surfaces the information assistive tech relies on, making professional-grade structural audits fast and focused. See what your accessibility implementation actually contains and spot structural issues at a glance. 🔍 What You'll See ▪️Headings Full hierarchy (h1–h6, including role="heading"), with each heading's accessible name and where the name comes from. ▪️Links Accessible name and destination URL for every link, with classification icons (navigation / new window / in-page anchor) and aria-current state. ▪️Form Controls Accessible name and its source, element type/role, autocomplete values, and real-time ARIA state badges (aria-expanded, aria-pressed, aria-invalid, and more). ▪️Landmarks The full landmark structure of the page—each landmark's type, source HTML element (<nav>, <main>, etc.), and accessible name. ▪️Images & Graphics Thumbnail preview, accessible name, and classification (informative / decorative / text image / linked image). ▪️Tables Accessible name, dimensions, header cell (<th>) and <caption> presence, and accessible description. ▪️ARIA Roles WAI-ARIA roles listed in one place—interactive widgets (combobox, tablist, menu, dialog, slider) plus structural/display roles (group, tooltip, figure, meter, feed) and native elements with implicit roles (<fieldset>, <figure>, <meter>, <dialog>). See each role's accessible name, element tag, aria-roledescription, and required attributes/states. 🛡️ Issues Surfaced Automatically While you browse the structure, issues are flagged inline as errors, warnings, or info—so you can prioritize at a glance. Detection includes: ▪️Headings: level skipping, empty headings, lost heading roles ▪️Links: empty link text, ambiguous text, identical text with different destinations ▪️Form Controls: missing accessible names, missing autocomplete on user-info fields, unlinked error messages ▪️Landmarks: missing or duplicate <main>, landmarks without distinguishing names ▪️Images & Graphics: missing alt, generic alt text, filename as alt ▪️Tables: missing captions or headers, improper scope/headers in complex tables ▪️ARIA Roles: missing required attributes/children/parent, broken ID references (aria-controls, etc.), invalid aria-haspopup values, missing accessible names ▪️Target Size: interactive elements under 24×24px with insufficient spacing from adjacent targets (SC 2.5.8) Each finding references WCAG Success Criteria (1.1.1, 1.3.1, 2.4.4, 2.5.8, 3.3.1, 4.1.2, and others) for reference, though the tool does not fully cover every aspect of each criterion. ✨ NEW in v1.3.0: ARIA Roles Tab & Target Size Check A seventh category—the "ARIA Roles" tab—lists WAI-ARIA widget and structural roles in one place, showing accessible names, required attributes/states, broken ID references (aria-controls, etc.), and invalid aria-haspopup values. It also adds a WCAG 2.5.8 Target Size (Minimum) check that flags interactive elements smaller than 24×24px with insufficient spacing from adjacent targets. ✨ NEW in v1.2.0: AI Guidance (Labs) Powered by Chrome's built-in AI (Gemini Nano), each issue now includes an optional "AI Guidance" button that generates context-aware hints right in the panel. No data leaves your browser—no API key required, no token costs. Everything runs locally on-device. *Note: This feature requires a supported Chrome version with the Prompt API and Gemini Nano enabled. Availability may vary depending on your device specifications. If the model is not yet installed, a model download (approximately 4 GB) is required. ⭐ Key Features ▪️Accessible Name Display Shows each element's computed accessible name following the W3C specification, along with its source—whether it comes from aria-label, aria-labelledby, alt, <label>, title, or text content. ▪️Real-time ARIA Monitoring Live tracking of attributes including aria-expanded, aria-pressed, aria-checked, aria-selected, aria-invalid, aria-busy, and aria-disabled. The panel updates automatically via MutationObserver as you interact with the page—no manual rescans needed. When aria-invalid toggles, the linked error message (via aria-describedby) is surfaced alongside it. ▪️Click to Highlight Click any item in the side panel to scroll to and highlight the matching element on the page. 📊 Comparison with Other Tools Tools that focus on specific categories like headings or landmarks can't show the full picture, while marker-overlay tools clutter the page and obscure the very structure you're trying to inspect. Even the DevTools Accessibility Tree can be overwhelming, providing too much noise for a quick, high-level audit. A11y Navigation Auditor bridges this gap by unifying seven core categories into one dedicated side panel—giving you a focused view of the structural information that matters, without the noise. ⚠️ Limitations This tool focuses on structural accessibility detectable through static DOM analysis. It does not cover color contrast, keyboard operability, dynamic behavior, or actual screen reader compatibility. It is not a substitute for comprehensive WCAG conformance testing. 💻 Supported Browsers This extension requires the Chrome Side Panel API. It works on Google Chrome 114+ and Microsoft Edge 114+. Other Chromium-based browsers (Arc, Brave, Vivaldi, etc.) are not supported due to the lack of Side Panel API implementation. *Note: "AI Guidance" is exclusive to Google Chrome (requires built-in AI / Gemini Nano environment). 🔒 Privacy We do not collect any data. No network requests are ever made. All accessibility checks are performed locally within your browser.

Details & SEO