Als tweede tool voor webtoegankelijkheid van Liberogic hebben we de Chrome-extensie "A11y Navigation Auditor" uitgebracht. Deze tool visualiseert snel en nauwkeurig de "structuur" van een website, waardoor vaak over het hoofd geziene problemen gemakkelijker kunnen worden opgespoord. De extensie is ontwikkeld ter ondersteuning van een uitgebreide structurele verificatie en voor betrouwbaardere toegankelijkheidsbeoordelingen.
Achtergrond van de ontwikkeling
Er zijn veel instrumenten beschikbaar om de toegankelijkheid te beoordelen.
Hulpmiddelen die zich alleen richten op specifieke categorieën zoals titels en oriëntatiepunten, kunnen het totaalbeeld niet weergeven.
Hoewel het type dat markeringen over de pagina heen plaatst je een overzicht van het geheel geeft, maakt het het scherm onoverzichtelijk en belemmert het het verkrijgen van een vogelperspectief.
Ons doel was om een tool te creëren die deze kloof overbrugt, een tool waarmee je het totaalbeeld kunt overzien en vanuit vogelperspectief kunt bekijken zonder het scherm te overladen met informatie.
Ik heb de elementenlijstfunctie van schermlezers, zoals de rotorweergave van VoiceOver, als referentie gebruikt.
Door dit in het zijpaneel te visualiseren en een functie voor probleemdetectie toe te voegen, hebben we een ontwikkelaarstool gecreëerd die gemakkelijk te begrijpen is en geavanceerde structurele diagnostiek mogelijk maakt.
Auditdoelstellingen en te detecteren problemen
▪️Kop
Niveaus overslaan, lege kopjes, ontbrekende rollen, enz.
▪️Links
Lege tekst, onduidelijke formulering, dubbele links, enz.
▪️Formulier
Ontbrekende labels, autocomplete-attribuut, foutmeldingmapping, enz.
▪️ Oriëntatiepunt
Ontbrekende hoofdinhoud, onvermogen om onderscheid te maken tussen dubbele rollen en tekortkomingen in de indeling van elementen.
▪️Afbeelding
Ontbrekend alt-attribuut, ongepaste alt-tekst (bijv. "Afbeelding"), gebruik van onjuiste bestandsnamen, enz.
▪️Tafel
Ontbrekende bijschriften of kopteksten, en tekortkomingen in de scopes/kopteksten in complexe structuren.
Belangrijkste kenmerken
▪️WCAG-conforme probleemdetectie
Raadpleeg de WCAG-succescriteria (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, enz.) en toon deze op drie niveaus: fout, waarschuwing en informatie.
▪️ Weergave van berekende toegankelijke namen
Op basis van de ARIA-specificatie worden de namen die schermlezers daadwerkelijk hardop voorlezen en hun afleidingen gevisualiseerd.
▪️Realtime monitoring van de ARIA-status
Het detecteert automatisch statuswijzigingen zoals aria-expanded en aria-invalid, evenals dynamische wijzigingen in toegankelijke namen zoals aria-label, waardoor onmiddellijke bevestiging van toegankelijkheidswijzigingen mogelijk is als reactie op gebruikersacties.
▪️Klik om te markeren
Klik eenvoudig op een item in het paneel om naar het bijbehorende element te scrollen en het te selecteren. U kunt ook tussen items schakelen met behulp van de pijltjestoetsen op uw toetsenbord.
▪️Geavanceerde functies voor professionals
- Schakel de inspectie van verborgen elementen in of uit
- Automatische uitsluiting van widgets van derden
- Ondersteunt twee talen: Japans en Engels
Download A11y Navigation Auditor hier
Bij Liberogic streven we ernaar om toegankelijkheid tot een standaardkwaliteit te maken, maar een iets dat speciale aandacht vereist.
Na ons eerste product, "Area Contrast Checker", is "A11y Navigation Auditor" wederom een product dat de functies belichaamt die we in de praktijk hard nodig hadden. Zoals de naam Navigation Auditor al suggereert, willen we de ontwikkeling van websites ondersteunen die ervoor zorgen dat iedereen zijn of haar bestemming kan bereiken zonder te verdwalen. Dat is de gedachte erachter.
Toegankelijkheidsconformiteit toegankelijker en soepeler maken. We werken aan onze volgende tools, dus houd ze in de gaten.
