Wat is ARIA en waar gebruik je het voor?
ARIA is een set extra kenmerken die je aan je HTML kunt meegeven. Ze vertellen hulpsoftware wat een element is, wat het doet en in welke toestand het staat.
Je gebruikt het voor dingen die gewone HTML niet kan uitdrukken. Een zelfgebouwd uitklapmenu bijvoorbeeld, of een venster dat over je pagina heen verschijnt.
Belangrijk om meteen te weten: het is een aanvulling. Waar gewone HTML volstaat, is ARIA overbodig en vaak zelfs schadelijk.
Wat het toevoegt
Een schermlezer leest je code en probeert daaruit af te leiden wat iets is. Bij een echte knop lukt dat vanzelf; bij een blok dat eruitziet als een knop niet.
Met ARIA vertel je dan expliciet: dit is een knop, hij is nu ingeklapt, en hij hoort bij dat menu daaronder.
Drie soorten kenmerken
Een rol zegt wat iets is: een knop, een dialoogvenster, een navigatie. Daarnaast zegt een eigenschap iets vasts, zoals een label. Een status zegt iets wat verandert, zoals ingeklapt of uitgeklapt.
Die laatste categorie is de nuttigste, want juist veranderingen ziet een schermlezer niet vanzelf. Meer daarover lees je bij screenreader.
Waar je het nodig hebt
Bij onderdelen die je zelf bouwt en waarvoor geen standaard HTML-element bestaat. Tabbladen, een zoeksuggestielijst, een uitklapmenu met meerdere niveaus.
En bij statussen: een knop die iets open- of dichtklapt, een melding die verschijnt, een veld met een foutmelding eronder.
Mijn vuistregels
- Gebruik eerst het juiste HTML-element; dan heb je ARIA meestal niet nodig.
- Voeg alleen toe wat je ook echt bijwerkt als de situatie verandert.
- Verzin geen rollen; gebruik alleen wat in de specificatie staat.
- Test met een schermlezer, niet alleen met een scanhulpmiddel.
Die tweede is waar het het vaakst misgaat. Een kenmerk dat zegt ingeklapt terwijl het menu openstaat, is erger dan helemaal geen kenmerk.
De eerste regel van ARIA
Die luidt: gebruik geen ARIA als het met gewone HTML kan. Dat staat letterlijk zo in de richtlijnen, en het is niet voor niets regel één.
Een knopelement is toegankelijk zodra je het gebruikt. Een blok met een knoprol erop moet je zelf bedienbaar maken, focusbaar maken en van toetsenbordgedrag voorzien. Meer daarover lees je bij html.
Wat het niet doet
ARIA verandert niets aan hoe je pagina eruitziet of werkt. Het verandert alleen wat hulpsoftware erover te horen krijgt.
Een blok met een knoprol wordt daarmee dus geen knop. Het klinkt alleen als een knop, en dat is precies het probleem als de bediening ontbreekt.