A11y Navigation Auditor - WCAG Web Accessibility Structure Audit & AI

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 is a developer tool that brings VoiceOver-style Rotor navigation into your side panel for professional-grade structural audits. It instantly surfaces the underlying structure of your page, giving you the same landmark, heading, and link overview that assistive technology users rely on. Stop digging through nested DevTools panels. Inspect headings, landmarks, and accessible names in a single view to identify structural flaws immediately. 🔍 Audit Categories ▪️Headings Level skipping, empty headings, and lost heading roles. ▪️Links Empty link text, ambiguous text (e.g., "click here"), redundant adjacent links, and identical text pointing to different destinations. ▪️Forms Missing labels, missing autocomplete attributes, and error messages not associated via aria-describedby. ▪️Landmarks Missing main landmarks, redundant WAI-ARIA roles lacking distinct accessible names, and sectioning elements not functioning as landmarks. ▪️Images Missing alt attributes, empty alt text on linked images, generic descriptions (e.g., "image", "photo"), and file names used as alt text. ▪️Tables Missing captions or headers, and improper scope/headers in complex tables. Diagnostics reference WCAG 2.1 / 2.2 Success Criteria (including 1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.), but do not fully cover every aspect of each criterion. ⭐ Key Features ▪️Accessible Name (accname) Display Shows the calculated accessible name for each element following the official Accessible Name and Description Computation specification. See exactly what screen readers will announce, and identify which attribute provides it—aria-label, aria-labelledby, alt, label, title, or text content. ▪️Real-time ARIA Monitoring Live tracking of attributes such as aria-expanded, aria-pressed, aria-checked, aria-selected, aria-invalid, aria-busy, and aria-disabled. The panel updates automatically as you interact with the page, eliminating the need for rescanning. It also displays linked error messages when aria-invalid states change. ▪️Click to Highlight Simply click an item in the side panel to scroll to and highlight the corresponding 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 six core Rotor categories into one dedicated side panel. Browse elements the way VoiceOver's Rotor does, while performing efficient accessibility audits. ⚠️ Limitations This tool focuses on structural accessibility issues detectable through static analysis of the DOM. It does not cover color contrast, keyboard operability, dynamic behavior, or screen reader compatibility. It is not a substitute for comprehensive WCAG conformance testing. 🔒 Privacy We do not collect any data. No network requests are ever made. All accessibility checks are performed locally within your browser.