Ga naar de inhoud

Developers kunnen ontzettend veel doen om websites toegankelijker te maken. De regelmatige lezer van Digitaal Toegankelijk.nl is ongetwijfeld bekend met best practices zoals het toepassen van de juiste contrast ratio’s, het ondertitelen van ingesloten video’s en het bouwen van een overzichtelijke website-structuur. Bezoekers van een website zullen snel met het blote oog zien of een website aan deze voorwaarden voldoet.

Naast zichtbare verbeteringen kunnen developers ook (op het eerste gezicht) niet zichtbare verbeteringen doorvoeren. Voorbeelden hiervan zijn alternatieve beschrijvingen van afbeeldingen en hyperlinks. Op deze manier krijgen gebruikers van schermlezers mee wat er in afbeeldingen gebeurt of wat het doel van hyperlinks en knoppen is.

In dezelfde categorie van ogenschijnlijk onzichtbare verbeteringen op het gebied van digitale toegankelijkheid, vallen ook Accessible Rich Internet Applications (ARIA) attributen. In dit artikel lichten we de rol van ARIA-elementen bij het toegankelijk maken van websites toe.

vrouw met rood haar zit achter computer te programmeren

Wat zijn ARIA-elementen?

ARIA-elementen worden gebruikt om onderdelen van websites te beschrijven zodat mensen met een (visuele) beperking een beter beeld krijgen van de content. Goed om te weten is dat je ARIA-elementen niet als functionele code moet zien, maar als code die beschrijvend werkt. Simpel gezegd zorgt ARIA ervoor dat mensen met een visuele beperking een webpagina net zo kunnen gebruiken als mensen zonder beperking.

ARIA wordt in de praktijk vooral gebruikt om:

  • Het doel van interactieve web-elementen te beschrijven
  • De structuur van een pagina duidelijk te maken
  • Elementen te beschrijven die live geüpdatet worden, zoals sportstanden
  • Dynamische elementen zoals pop-up schermen te beschrijven

Developers kunnen ARIA-elementen als stukjes code in de broncode van een website plaatsen. ARIA is daarom niet met het blote oog te zien. De groep bezoekers van een website die baat hebben bij ARIA-elementen bestaat vooral uit mensen die een schermlezer gebruiken.

Waarom ARIA-elementen gebruiken?

Maar, wat is het voordeel van het plaatsen van stukjes ARIA op een website? Het positieve effect van deze elementen zit hem vooral in de verbeterde gebruikerservaring voor mensen die afhankelijk zijn van een schermlezer. Deze groep zal gemakkelijk zijn of haar weg kunnen vinden op de website. Goed om te weten voor developers die een budget moeten verantwoorden: een betere gebruikerservaring betekent ook dat webshops meer omzet kunnen draaien, websites bezoekers beter naar commerciële pagina’s kunnen leiden en bezoekers minder snel een website verlaten. Digitale toegankelijkheid zorgt dus ook voor een boost in omzet.

Jongen in de rug gezien is aan het programmeren op twee schermen

Waarom geen ARIA-elementen gebruiken?

De vuistregel ‘Ieder voordeel heb z’n nadeel’ gaat ook hier op, misschien nog wel meer dan normaal. De verkeerde implementatie van ARIA kent een groot nadeel: verwarring en een slechte gebruikerservaring voor gebruikers van een schermlezer. Dit verkeerde gebruik kan op twee manieren worden veroorzaakt: onvoldoende kennis van ARIA en schermlezers of browsers die niet de juiste ondersteuning bieden. Helaas kennen diverse API’s, schermlezers en browsers verschillende methoden om ARIA te ondersteunen. Er bestaat dus geen ‘golden standard’ voor ARIA gebruik. Het wordt aangeraden om de geïmplementeerde ARIA snippers op verschillende browsers/schermlezers te testen.

Tips voor het gebruik van ARIA-elementen

De eerste reden voor incorrect ARIA gebruik, onvoldoende ARIA kennis, kan uiteraard verholpen worden. De volgende tips helpen je om ARIA aan te bieden voor de bezoekers van jouw website. Bekijk voor het meest up-to-date ARIA handleiding op de website van de W3C.

  • Geen ARIA is beter dan slechte ARIA. Zoals eerder benoemd doet onjuist gebruik van ARIA meer kwaad dan goed. Ben je niet zeker over de toepassing van deze elementen op jouw website? Raadpleeg dan een expert en wacht met het toepassen van ARIA tot je zeker weet of de code de gebruikerservaring verbetert.
  • HTML-attributen hebben de voorkeur boven ARIA. Is het mogelijk om web-elementen te beschrijvingen via HTML elementen? Verkies dan deze methode boven ARIA. Gebruik HTML en ARIA niet beiden om elementen te beschrijven, maar beperk je tot één oplossing.
  • Interactieve ARIA-elementen moeten toegankelijk zijn met een toetsenbord.
    Dit zou voor zich moeten spreken. Zorg ervoor dat gebruikers die geen muis gebruiken ook door de ARIA beschrijvingen kunnen navigeren.
  • Zorg voor custom ARIA code. Stukken ARIA-code die je op de websites van de W3C of andere platformen vindt, zijn niet per definitie compatibel met de technologie die jouw website ondersteunt of de schermlezers van de bezoekers van je website. Ontwikkel altijd eigen code snippets voor de meest efficiënte implementatie van ARIA.
Vincent van Brakel

Vincent van Brakel onderzoekt voor Digitaal Toegankelijk de toegankelijkheid van websites en apps. Daarnaast schrijft Vincent over alles wat met digitale toegankelijkheid te maken heeft en deelt hij praktische tips op DigitaalToegankelijk.nl.