Succescriterium 1.4.5 Afbeeldingen van tekst
Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:
- Aanpasbaar: De afbeelding van tekst kan visueel aangepast worden aan de eisen van de gebruiker;
- Essentieel: Een specifieke weergave van tekst is essentieel voor de informatie die wordt overgebracht.
NootWoordmerken (tekst die onderdeel is van een logo of merknaam) worden als essentieel beschouwd.
Afbeeldingen van tekst begrijpen (Engelstalig)
Gebruik echte tekst in plaats van een afbeelding van tekst, als je dezelfde weergave ook met HTML en CSS kunt maken. Mensen kunnen echte tekst aanpassen aan hun eigen behoeften. Zo kunnen mensen die slechtziend zijn of mensen die dyslexie hebben bijvoorbeeld de grootte, de kleur, het lettertype of de regelafstand van de tekst aanpassen. Bij een afbeelding van tekst kan dit niet.
Een afbeelding van tekst mag wel in deze gevallen:
- de specifieke weergave van de tekst is essentieel, zoals bij een logo of merknaam, een voorbeeld van een lettertype of een scan van een oude brief
- de gebruiker kan het lettertype, de grootte, de kleur en de achtergrond van de afbeelding van tekst zelf instellen
- dezelfde tekst staat ook als echte tekst zichtbaar op de pagina, bijvoorbeeld naast een poster
Tekst in een grafiek, een diagram of een schermafbeelding valt niet onder dit succescriterium. Hetzelfde geldt voor de naam op een naamkaartje in een foto. Die afbeeldingen brengen meer over dan alleen tekst.
Let op: Gebruik je een afbeelding van tekst? Zet de tekst dan ook in het tekstalternatief (zie 1.1.1 Niet-tekstuele content). Een tekstalternatief alleen is niet genoeg voor dit succescriterium.
Hoe pas je dit toe?
- Gebruik echte tekst in plaats van een afbeelding van tekst.
- Kun je een afbeelding met tekst niet vervangen, zoals een poster of een flyer? Zet dezelfde tekst dan ook zichtbaar op de pagina.
Voor wie is dit belangrijk?
- Mensen die slechtziend zijn.
- Mensen die een cognitieve, taal- of leerbeperking hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Uitzonderingen
Uitzonderingen zijn:
- afbeeldingen van tekst waarvan een specifieke weergave essentieel is is voor de informatie
- woordmerken: tekst die onderdeel is van een logo of merknaam
Geldt alleen voor:
- tekst die geen onderdeel is van een afbeelding met significant andere visuele content (bijvoorbeeld een grafiek, diagram of schermafbeelding)
Testprocedure
Test 1: Afbeeldingen
- Inventariseer de pagina
- Bepaal welke afbeeldingen er zijn:
- Foto’s
- Illustraties
- Iconen
- Logo’s
- Grafieken en diagrammen
- Infographics
- Kaarten
- Productfoto’s
- Schermafbeeldingen
- Handleidingen
- Geanimeerde afbeeldingen
- Thumbnails
- Abstracte afbeeldingen
- Patronen
- Koppen, knoppen en links met tekst in een afbeelding
- Bepaal voor elke afbeelding:
- Of de afbeelding tekst bevat die informatie overbrengt
- Of de afbeelding naast de tekst ook informatie overbrengt met andere visuele content (bijvoorbeeld een grafiek, diagram of schermafbeelding)
- Bepaal welke afbeeldingen er zijn:
- Controleer voor elke afbeelding waarvan de tekst niet als echte tekst in de code staat of minstens één van de volgende waar is:
- Of er een bedieningselement of instelling is om de weergave van de tekst aan te passen
- Of dezelfde visuele weergave niet te maken is met HTML en CSS
- Controleer voor elke afbeelding die alleen slaagt via een bedieningselement of instelling:
- Of het lettertype in te stellen is
- Of de grootte in te stellen is
- Of de kleur in te stellen is
- Of de achtergrond in te stellen is
Belangrijk om te weten
- Tekst in een
<canvas>-element is altijd een afbeelding van tekst. - Tekst die met
<path>is getekend in een<svg>-element is een afbeelding van tekst. - Tekst in een
.svg-bestand dat met<img>of als CSS-achtergrond is geladen, is altijd een afbeelding van tekst. Dat geldt ook voor tekst met het<text>-element. - Tekst met het
<text>-element in een<svg>-element dat direct in de HTML staat, is echte tekst. - Een foto of achtergrond die alleen sfeer geeft, telt niet als significant andere visuele content. Een banner met tekst over een sfeerfoto valt dus wel onder dit succescriterium.
Beoordeling
- Voor alle afbeeldingen waarvan alleen de tekst informatie overbrengt, moet minstens één van de volgende zaken gelden:
- Er is een bedieningselement of instelling om de weergave van de tekst aan te passen:
- Het lettertype moet in te stellen zijn
- De grootte moet in te stellen zijn
- De kleur moet in te stellen zijn
- De achtergrond moet in te stellen zijn
- Dezelfde visuele weergave is niet te maken met HTML en CSS
- Er is een bedieningselement of instelling om de weergave van de tekst aan te passen: