Moet er tekst bij een icoon staan?
Er hoort tekst bij een icoon zodra het niet universeel herkenbaar is. En voor voorleessoftware heeft elk icoon met betekenis sowieso een label nodig.
Dat zijn twee verschillende dingen: zichtbare tekst en een beschrijving in de code.
Ze lossen allebei een ander probleem op.
De zichtbare tekst
Onderzoek laat keer op keer zien dat een icoon met een woord ernaast beter gevonden wordt dan een icoon alleen.
Dat geldt zelfs voor bekende pictogrammen. Meer daarover lees je bij design system.
Het label in de code
Een schermlezer kan een tekening niet interpreteren. Zonder beschrijving hoort iemand alleen dat er een knop is.
Bij een knop met alleen een icoon is dat een blokkade. Meer daarover lees je bij accessibility.
Wanneer je tekst kunt weglaten
Bij een winkelmandje, een vergrootglas en een telefoon in een menubalk, waar de context het duidelijk maakt.
Ook dan blijft het label in de code nodig.
Mijn vuistregels
- Twijfel je over de herkenbaarheid? Zet er tekst bij.
- Elk icoon met betekenis krijgt een label in de code.
- Puur decoratieve iconen verberg je voor voorleessoftware.
- Een knop met alleen een icoon krijgt altijd een label.
Die derde voorkomt dat een schermlezer zinloze beschrijvingen oplepelt.
Waar je de tekst zet
Onder of naast het icoon, in dezelfde klikbare zone. Zorg dat de tekst mee klikbaar is.
Anders mikken mensen op het woord en gebeurt er niets. Meer daarover lees je bij hexcode.
Bij een pictogrammenrij
Bijvoorbeeld je sociale kanalen in je footer. Daar volstaat een label in de code; zichtbare tekst maakt het rommelig.
Meer daarover lees je bij wanneer je een icoon gebruikt.