Code usability WAI-ARIA

  • Development
  • Cas Bukkems
  • 29-05-2021
  • Lab

Aanleiding
Uit een recent onderzoek naar digitale bekwaamheid onder ouderen kwam als resultaat dat “WAI-ARIA een tool is die ondersteuning binnen een website beter maakt voor ouderen en mensen met een beperking.”  (Bukkems, 2021). Om de proef op de som te nemen heb ik besloten WAI-ARIA toe te passen binnen een POC en daarmee te kijken wat de werking voor voordelen biedt. WAI-ARIA is een set aan code attributen die het mogelijk maakt om knoppen of invoervelden te verduidelijken. WAI-ARIA zorgt ervoor dat de rol van een element wordt aangepast. Zo kun je bijvoorbeeld van een div-elementen een knop maken. Dit attribuut geeft alleen informatie, geen functionaliteit. Die moet worden toegevoegd met JavaScript.

Aanpak
Ik heb een basis code prototype opgesteld, dit houdt in een; basis html5 opzet, javascript bestand en CSS/SASS code. Hier binnen heb ik basis opzet gemaakt van een mogelijke “rijksoverheid website”, deze website bevat een knop, banner, logo en een tekstvlak. Ik ben toen gaan kijken naar de handleiding met web eisen op het gebied van WAI-ARIA van (W3, 2021). Hier staan allemaal tips & tricks over het toepassen van deze attributen. Zo heb ik bijvoorbeeld van een li-element een knop gemaakt. Normaal gesproken is een “li-element” een lijst binnen de codeertaal HTM5. Met WAI-ARIA wordt nu de knop geïndexeerd als een knop. Als een persoon met een visuele beperking op een screen-reader kijkt is het ook voor hem duidelijk dat dit element een knop is en geen lijst.

Resultaten
Door het toepassen van WAI-ARIA heb ik nu een code prototype ontwikkeld wat 100% aan de eisen van W3 school voldoet. Dit kun je zien in de onderstaande scorelijst. Dit een screenshot van een test methode van Google om te kijken of een website gebruiksvriendelijk is. Je ziet bij de score dat ik op alles 100% usability heb gescoord, dit is een knappe prestatie. Als je de lijst ziet, kun je zien dat ik alle WAI-ARIA audits heb voltooid. De onderstaande code is hier een goed voorbeeld van, dit is een a tag, oftwel een linkje. Met WAI-ARIA heb ik deze code omgezet naar een knop, ook heb ik met WAI-ARIA aangegeven wat de staat van de knop is en de plek. Dit doe ik met het aria-pressed variable.

<a tabindex="0" role="button" id="toggle" aria-pressed="false">Button</a>

 

Mocht je de code willen inzien, is dat mogelijk via GIT.
https://github.com/Casie150/CMR-prototype.git

Bronn
en
Bukkems, C. (2021). Hoe bekwaam is de doelgroep ouderen op digitaal gebied.
Geraadpleegd op 29 mei 2021,
https://docs.google.com/document/d/16Rg5R5upac8j32_WjZGJizdPZIvAgf3dK0vK7gR4BxM/edit?usp=sharing

W3. (2021) Accessible Rich Internet Applications.
Geraadpleegd op 15 mei 2021,
https://www.w3.org/TR/wai-aria-1.2/

Bekijk bijlage