Tekst in een afbeelding
Tekst in een afbeelding wordt niet voorgelezen door een screenreader. Deze teksten zijn ook niet aan te passen voor de verschillende behoeften van de bezoeker, zoals bijvoorbeeld tekst vergroten of het verbeteren van het contrast. Bied daarom ook een alternatief aan in tekst.
Voorbeelden van afbeeldingen van tekst zijn:
- Een afbeelding waarin een evenement wordt aangekondigd. Het heeft een opvallende achtergrondkleur, een afbeelding en/of een logo, een plaats en een tijd.
- Een screenshot van een socialemediabericht.
- Een banner op de homepage om een speciale actie aan te kondigen.
Deze tekst bestaat niet als echte tekst op de pagina, maar alleen uit pixels in een afbeelding. Deze tekst is niet beschikbaar voor hulpsoftware en heeft dus een alternatieve tekst nodig. Succescriterium 1.4.5 gaat specifiek over wanneer je wél en wanneer je geen afbeeldingen van tekst gebruikt. Want tekst in een afbeelding is voor een grote groep bezoekers niet toegankelijk.
Bezoekers die slechtziend of kleurenblind zijn hebben ook moeite met tekst in een afbeelding. Zij kunnen de kleur van de tekst of achtergrond niet veranderen om de tekst beter leesbaar te maken. Bij inzoomen worden de pixels wazig, waardoor de tekst niet meer goed leesbaar is. Ook bezoekers met dyslexie willen de tekst op een website aan kunnen passen, bijvoorbeeld door de afstand tussen de letters, woorden en zinnen groter te maken. Dit is allemaal niet mogelijk met tekst in een afbeelding. Het is dus belangrijk om goed na te denken voordat je een afbeelding van tekst gebruikt.
Op een toegankelijke manier tekst in een afbeelding gebruiken
Als je een afbeelding van tekst wilt of moet gebruiken, kies er dan ook altijd voor om de informatie uit de afbeelding ook als tekst op de pagina te plaatsen. Bijvoorbeeld in een uitleg onder een infographic, of een samenvatting of tabel onder een grafiek. Zie ook Waar moet een alternatieve tekst staan?. Voeg daarnaast ook altijd een alternatieve tekst toe en beschrijf daarin waar de bezoeker op de pagina een uitgebreidere uitleg kan lezen.
Afbeeldingen met alléén tekst
Gebruik nooit afbeeldingen die alléén maar tekst bevatten, zoals WordArt om koppen aan te geven in je document of een hero afbeelding met alleen tekst. Mis je functionaliteit om tekst op te maken op een manier die past bij wat je wil? Ga dan in overleg met de beheerder van het contentmanagementsysteem (CMS) waarin je werkt.
Uitzonderingen
Een paar soorten afbeeldingen van tekst hoeven niet te voldoen aan de toegankelijkheidsrichtlijnen, namelijk:
- Logo's
- Afbeeldingen van tekst, waar de bezoeker zélf invloed heeft op hoe de tekst eruit ziet
In de praktijk komt het tweede eigenlijk nooit voor, dus wees altijd voorzichtig met afbeeldingen van tekst.
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.