As the second web accessibility tool from Liberogic, we have released the Chrome extension "A11y Navigation Auditor." This tool quickly and accurately visualizes the "framework" of a website, allowing for a smooth approach to often overlooked issues. It was developed to support comprehensive structural verification and enable more reliable accessibility assessments.
Background of Development
There are many tools available to assess accessibility.
Tools that only handle specific categories such as headings and landmarks cannot grasp the overall picture.
While the type that overlays markers on the page allows you to see the overall picture, it clutters the screen and hinders getting a bird's-eye view.
We aimed to create a tool that bridges this gap, one that allows you to grasp the overall picture and view it from a bird's-eye perspective without cluttering the screen.
I used the element list function of screen readers, such as VoiceOver's rotor display, as a reference.
By visualizing this on the side panel and adding a problem detection function, we have created a developer tool that is easy to understand and enables advanced structural diagnostics.
Audit targets and issues to detect
▪️Headline
Level skipping, empty headings, missing roles, etc.
▪️Links
Empty text, unclear wording, duplicate links, etc.
▪️Form
Missing labels, autocomplete attribute, error message mapping, etc.
▪️ Landmark
Missing main, inability to distinguish between duplicate roles, and deficiencies in sectioning elements.
▪️Image
Missing alt attribute, inappropriate alt text (e.g., "Image"), use of incorrect filenames, etc.
▪️Table
Missing captions or headers, and deficiencies in scopes/headers in complex structures.
Main Features
▪️WCAG-compliant problem detection
Refer to WCAG success criteria (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.) and display them in three levels: error, warning, and information.
▪️ Displaying calculated accessible names
Based on the ARIA specification, the names that screen readers actually read aloud and their origins are visualized.
▪️Real-time monitoring of ARIA status
It automatically detects state changes such as aria-expanded and aria-invalid, as well as dynamic changes in accessible names such as aria-label, allowing for immediate confirmation of accessibility changes in response to user actions.
▪️Click to highlight
Simply click on an item in the panel to scroll to and highlight the corresponding element. You can also switch between items using the arrow keys on your keyboard.
▪️Advanced features for professionals
- Toggle the inspection of hidden elements
- Automatic exclusion of third-party widgets
- Supports two languages: Japanese and English
Download A11y Navigation Auditor here
At Liberogic, we aim to make accessibility a standard quality but a something that requires special attention.
Following our first product, "Area Contrast Checker," this "A11y Navigation Auditor" is another product that embodies the features we desperately needed in the field. As the name Navigation Auditor suggests, we want to support the creation of websites that allow everyone to reach their destination without getting lost. That's the sentiment behind it.
Making accessibility compliance more accessible and smoother. We're preparing our next tools, so please look forward to them.
