Tekst in afbeeldingen: waarom het een probleem is en wat u doet

De zomeractie staat klaar. De ontwerper heeft een prachtige banner gemaakt: een foto van een terras, met daaroverheen in grote letters “20% korting op alle loungesets, alleen deze week”. Eén jpg, klaar om te uploaden. Voor de meeste bezoekers werkt dat prima. Voor een flink deel niet. Tekst in een afbeelding kan niet worden vergroot zonder te vervagen, niet worden vertaald, niet worden doorzocht en vaak niet worden voorgelezen. Hieronder leest u waarom, wanneer het toch mag, en hoe u dezelfde banner met echte tekst maakt.

Wat er misgaat bij tekst in een afbeelding

Voor een browser is een afbeelding een verzameling gekleurde puntjes. Dat de puntjes samen woorden vormen, weet de browser niet. Daaruit volgen vier problemen.

Vergroten

Iemand die slecht ziet, zet de tekst in de browser op 200 procent of gebruikt een vergrootprogramma. Echte tekst blijft scherp en loopt netjes door. Een afbeelding wordt groter en wazig, of blijft juist even groot terwijl de rest van de pagina meegroeit. Bij een kleine letter in de afbeelding blijft die dan onleesbaar.

Aanpassen

Mensen met dyslexie of een visuele beperking passen soms lettertype, regelafstand of kleuren aan met een browserextensie of een eigen stylesheet. Dat werkt op echte tekst, niet op een plaatje. Ook de donkere modus van een browser laat de afbeelding onaangeroerd.

Voorlezen

Een screenreader leest alleen de alt-tekst van een afbeelding voor. Staat die er niet, of staat er “banner zomer”, dan mist de bezoeker de hele actie. En zelfs met een goede alt-tekst blijft het een omweg.

Vertalen en zoeken

Browservertaling slaat afbeeldingen over. Een bezoeker die uw site in het Engels of Pools laat vertalen, ziet de rest van de pagina in zijn eigen taal en de banner nog steeds in het Nederlands. Ook zoekmachines lezen tekst in afbeeldingen niet betrouwbaar mee, en de zoekfunctie van de browser (Ctrl+F) vindt hem niet.

Wat WCAG erover zegt

Succescriterium 1.4.5 van WCAG, “afbeeldingen van tekst”, hoort bij niveau AA. Het vraagt: als u met gewone tekst hetzelfde visuele resultaat kunt bereiken, gebruik dan gewone tekst. Er zijn twee uitzonderingen:

• Logo’s en merknamen. Uw logo mag een afbeelding zijn, ook als er tekst in staat.
• Wezenlijke vormgeving. Als de precieze weergave van de tekst de kern is. Denk aan een foto van een historisch document, een handgeschreven brief of een voorbeeld van een lettertype.

Daarnaast blijft criterium 1.1.1 gelden: elke afbeelding die informatie draagt, heeft een tekstalternatief nodig. Mag een afbeelding met tekst dus blijven staan, zoals een logo, dan bevat de alt-tekst minstens de tekst die erin staat. Hoe u zo’n beschrijving opstelt, leest u in alt-teksten schrijven die werken.

Ook moderne lettertypes zijn geen excuus meer. Met webfonts kunt u vrijwel elke huisstijlletter als echte tekst tonen. Het argument “het moet er precies zo uitzien” gaat daardoor bijna nooit meer op.

Waar u het in de praktijk tegenkomt

Bij een eerste controle van een website vinden we tekst in afbeeldingen vooral op deze plekken:

• Homepage-banners en sliders met een actie of slogan.
• Knoppen die als afbeelding zijn gemaakt, zoals een groene “Bestel nu”-knop uit een oud ontwerp.
• Prijstabellen of openingstijden die als screenshot zijn geplaatst.
• Posters van evenementen, rechtstreeks uit het drukwerk overgenomen.
• Citaten van klanten in een mooi kader, als plaatje opgeslagen.
• Infographics, waarvoor een eigen aanpak geldt (zie een infographic toegankelijk maken).

De poster en de openingstijden zijn het pijnlijkst. Juist daar zoekt iemand een concreet gegeven, zoals een datum of een tijd, en juist daar is het onvindbaar voor wie de afbeelding niet kan lezen.

Dezelfde banner, maar dan met echte tekst

De oplossing is vrijwel altijd dezelfde: scheid beeld en tekst. De foto wordt een achtergrond, de tekst wordt er in html overheen gezet.

<section class="banner">
  <img src="terras.jpg" alt="" class="banner-foto">
  <div class="banner-tekst">
    <h2>20% korting op alle loungesets</h2>
    <p>Alleen deze week</p>
    <a href="/loungesets">Bekijk de loungesets</a>
  </div>
</section>

De foto is nu decoratief en krijgt een lege alt. De boodschap staat in gewone tekst, die meegroeit, vertaald wordt en wordt voorgelezen. De link is een echte link met een duidelijke tekst.

Let wel op het contrast. Tekst over een foto is lastig, omdat de achtergrond overal anders is. Een halfdoorzichtig donker vlak achter de tekst, of een effen kleurblok naast de foto, lost dat meestal op. De gebruikelijke eis is een contrast van 4,5:1 voor gewone tekst en 3:1 voor grote tekst.

In WordPress en page builders

Het Omslag-blok van de blokeditor doet precies dit: een afbeelding als achtergrond met echte tekst erop, inclusief een instelbare donkere laag. In Elementor, Divi en vergelijkbare builders bereikt u hetzelfde met een sectie met achtergrondafbeelding en een tekst- of kopwidget erin. Een slider kunt u op dezelfde manier opbouwen, al is het de vraag of u die slider nodig heeft. Daarover gaat sliders en carrousels toegankelijk maken.

Wat u vandaag kunt doen

1. Loop uw homepage en belangrijkste landingspagina’s langs. Probeer de tekst in banners te selecteren met de muis. Lukt dat niet, dan is het een afbeelding.
2. Zoom de browser in tot 200 procent (Ctrl en plus, of Cmd en plus). Wordt een stukje tekst wazig, dan staat het in een afbeelding.
3. Maak een lijstje van alle plekken en begin bij informatie die mensen echt nodig hebben: prijzen, data, tijden, contactgegevens.
4. Vervang die eerst door echte tekst. Banners met een slogan volgen daarna.
5. Blijft een afbeelding met tekst voorlopig staan, zorg dan in elk geval voor een alt-tekst met de volledige tekst erin.

Spreek met uw ontwerper of marketingbureau af dat banners voortaan zonder ingebakken tekst worden aangeleverd. Dat bespaart later dubbel werk.

Een kleine verandering met veel effect

Tekst uit afbeeldingen halen is geen grote verbouwing, maar het helpt veel mensen tegelijk: slechtzienden, mensen die vertalen, mensen met een screenreader en iedereen die op een kleine telefoon leest. Het hoort bij de bredere aanpak die we beschrijven op de pagina een toegankelijke website, stap voor stap. Heeft uw site veel van deze banners en wilt u ze laten omzetten, dan valt dat onder het herstellen van toegankelijkheidsproblemen.