Als tweede tool in onze reeks webtoegankelijkheidstools hebben we de Chrome-extensie "A11y Navigation Auditor" uitgebracht. Het maakt het "skelet" van een website snel en nauwkeurig zichtbaar, zodat u over problemen die gemakkelijk over het hoofd worden gezien snel aan de slag kunt. Ontwikkeld om een uitgebreide structuurcontrole te ondersteunen en een betrouwbaardere toegankelijkheidsdiagnose mogelijk te maken.
Achtergrond van de ontwikkeling
Er zijn veel tools om toegankelijkheid te diagnosticeren.
Tools die alleen specifieke categorieën zoals koppen of landmarks behandelen, geven echter geen compleet beeld.
Tools die markers over de pagina leggen tonen wel het totaalbeeld, maar maken het scherm rommelig en belemmeren het overzicht.
Wij hebben een tool ontwikkeld om deze kloof te dichten: een tool die het volledige beeld laat zien, zonder het scherm te vervuilen, zodat u het overzicht behoudt.
Als inspiratie dienden de elementenlijsten van screenreaders, zoals de rotor-weergave van VoiceOver.
Door deze in een zijpaneel te visualiseren en daar probleemdetectie aan toe te voegen, is een ontwikkelaarstool ontstaan die een overzichtelijke en geavanceerde structuurdiagnose mogelijk maakt.
Gecontroleerde onderdelen en gedetecteerde problemen
▪️Koppen:
overgeslagen niveaus, lege koppen, verloren rollen, enz.
▪️Links:
lege tekst, onduidelijke formuleringen, dubbele links, enz.
▪️Formulierelementen:
ontbrekende labels, autocomplete-attributen, koppeling van foutmeldingen, enz.
▪️Landmarks:
ontbrekende main, onderscheid tussen dubbele rollen, onjuist gebruik van sectioneringselementen, enz.
▪️Afbeeldingen:
ontbrekend alt-attribuut, ongeschikte alt-tekst (zoals "afbeelding") of het gebruik van bestandsnamen
▪️Tabellen:
ontbrekende caption of kopcellen, en onjuist gebruik van scope/headers bij complexe structuren
Belangrijkste functies
▪️Detectie van WCAG-niet-conformiteit:
Verwijst naar de WCAG-succescriteria (zoals 1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2) en toont resultaten in drie niveaus: fout, waarschuwing en informatie.
▪️Weergave van de berekende toegankelijke naam:
Visualiseert, op basis van de ARIA-specificatie, de naam die een schermlezer daadwerkelijk voorleest en de bron waaruit deze is afgeleid.
▪️Realtime bewaking van ARIA-statussen:
Detecteert automatisch statuswijzigingen zoals aria-expanded en aria-invalid, evenals dynamische wijzigingen in de toegankelijke naam door bijvoorbeeld aria-label, zodat u direct ziet hoe de toegankelijkheid verandert bij interactie.
▪️Klik om te markeren:
Klik op een item in het paneel om naar het bijbehorende element te scrollen en het te markeren. Met de pijltjestoetsen op het toetsenbord kunt u ook tussen items wisselen.
▪️Geavanceerde functies voor professionals:
• Schakelen tussen inspectie van verborgen elementen
• Automatisch uitsluiten van widgets van derden
• Ondersteuning voor Japans en Engels
Download A11y Navigation Auditor hier
Bij Liberogic streven we ernaar toegankelijkheid niet als 'speciale aandacht' te behandelen, maar als een vanzelfsprekende kwaliteitseis.
Following the first release, "Area Contrast Checker," this new "A11y Navigation Auditor" is also a tool built around features we badly needed in our own day-to-day work. As the name Navigation Auditor suggests, we wanted to support building websites where everyone can reach their destination without getting lost. That is the spirit behind it.
Making accessibility more approachable and more seamless. We are preparing more tools, so stay tuned.
