Gebruik geen afbeeldingen van tekst maar echte tekst

Afbeeldingen van tekst zijn voor sommige bezoekers niet handig. Zij kunnen de tekst dan niet aanpassen aan hun eigen voorkeuren, omdat deze is ‘ingebakken’ in het plaatje. Daarom moet je in de meeste gevallen echte tekst gebruiken en deze vormgeven met CSS.

Hoe pas ik dit toe?

Afbeeldingen van tekst kunnen bestaan uit alleen tekst of uit een tekst in combinatie met een plaatje (bijvoorbeeld een banner). Met ‘echte tekst’ wordt bedoeld: tekst die niet in een afbeelding is ‘ingebakken’, maar daadwerkelijk als tekst op de pagina staat. De tekst die je invoert in een CMS in het vak voor de inhoud van een pagina wordt bijvoorbeeld als echte tekst op een pagina getoond.

Wanneer mag een afbeelding van tekst gebruikt worden?

Als één van de volgende punten van toepassing is op een afbeelding van tekst, is het toegestaan om deze te gebruiken in plaats van echte tekst:

  1. Met geen van de technologieën (zoals CSS) die is gebruikt voor de website kan dezelfde visuele weergave bereikt worden als met de afbeelding van de tekst.

  2. De vormgeving kan niet op betrouwbare wijze worden gepresenteerd in gangbare browsers als niet gebruikgemaakt wordt van een afbeelding van tekst.

  3. De specifieke weergave van de tekst in de afbeelding is essentieel voor de informatie die wordt overgebracht. Dit is bijvoorbeeld het geval bij logo’s.

  4. De technologie die ingezet wordt om echte tekst te gebruiken in plaats van een afbeelding van tekst zorgt ervoor dat aan een andere toegankelijkheidseis niet kan worden voldaan (bijvoorbeeld dat de tekst tot 200% geschaald kan worden).

  5. Er is een mogelijkheid voor de bezoeker om het lettertype, de grootte, de kleur en de achtergrond van de afbeelding van de tekst in te stellen.

In de bovenstaande gevallen hoeft géén echte tekst gebruikt te worden, en is het dus toegestaan om een afbeelding van tekst te gebruiken. Deze afbeelding moet natuurlijk wel voorzien zijn van een goede alternatieve tekst.

Echte tekst gebruiken

Als de bovenstaande punten niet van toepassing zijn op de afbeelding van tekst, moet je deze vervangen door echte tekst. Op de volgende manieren kun je echte tekst gebruiken en toch het visuele effect bereiken dat je wilt:

  1. Met CSS de echte tekst vormgeven, bijvoorbeeld de kleur, de grootte, het lettertype, de spatiëring en de regelafstand instellen. Wil je een banner creëren, dan kun je met CSS een tekst over een afbeelding plaatsen. Op deze manier behoud je de echte tekst.

  2. Met CSS echte tekst vervangen door een afbeelding. Je moet hierbij op een aantal zaken letten:

    • Plaats de echte tekst met CSS buiten beeld door deze absoluut te positioneren en toon in plaats daarvan met CSS een afbeelding van de tekst. Belangrijk: gebruik in het CSS-bestand niet ‘display: none’ of ‘visibility: hidden’ om de echte tekst te verbergen, want daarmee maak je deze ook onzichtbaar voor voorleessoftware.

    • Bied een mogelijkheid voor de bezoeker om te switchen naar een versie van de webpagina waar de echte tekst niet vervangen is door afbeeldingen van tekst.

Voorbeelden

Met CSS echte tekst vervangen door een afbeelding van de tekst

De volgende titel wordt als echte tekst op de pagina geplaatst. In het voorbeeld gaat het om een <h1>-koptekst. Het <span>-element is toegevoegd om de tekst buiten beeld te kunnen plaatsen.

<h1><span>Het is feest!</span></h1>

De volgende CSS-code is gebruikt om deze titel op te maken. Het <span>-element wordt met absolute positionering buiten beeld geplaatst. Het <h1>-element krijgt een afbeelding als achtergrond (dit is dus de afbeelding van de tekst in het <h1>-element).

h1 {
    background-image: url(het-is-feest.png);
    height: 195px;
    width: 290px;
    background-repeat: no-repeat;
    position: absolute;
}

h1 span {
    position: absolute;
    left: -999em;
}

Hoe draagt dit bij aan een betere website?

Door echte tekst te gebruiken in plaats van afbeeldingen van tekst kunnen bezoekers met een visuele of cognitieve beperking de tekst weergeven op een manier die voor hen prettig is. Ook voor de vindbaarheid in zoekmachines is het gunstig om echte tekst in plaats van afbeeldingen te gebruiken.

Bouwer of redacteur?

De bouwer moet bij het omzetten van het ontwerp naar code zorgen dat er waar mogelijk echte tekst wordt gebruikt, en dat er mogelijkheden zijn om deze tekst in het CMS in te voeren. De redacteur moet bij het plaatsen van afbeeldingen van tekst kritisch kijken naar de mogelijkheden die er zijn om de tekst op een andere wijze vorm te geven (bijvoorbeeld met CSS).

Technische details

Hoort bij