Welke fouten met ARIA komen het vaakst voor?
Vijf fouten zie ik telkens terug, en ze hebben één ding gemeen: ze ontstaan doordat iemand ARIA toevoegt waar het niet nodig was.
Dat is ook meteen de reden dat verkeerde ARIA erger is dan geen ARIA. Zonder kenmerken valt een schermlezer terug op wat hij zelf uit de code afleidt, en dat is meestal prima.
Met verkeerde kenmerken krijgt hij informatie die niet klopt, en daar kan hij niet omheen.
De vijf die ik het vaakst zie
Eén: een rol op een element dat die rol al heeft. Twee: een label dat de zichtbare tekst overschrijft, zodat luisteren en kijken iets anders opleveren.
Drie: een status die nooit wordt bijgewerkt. De knop blijft ingeklapt melden terwijl het menu allang openstaat.
Een verborgen element dat toch focus krijgt
Vier: iets dat voor hulpsoftware verborgen is maar wel met de tabtoets bereikbaar blijft. Iemand tabt dan naar een element dat niet wordt aangekondigd.
Vijf: een rol op een element dat geen focus kan krijgen. Het klinkt als een knop, maar je komt er nooit. Meer daarover lees je bij het verschil tussen ARIA en semantische HTML.
Waarom het zo vaak misgaat
Omdat ARIA eruitziet als iets wat je toevoegt om beter te scoren. Een scan meldt iets, iemand plakt er een kenmerk op, de melding verdwijnt.
Dat het onderliggende probleem blijft bestaan, ziet zo’n scan niet. Meer daarover lees je bij validatie.
Mijn vuistregels
- Verwijder liever een twijfelachtig kenmerk dan dat je er nog een bij zet.
- Controleer bij elke status of hij ook echt meebeweegt.
- Laat labels overeenkomen met wat er zichtbaar staat.
- Verberg alleen wat ook visueel verborgen is.
Die eerste voelt tegennatuurlijk en is bijna altijd de juiste keuze.
Hoe je ze vindt
Een scan vindt de eerste en de vijfde. De tweede en de derde hoor je pas met een schermlezer, en de vierde vind je door met de tabtoets door je pagina te lopen.
Doe die drie controles op je menu, je formulieren en je uitklapbare onderdelen. Daar zit het bijna altijd.
Wat je eerst oplost
Alles wat iemand tegenhoudt of misleidt: een status die niet klopt en een label dat iets anders zegt dan er staat.
Een overbodige rol op een knop is rommelig maar hindert zelden. Die kan wachten tot je toch in die code zit.