Wanneer gebruik je ARIA en wanneer juist niet?
Wel bij onderdelen die je zelf bouwt en waarvoor geen standaard HTML-element bestaat. Niet bij dingen die HTML al kan.
Dat onderscheid klinkt eenvoudig, en toch gaat het in de praktijk vaak mis. Meestal door goede bedoelingen: iemand voegt kenmerken toe om het net iets toegankelijker te maken.
Het resultaat is dan vaak het tegenovergestelde.
Wanneer wel
Bij een uitklapmenu dat je zelf hebt gebouwd, bij tabbladen, bij een venster dat over de pagina heen verschijnt, en bij een lijst met zoeksuggesties.
En bij alles wat verandert zonder dat de pagina opnieuw laadt. Een knop die iets open- en dichtklapt hoort door te geven in welke stand hij staat.
Wanneer niet
Op een echte knop, een echte link, een echte kop of een echt formulierveld. Die vertellen zelf al wat ze zijn.
Zet je daar alsnog een rol op, dan voeg je niets toe en loop je het risico dat je iets overschrijft. Meer daarover lees je bij het verschil tussen ARIA en semantische HTML.
De meest voorkomende overbodige toevoeging
Een label op een element dat al een duidelijke tekst heeft. Dat label overschrijft namelijk de zichtbare tekst.
Staat er zichtbaar Offerte aanvragen op je knop, maar zegt het label Verzenden, dan hoort een schermlezergebruiker Verzenden. Iemand die je site laat voorlezen en iemand die meekijkt, praten dan langs elkaar heen.
Mijn vuistregels
- Kan het met een standaard HTML-element? Dan geen ARIA.
- Voeg een status alleen toe als je hem ook bijwerkt.
- Overschrijf zichtbare tekst nooit met een afwijkend label.
- Verberg nooit iets voor hulpsoftware dat wel zichtbaar is.
Die laatste komt vaker voor dan je denkt, meestal als restant van een oplossing voor iets anders.
Twijfelgevallen
Landmarks, dus kenmerken die aangeven welk deel van je pagina de navigatie of de hoofdinhoud is. Die zijn nuttig, maar moderne HTML heeft er eigen elementen voor.
Gebruik dus die elementen. Alleen als je thema ze niet gebruikt, is een landmark-rol een verdedigbare pleister. Meer daarover lees je bij navigatie.
Wat te doen bij een paginabouwer
Die genereren soms kenmerken die niet kloppen, bijvoorbeeld een knoprol op een element dat niet met het toetsenbord te bereiken is.
Dat is niet altijd zelf op te lossen. Controleer in elk geval je menu, je formulieren en je uitklapbare onderdelen; daar zit vrijwel altijd het probleem.