Kennismaking met A11Y

Door mijn collega Marloes ben ik gevraagd om een artikel te schrijven over mijn kennismaking met A11Y. Het artikel gaat niet zozeer gaan over technische aspecten van A11Y, maar over wat mij is opgevallen; wat mij heeft verbaasd; wat ik niet had verwacht en/of wat mij het meest bij is gebleven.

A, 11, Y, verbaasd zat ik naar de term te kijken − een woord bestaande uit cijfers en letters. Hoe kan ik dat uitspreken? Al snel hoorde ik de oplossing van onze accessibility expert Marloes: “A11Y spreek je uit als ‘allie’ en betekent accessibility ofwel toegankelijkheid”. De term viel snel op z’n plaats, omdat ‘A11Y’ veel makkelijker te schrijven is dan accessibility. Niets ten nadele van dat elf letterwoord met dubbel c en dubbel s waarover mijn toetsenbord nog regelmatig struikelt ;). Mijn interesse was in ieder geval gewekt.

Mijn eerste associatie met A11Y was gerelateerd aan een vak dat ik tijdens mijn studie technische informatica heb gevolgd. Het vak heette ‘User interaction design’ met als onderdeel ‘The ten usability heuristics’. Eén van de heuristics, “Heuristic four: Consistency and standards”, associeerde ik met A11Y.  Een voorbeeld hiervan is dat een systeem of website een gebruiker niet mag verwarren door verschillende knoppen of teksten te gebruiken waarmee hetzelfde kan worden bereikt. Enkele basisconcepten en raakvlakken om het gebruik van een website voor de gebruiker (ge)makkelijker maken, waren dus al een beetje aanwezig. Maar het ontdekken ging verder.

A11Y heeft mij met veel nieuwe aspecten kennis laten maken. Wat mij vooral is opgevallen, is dat er veel tools beschikbaar zijn om veelgemaakte toegankelijkheidsfouten in kaart te brengen. Voorbeelden van deze tools zijn de browser plugins: WAVE toolbar, HeadingsMap, Axe DevTools, Accessibility Insights of Chrome Lighthouse DevTools. Stuk voor stuk erg bruikbaar en gecombineerd een uiterst nuttig pakket om digitale toegankelijkheid van een website te toetsen. Ondanks de kracht van deze tools geeft het nooit een volledig beeld van de toegankelijkheid van je website. Handmatig toetsen is ook altijd nodig. Dynamische onderdelen zijn namelijk lastig te testen met automatische tools. Een voorbeeld hiervan is een hoofdmenu op mobiel. Op mobiel is het menu vaak een in- en uitklapper. Een browserplugin toetst niet of dit toegankelijk is, omdat er eerst een klik op de menuknop nodig is om het menu te tonen. Desondanks geven de geautomatiseerde tools goede handvatten om bewustwording te creëren.

Iets wat mij verbaast, is de complexiteit van tekstkleuren. Bijvoorbeeld oranje of blauwe knoppen op een website. Welke tekstkleur is het meest toegankelijk op een knop met een oranje achtergrond? Hiervoor zijn in het verleden verschillende onderzoekjes gedaan. Uit onderzoeken blijkt dat tekst met zwarte letters op een oranje achtergrond beter leesbaar is. De tekstkleur heeft dan een goed contrast ratio ten opzichte van de achtergrond. Toch werd door testpersonen aangegeven dat tekst met witte letters op een oranje achtergrond beter leesbaar is, ondanks het lagere contrast ratio. Dit is iets waar niet direct een universele oplossing voor is. Het stipt volgen van, in dit geval contrast ratio adviezen uit accessibility tools, is misschien niet altijd verstandig. De adviezen en richtlijnen moeten in dat soort situaties helpen sturen bij beslissingen.

Een ander interessant onderdeel dat ik tegenkwam, is de volgorde van elementen. Ik struikel zelf nog wel eens over dit onderdeel. Dan controleer ik een stukje code of HTML en dan vraag ik me af waarom onderdelen in een vreemde volgorde staan. De HTML volgorde wijkt dan af van de visuele volgorde. Voor screenreaders is het gewenst dat de HTML volgorde een duidelijke structuur heeft. Bijvoorbeeld eerst het kopje, daarna de tekst en de afbeelding, zodat duidelijk is dat de tekst en de afbeelding onder die bijhorende kop vallen. Maar visueel ziet iets er soms netter uit in een andere volgorde: eerst de afbeelding, daarna de kop en de tekst. Met behulp van CSS wordt de volgorde van elementen omgegooid, om het visueel aantrekkelijker te maken, terwijl de HTML volgorde voor screenreaders hetzelfde blijft. Het denken aan hoe een screenreader een website interpreteert, is dus ook een belangrijk onderdeel voor de toegankelijkheid van een website.

Tot slot is er ondanks deze kennismaking nog veel meer te ontdekken en leren. Toegankelijkheid zelf en de richtlijnen van A11Y zijn namelijk ook voortdurend in ontwikkeling. Een universele test tool is dan ook nu nog toekomstmuziek.