Terug naar Artikelen

WAI-ARIA en toegankelijkheid

WAI-ARIA (voluit Web Accessibility Initiative - Accessible Rich Internet Applications) is een technische specificatie die beschrijft hoe de gebruiker de toegankelijkheid van dynamische webpagina's kan verbeteren. Met dynamiek worden hier combinaties van Ajax, HTML, JavaScript en andere gerelateerde technieken bedoeld. Lees hier wat WAI-ARIA is en hoe Stichting Accessibility hiermee omgaat tijdens een toetsing.

Wat is WAI-ARIA?

Er komen steeds meer dynamische web applicaties. Dergelijke applicaties wijken qua functionaliteit steeds verder af van wat er met HTML voorheen mogelijk was. Dit zorgt er bijvoorbeeld voor dat bepaalde HTML-elementen (met name DIV en SPAN) steeds vaker gebruikt worden om zelf geprogrammeerde knoppen of invoerelementen te plaatsen. 

Dit veroorzaakt toegankelijkheidsproblemen doordat hulpsoftware (zoals bijvoorbeeld een screenreader die de website probeert op te lezen) niet weet dat een zelf geprogrammeerde knop ook echt een knop is. Als een screenreader niet weet óf iets een knop is, zal deze dat ook niet melden aan de gebruiker en die weet vervolgens niet dat je met dat element kan interacteren.

WAI-ARIA (of ARIA) is een set aan extra attributen die dergelijke ontbrekende informatie kan melden aan hulpsoftware zoals screenreaders. Met een WAI-ARIA attribuut kan de rol van een element worden aangepast. Zo kan dan bijvoorbeeld een DIV element de rol "knop" krijgen, door het attribuut role="button" toe te voegen. Let wel:dit geeft alleen informatie, maar het geeft geen functionaliteit, die zal toegevoegd moeten worden met javascript.

Een introductie van WAI-ARIA is hier te vinden: https://www.w3.org/WAI/intro/aria
WAI-ARIA is ontwikkeld door het W3C en de volledige specificatie is hier te lezen:
 https://www.w3.org/TR/wai-aria/
De nieuwste versie van de specificaties is hier te lezen. Deze versie is nog in ontwikkeling: https://www.w3.org/TR/wai-aria-1.1/

Ondersteuning en goedkeuring

Een nieuwe standaard is één ding; hulpsoftware en browsers moeten wel weten wat deze extra attributen betekenen en hoe ze hiermee dienen om te gaan. Helaas gaat dat niet zo snel. Software moet worden aangepast, en als dat gebeurt is, moeten de software nog bij de gebruikers aankomen. In het geval van hulpsoftware zijn updates daarnaast soms erg kostbaar, waardoor gebruikers die minder snel zullen updaten dan bijvoorbeeld een browser.

Als een nieuwe standaard nog niet ondersteund wordt door breed beschikbare hulpsoftware en browsers dan heeft een gebruiker er in de praktijk vaak geen baat bij; het zal dan ook niet goedgekeurd worden tijdens een inspectie.

Op basis van een kleinschalig onderzoek verwachten we dat 95% van de screenreader gebruikers een screenreader gebruikt die ten minste een gedeelte van WAI-ARIA ondersteund. Specifiek: Alle rollen en informatie die ook een HTML equivalent hebben worden ondersteund. Dit zijn: ARIA labels en de volgende 4 rollen:

  • Button
  • Checkbox
  • Label
  • Link

Naast deze rollen kan er ook informatie over relaties worden weergegeven door ARIA. Er kan bijvoorbeeld een role="group" attribuut samen met een aria-labelledby attribuut gebruikt worden als equivalent voor een fieldset en legend element. Deze geeft dezelfde informatie ondanks dat de rol "group" geen direct HTML equivalent heeft.

De rest van de ARIA-attributen keuren we alleen goed als er niet op geleund wordt. Dat betekent dat dit wel gebruikt mag worden om de toegankelijkheid van de website te verbeteren maar de website moet ook nog goed toegankelijk zijn wanneer het wegvalt. Bijvoorbeeld: het aria-selected attribuut zou kunnen worden gebruikt om aan te geven dat een bepaalde tabblad geselecteerd is. Echter aangezien dit niet aangegeven kan worden in HTML en er dus geen HTML equivalent is mag hier niet op geleund worden. Dit betekent dat, hoewel aria-selected mag worden gebruikt in dit geval om de toegankelijkheid van de website te verbeteren, er ook gebruik moet zijn gemaakt van bijvoorbeeld een header of onzichtbare tekst om duidelijk te maken welk tabblad geselecteerd is.

Tags:
Categorie:
Kennisbank
  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn