Als tweede web accessibility-tool van Liberogic hebben we de Chrome-extensie "A11y Navigation Auditor" uitgebracht. De "structuur" van een website snel en nauwkeurig zichtbaar maken en soepel problemen aanpakken die gemakkelijk over het hoofd worden gezien. Dit is een tool die we hebben ontwikkeld om uitgebreide structuurcontrole te ondersteunen en zo meer betrouwbare accessibility-diagnose mogelijk te maken.
Achtergrond van de ontwikkeling
Er zijn veel tools beschikbaar voor het diagnosticeren van accessibility.
Tools die alleen bepaalde categorieën zoals koppelingen en oriëntatiepunten behandelen geven geen volledig beeld.
Tools die markers op de pagina plaatsen geven wel een volledig overzicht, maar maken het scherm rommelig en belemmeren het vogelvluchtperspectief.
We richtten ons op het overbruggen van deze kloof en het creëren van een tool die "een volledig overzicht kan geven en een vogelvluchtperspectief biedt zonder het scherm rommelig te maken".
We lieten ons inspireren door functies voor elementenlijsten van schermlezers, zoals de rotorweergave van VoiceOver.
Dit hebben we in een zijpaneel gevisualiseerd en door het toevoegen van probleem detectiefunctionaliteit hebben we een duidelijke en geavanceerde structuurcontrole-tool voor ontwikkelaars gerealiseerd.
Controlepunten en gedetecteerde problemen
▪️Koppelingen
niveausprongen, lege koppelingen, rolverlies, enzovoort
▪️Koppelingen
lege tekst, onduidelijke uitdrukkingen, gedupliceerde koppelingen, enzovoort
▪️Formulierbesturingselementen
ontbrekende labels, autocomplete-kenmerk, foutbericht-koppeling, enzovoort
▪️Oriëntatiepunten
ontbrekende main, onderscheid van gedupliceerde rollen, tekortkomingen in sectie-elementen, enzovoort
▪️ Afbeeldingen
ontbrekende alt-attributen, onjuiste alt-tekst (bijvoorbeeld "afbeelding"), gebruik van bestandsnamen, enzovoort
▪️ Tabellen
ontbrekende bijschriften of kopteksten, onvoldoende scope/headers in complexe structuren, enzovoort
Hoofdfuncties
▪️ WCAG-compatibiliteitsproblemen detecteren
op basis van WCAG-succescriteria (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, enzovoort), weergegeven in drie categorieën: fout/waarschuwing/informatie.
▪️ Weergave van berekende toegankelijke naam
gebaseerd op de ARIA-specificatie, visualiseert de naam die een schermlezer daadwerkelijk uitspreekt en de bron ervan.
▪️ Realtimebewaking van ARIA-statussen
detecteert automatisch statuswijzigingen zoals aria-expanded en aria-invalid, evenals dynamische wijzigingen van toegankelijke namen via aria-label, waardoor u onmiddellijk toegankelijkheidsveranderingen kunt verifiëren op basis van gebruikersinteractie.
▪️ Markering bij klikken
klik gewoon op een item in het paneel om naar het corresponderende element te scrollen en het te markeren. U kunt ook omhoog en omlaag pijltoetsen gebruiken om tussen items te schakelen.
▪️ Geavanceerde functies voor professionals
・inspectie van verborgen elementen in-/uitschakelen
・automatische uitsluiting van widgets van derden
・ondersteuning voor Nederlands en Engels
Download A11y Navigation Auditor hier
Bij Liberogic beschouwen we toegankelijkheid niet als een "speciale maatregel", maar als "standaardkwaliteit".
Na de eerste "Area Contrast Checker" hebben we nu de "A11y Navigation Auditor" gelanceerd — opnieuw een functie die we in onze dagelijkse praktijk echt nodig hadden. Zoals de naam aangeeft, willen we websites helpen creëren waar niemand verdwaalt en iedereen gemakkelijk zijn bestemming bereikt. Die ambitie zit erin verweven.
We maken accessibility-compliance meer toegankelijk en soepeler dan ooit. Er zijn nog meer tools in voorbereiding, dus kijk ernaar uit.
