Wat is het verschil tussen ARIA en semantische HTML?
Semantische HTML zegt wat een element ís. ARIA zegt alleen wat het moet lijken.
Dat verschil is groter dan het klinkt. Een echt element brengt zijn gedrag mee; een rol doet dat niet.
Vandaar de vuistregel: eerst het juiste element, en pas als dat niet bestaat een rol erop.
Semantische HTML doet het werk
Een knopelement is bereikbaar met de tabtoets, reageert op Enter en op de spatiebalk, en wordt door elke schermlezer als knop aangekondigd. Dat krijg je gratis.
Hetzelfde geldt voor koppen, lijsten, formuliervelden en links. Ze dragen betekenis én gedrag. Meer daarover lees je bij html.
ARIA vertelt het alleen
Zet je een knoprol op een gewoon blok, dan wordt het aangekondigd als knop. Maar je kunt er niet met de tabtoets komen, Enter doet niets, en de spatiebalk scrollt de pagina.
Je hebt dan iets gemaakt dat klinkt als een knop en zich gedraagt als een stuk tekst. Voor iemand die op het geluid afgaat, is dat verwarrender dan helemaal geen rol.
Waarom dat verschil telt
Omdat een belofte wordt gedaan die niet wordt waargemaakt. Een schermlezergebruiker hoort knop, drukt op Enter, en er gebeurt niets.
Bij een gewoon blok zonder rol weet diegene tenminste dat er niets te verwachten valt.
Mijn vuistregels
- Bestaat er een HTML-element voor? Gebruik dat.
- Gebruik je toch een rol, bouw dan ook het toetsenbordgedrag.
- Controleer of het element focus kan krijgen; anders is de rol zinloos.
- Laat een paginabouwer geen knoppen maken van blokken als het anders kan.
Die tweede is het echte werk. Een rol is één regel; het gedrag erbij bouwen is een stuk meer.
Een voorbeeld
Neem een uitklapbare veelgestelde vraag. Met een knopelement en een status die aangeeft of hij openstaat, ben je klaar.
Met een blok en een knoprol moet je zelf regelen dat het element focus kan krijgen, dat Enter en spatie werken, en dat de status meebeweegt.
Wanneer je alsnog ARIA nodig hebt
Bij statussen. HTML kan niet uitdrukken dat een menu nu openstaat, of dat een tabblad actief is.
Daar is ARIA juist voor bedoeld, en daar is het onmisbaar. Meer daarover lees je bij hoe maak je een uitklapmenu toegankelijk.