Visualiseer en debug de toegankelijkheid van de website met Tota11y

Hulptechnologieën zijn de nieuwe norm voor webdesign. Toen responsive design eenmaal mainstream werd, was het voor ontwerpers snel duidelijk dat het ondersteunen van meer gebruikers een noodzaak is.

Maar er is veel werk te doen voor webtoegankelijkheid. Dit is een enorm onderwerp en niet iets dat je kunt oppikken zonder handige hulpmiddelen.

Tota11y is a gratis toolkit voor het visualiseren van de toegankelijkheidsproblemen van uw website. Dit werkt in de browser, dus u kunt de toolkit gewoon laden, klik rond uw site (of een andere site!) Om aanbevelingen voor toegankelijkheid te vinden.

Dit werkt als een JavaScript-bibliotheek die op elke pagina kan worden aangesloten. Je zou ook kunnen voer het handmatig uit op live sites via Chrome DevTools, maar dat is niet altijd nuttig tenzij u op de site van iemand anders werkt.

Tota11y voegt een kleine werkbalk toe aan je pagina en loopt dynamisch over de hele DOM. Wanneer jij klik op een element waar je een kleine uitbreidingsbox krijgt met details over toegankelijkheidsproblemen.

Een ding dat ik echt leuk vind aan Tota11y is het duidelijke taal gebruikt met elke highlight-box. Het grootste deel van de WAI-ARIA-documentatie voelt als het lezen van belastingcodes. Geweldig om jezelf in slaap te laten vallen, niet zo geweldig voor het debuggen van een website.

Met deze bibliotheek vindt u problemen en oplossingen geschreven in gewoon Engels. Zoveel gemakkelijker om te consumeren en de oplossingen zijn snel.

Als u de hoofdpagina bezoekt, vindt u een demo van Tota11y op de site. Het is het kleine zwarte tabblad in de linkerbenedenhoek van het scherm. Klik hier gewoon op voor een uitgevouwen weergave die alle hoofdpagina-elementen beslaat.

Het geheel wordt geopend onder de MIT-licentie, dus het is heel gemakkelijk om mee te werken.

Je kunt een kopie op GitHub nemen en deze voor vrijwel alles gebruiken. Tota11y wordt ook geleverd met een aantal plug-ins die u kunt uitbreiden naar het hoofdscript. Deze functionaliteit toevoegen voor het controleren van meer gedetailleerde toegankelijkheidsproblemen.

Als je goed bent in toegankelijkheidstesten, wil je absoluut een kopie van dit script in je toolbox.