Wat het is
Veel knoppen op moderne websites gebruiken alleen een icoon zonder zichtbare tekst — een vergrootglas voor zoeken, een hamburgericoon voor een menu, een X om een pop-up te sluiten. Een ziende bezoeker herkent deze iconen direct door herkenning en context, maar een schermlezer heeft niets om hardop voor te lezen tenzij de knop ook toegankelijke tekst achter de schermen heeft, meestal via een aria-label-attribuut (bijvoorbeeld aria-label="Zoeken") dat niet visueel wordt getoond maar wel aan een schermlezer wordt aangekondigd.
Zonder dat kondigt een schermlezer simpelweg het generieke woord "knop" aan zonder verdere informatie, zonder enige aanwijzing van wat erop drukken daadwerkelijk zou doen.
Waarom het belangrijk is
Een icoon dat visueel duidelijk is voor een ziend persoon draagt op zichzelf geen enkele informatie over aan iemand die het niet kan zien — het icoon zelf is niet inherent betekenisvol zonder zicht, alleen het concept dat het vertegenwoordigt is dat, en dat concept moet op een andere manier worden overgebracht voor een schermlezergebruiker. Een pagina vol knoppen met alleen een icoon, elk alleen aangekondigd als "knop, knop, knop", laat een schermlezergebruiker geen manier om te weten wat ze doen zonder te gissen en erop te drukken om erachter te komen.
Dit is een wijdverspreid en makkelijk over het hoofd te zien probleem, juist omdat knoppen met alleen een icoon een veelvoorkomend, visueel strak ontwerppatroon zijn — het toegankelijkheidsgat wordt pas duidelijk bij het daadwerkelijk testen met een schermlezer in plaats van gewoon naar de pagina te kijken.
Hoe je het oplost
- Identificeer elke knop op je site die alleen een icoon gebruikt zonder zichtbaar tekstlabel.
- Voeg een
aria-label-attribuut toe dat de actie van de knop in een paar woorden beschrijft, bijv.aria-label="Menu sluiten"ofaria-label="Zoeken". - Overweeg waar mogelijk om in plaats daarvan een kort zichtbaar tekstlabel naast het icoon toe te voegen — dit helpt ook ziende bezoekers en vermindert de afhankelijkheid van het onthouden van icoonbetekenissen.
- Als je een websitebouwer gebruikt, controleer dan of iconenknoppen die door het platform worden gegenereerd standaard al toegankelijke labels bevatten — sommige wel, andere vereisen dat je handmatig een veld "toegankelijke naam" of "schermlezertekst" invult.
- Test met een gratis schermlezer (NVDA, VoiceOver) door met tab naar elke iconenknop te gaan en te bevestigen dat hij een duidelijke, specifieke actie aankondigt in plaats van alleen "knop".