ARIA, kort voor Accessible Rich Internet Applications, is een set attributen die je aan HTML toevoegt zodat hulptechnologie een webpagina kan begrijpen. Schermlezers, die een site hardop voorlezen voor mensen die hem niet kunnen zien, leunen op duidelijke signalen over wat elk element is en doet. ARIA levert die signalen voor onderdelen die platte HTML niet helemaal zelf kan beschrijven, zoals een maatwerk-dropdown, een tabblad-strip of een live melding.
Zie ARIA als de audiodescriptie bij een film. Het beeld is er al voor ziende kijkers, maar de verteller legt stilletjes uit “een deur gaat open, ze loopt naar binnen” zodat een luisteraar de draad nooit kwijtraakt. ARIA doet hetzelfde voor een webpagina: het fluistert “dit is een menu, het staat nu open, drie van vijf items” tegen een schermlezer terwijl het visuele ontwerp precies hetzelfde blijft. Een veelvoorkomend voorbeeld is het ARIA-label, dat een knop met alleen een icoon een uitgesproken naam geeft. Het bouwt allemaal voort op de structuur van je HTML, wat betekent dat goede markup eerst komt en ARIA de overige gaten vult.
ARIA werkt in grofweg drie delen. Rollen zeggen wat iets is (“deze div is een dialoog”). Eigenschappen beschrijven het (“dit veld is verplicht”). Toestanden melden wat er nu gebeurt (“dit onderdeel staat open”, “dit vinkje is aangezet”). Samen maken ze van een stil maatwerkcomponent iets dat een schermlezer kan aankondigen en een toetsenbordgebruiker kan volgen, wat ARIA een stil maar echt onderdeel maakt van goede UX-design.
Eén regel telt boven alles: gebruik echte HTML-elementen waar het kan, want die hebben toegankelijkheid al ingebouwd. Pak ARIA er alleen bij als een maatwerkcomponent een gat laat, want verkeerde ARIA maakt een pagina juist lastiger in plaats van makkelijker.
Bij TopDevs bouwen we toegankelijkheid vanaf het begin in en zetten we ARIA bewust in, zodat de interfaces die we opleveren werken voor toetsenbord- en schermlezergebruikers, niet alleen voor de muis.
