Afbeeldingen met tekst: wanneer wel, wanneer niet?
Tekst die verwerkt is in een afbeelding kan niet worden gelezen door voorleessoftware, niet worden vergroot zonder kwaliteitsverlies en niet worden aangepast naar een ander kleurschema. WCAG 1.4.5 stelt daarom dat je afbeeldingen van tekst moet vermijden, tenzij het om een logo gaat of de specifieke visuele weergave onmisbaar is. In de meeste gevallen is echte HTML-tekst de betere keuze. Altijd.
Wat is het probleem met tekst in afbeeldingen?
Stel je voor dat je een actie wil communiceren op je homepage. Je opent Photoshop of Canva, typt "20% korting op alle producten" op een mooie achtergrond en plaatst het als afbeelding op je website. Visueel ziet het er prima uit.
Maar voor iemand die voorleessoftware gebruikt, bestaat die tekst niet. De schermlezer leest wat er in het alt-attribuut staat. Als dat leeg is of de bestandsnaam bevat, hoort die persoon helemaal niets. Als je een goede alt-tekst hebt toegevoegd, hoort hij de tekst wel, maar dan nog heeft hij geen toegang tot de voordelen van echte tekst. Hij kan de tekst niet kopiëren. Niet aanpassen naar een ander lettertype. Niet laten vertalen. Niet vergroten zonder dat hij wazig wordt.
En dat is niet alleen een probleem voor mensen met een visuele beperking. Iemand die dyslexie heeft en zijn eigen lettertype gebruikt, iemand die de pagina vertaalt via zijn browser en iemand die op zijn telefoon de tekst flink vergroot: ze lopen allemaal tegen hetzelfde aan.
"Probeer teksten altijd als échte tekst te plaatsen en niet te 'photoshoppen' in de afbeelding."
Wat zegt WCAG over afbeeldingen met tekst?
WCAG succescriterium 1.4.5 heet "Afbeeldingen van tekst" en valt onder niveau AA. Dat is het niveau dat voor de meeste organisaties wettelijk verplicht is, zowel via de Wet digitale overheid als via de European Accessibility Act.
Het criterium zegt in de kern het volgende: als je informatie kunt overbrengen als echte tekst, dan doe je dat ook als echte tekst. Je gebruikt geen afbeelding voor iets wat ook in HTML kan.
Er zijn precies twee situaties waarin tekst in een afbeelding wél mag volgens WCAG 1.4.5.
1 De weergave is essentieel
Als de specifieke visuele presentatie van de tekst een onmisbaar onderdeel is van de informatie zelf, mag het als afbeelding. Denk aan een handtekening, een kalligrafisch kunstwerk of een screenshot van een document waarbij de lay-out zelf de informatie is.
2 Het is een logo of woordmerk
Tekst die onderdeel is van een logo of woordmerk mag als afbeelding worden getoond. Dat is logisch: het uiterlijk van een logo is zelf de boodschap. Voeg dan wel een goede alt-tekst toe die de naam van de organisatie of het merk duidelijk maakt.
Wat je in de praktijk veel ziet gaan
In onze WCAG-onderzoeken bij gemeenten, webwinkels en andere organisaties komen we een aantal terugkerende patronen tegen. Herken jij er een van?
Veelgemaakte fout: Actiebanner met tekst als afbeelding
| Wat je ziet | Wat er misgaat |
|---|---|
| Een webshop plaatst een grote banner met de tekst "Gratis verzending vanaf €50 · Geldig t/m zondag". Die tekst is ingekleurd, heeft een speciaal lettertype en zit ingebakken in de afbeelding. | Iemand die voorleessoftware gebruikt, hoort de alt-tekst. Die luidt: "banner-homepage-mei.jpg". De korting is volledig gemist. De pagina is gebouwd, maar de actie communiceert naar nul procent van de blinde bezoekers. |
Veelgemaakte fout: Quote of statement als afbeelding
| Wat je ziet | Wat er misgaat |
|---|---|
| Een gemeente plaatst een citaat van de wethouder als een opgemaakte afbeelding. Mooie typografie, herkenbaar qua stijl. Maar de tekst zit niet als HTML op de pagina. | De quote kan niet worden vertaald, niet worden voorgelezen met de juiste uitspraak en niet worden vergroot. Iemand die voor zijn begrip afhankelijk is van vergroting of voorlezing, mist het citaat volledig. |
Veelgemaakte fout: Infographic met informatieve tekst
| Wat je ziet | Wat er misgaat |
|---|---|
| Een rapport of jaarverslag bevat een infographic met daarin kerncijfers: "34% van de inwoners maakt gebruik van digitale dienstverlening." Die tekst staat alleen in de afbeelding. | De kerncijfers zijn onzichtbaar voor schermleessoftware. Een goede alt-tekst helpt, maar dan moet die ook echt alle relevante informatie bevatten. In de praktijk wordt dat vaak vergeten of te kort ingevuld. |
Hoe los je het op?
De beste oplossing is bijna altijd: gebruik echte tekst. In de meeste gevallen kun je met CSS precies hetzelfde visuele resultaat bereiken als met een afbeelding. Tekst over een afbeelding heen plaatsen, een gekleurde achtergrond, een speciaal lettertype: het kan allemaal als HTML en CSS, zonder dat je de toegankelijkheid opoffert.
Voor banners en hero-afbeeldingen geldt de gouden regel: de afbeelding is de achtergrond, de tekst is HTML. Zo zie je de mooie visuele combinatie, maar bestaat de tekst ook programmatisch. Schermleessoftware leest hem voor. Browsers kunnen hem vertalen. Gebruikers kunnen hem vergroten.
Heb je toch een situatie waarin tekst echt als afbeelding wordt aangeboden? Dan zijn er twee dingen die je minimaal moet doen. Voeg een alt-tekst toe die alle tekst uit de afbeelding volledig en accuraat weergeeft. En gebruik WCAG criterium 1.1.1 als leidraad: de alt-tekst moet dezelfde informatie overbrengen als de afbeelding. Niet meer, niet minder.
Praktische tip
Gebruik je een CMS zoals WordPress, Drupal of Sitecore? Check dan of jouw thema of paginabouwer tekst over afbeeldingen heen plaatst als HTML of als gecombineerde afbeelding exporteert. Dat laatste zie je vaker dan je denkt bij automatisch gegenereerde banners of social-card-plugins. Controleer de broncode van je pagina om zeker te weten wat er daadwerkelijk staat.
Kleurcontrast geldt ook voor tekst in afbeeldingen
Een aanvullend punt dat hier niet onbesproken kan blijven: als je tekst in een afbeelding plaatst, gelden de kleurcontrastvereisten van WCAG 1.4.3 nog steeds. De tekst moet een contrastverhouding van minimaal 4,5:1 hebben ten opzichte van de achtergrond. Witte tekst op een lichtoranje achtergrond voldoet bijna nooit. En op de golvende rand van een foto is het contrast op elke pixel anders.
Dat is nog een reden waarom echte HTML-tekst op een vaste achtergrondkleur bijna altijd de betere keuze is. Het contrast is meetbaar, aanpasbaar en stabiel.
Veelgemaakte fout bij kleurcontrast
Witte tekst op een foto lijkt duidelijk leesbaar, maar door de variatie in kleuren in de foto is het contrast op sommige plekken prima en op andere plekken niet. WCAG vereist dat de tekst over de volledige afbeelding heen leesbaar is. Gebruik altijd een solide achtergrondvlak of een gekleurde overlay achter de tekst als je dit toch in een afbeelding wil verwerken.
De twee situaties op een rij
Om het concreet te maken: dit zijn de twee vragen die je jezelf moet stellen als je tekst wil verwerken in een afbeelding.
Kan deze tekst ook als echte HTML-tekst? Als het antwoord ja is, doe het dan als echte tekst. Bijna alle decoratieve tekst, actietekst, quotes en informatieve tekst vallen hieronder.
Is de specifieke visuele weergave onlosmakelijk verbonden met de boodschap? Denk aan een handtekening, een artistiek werk of een screenshot. Dan mag het als afbeelding, mits de alt-tekst compleet en accuraat is.
Logos en woordmerken zijn de enige uitzondering waarbij tekst als afbeelding verwacht wordt en expliciet is toegestaan. Voeg altijd een goede alt-tekst toe die de naam van de organisatie of het merk bevat.
Veelgestelde vragen
Mijn afbeelding heeft een alt-tekst met de tekst erop. Is dat genoeg?
Deels. Een goede alt-tekst zorgt ervoor dat de tekst wel wordt voorgelezen. Maar je lost daarmee niet op dat de tekst niet vergroot kan worden, niet vertaald door de browser en niet aanpasbaar is qua lettertype of kleur. Een alt-tekst is een compenserende maatregel, geen volwaardige oplossing. Probeer waar mogelijk de tekst als echte HTML te plaatsen.
Onze huisstijl vereist een speciaal lettertype. Mag dat niet?
Jazeker wel, maar dat hoeft niet via een afbeelding. Je kunt lettertypen inladen via @font-face of Google Fonts en daarna toepassen op echte HTML-tekst. Zo combineer je de visuele stijl van je huisstijl met de toegankelijkheid van echte tekst. Dat is de standaardmanier van werken bij modern webdesign.
We gebruiken een social-card generator die automatisch afbeeldingen maakt. Valt dat ook onder WCAG 1.4.5?
Als die gegenereerde afbeeldingen ook daadwerkelijk op je website worden geplaatst als inhoud, ja. Voor social media zelf gelden andere regels. Maar op je eigen website telt het. Controleer of de generator ook alt-teksten meelevert, en of je de tekst ook als HTML kunt plaatsen naast of in plaats van de gegenereerde afbeelding.
Geldt WCAG 1.4.5 ook voor pdf-documenten?
Niet letterlijk, maar het principe wel. In PDF-documenten moet tekst als echte tekst worden getagd en niet als afbeelding worden ingesloten. Afbeeldingen die tekst bevatten in een PDF moeten een alt-tekst krijgen. Een decoratieve afbeelding in een PDF wordt als artefact getagd zodat schermleessoftware hem negeert.
Tekst in een afbeelding verwerken is een van de meest voorkomende toegankelijkheidsproblemen die wij in onze onderzoeken tegenkomen. Het is ook een van de makkelijkste om te voorkomen. Zet tekst als tekst. Gebruik CSS voor de opmaak. En als je twijfelt of een situatie een uitzondering rechtvaardigt, is het antwoord in 9 van de 10 gevallen: nee, gewoon echte tekst gebruiken.
Wil je meer weten over toegankelijke afbeeldingen? Lees ook onze blog over het schrijven van de beste alternatieve teksten en onze content-checklist voor webredacteuren.
