Campus Design System

Appearance

1.4.5 Afbeeldingen van tekst niveau AA ​

Uitleg ​

Het criterium 1.4.5 Images of Text in WCAG 2.2 stelt dat tekst bij voorkeur als echte tekst moet worden weergegeven en niet als onderdeel van afbeeldingen. De reden hiervoor is dat echte tekst eenvoudiger te schalen, op te maken en toegankelijk te maken met hulpmiddelen zoals schermlezers en braille-apparaten. Door tekst als afbeelding te gebruiken, kan de toegankelijkheid verminderen, vooral voor mensen met visuele beperkingen of die afhankelijk zijn van vergrotingssoftware of schermlezers.

Wat houdt dit criterium in? ​

In situaties waar tekst op een website wordt weergegeven, moet deze als tekst in de HTML worden ingevoerd in plaats van als een afbeelding, tenzij het strikt noodzakelijk is om een afbeelding te gebruiken om een specifiek visueel effect te bereiken. Een uitzondering is wanneer het uiterlijk van de tekst een essentieel onderdeel is van de informatie die wordt overgebracht, zoals bij logo’s of artistieke teksten.

Voorbeelden waar dit criterium geldt:

  • Citaten die als afbeelding zijn weergegeven.
  • Koppen of banners met ingebakken tekst.
  • Teksten in buttons of labels in de vorm van een afbeelding.

Waarom is dit belangrijk? ​

Door tekst in afbeeldingen te vermijden, blijft de inhoud flexibel en toegankelijk. Echte tekst kan worden aangepast aan de behoeften van de gebruiker, zoals het vergroten van de tekstgrootte of het veranderen van kleuren voor betere leesbaarheid. Dit helpt gebruikers met visuele beperkingen, dyslexie of andere leesuitdagingen om de inhoud aan te passen aan hun specifieke behoeften.

Voorbeeld van het probleem ​

Stel dat er een knop op een website staat met tekst die onderdeel is van een afbeelding. Wanneer een gebruiker die de tekstgrootte moet vergroten deze knop bekijkt, blijft de tekst onveranderd omdat deze onderdeel is van een afbeelding. Ook schermlezers kunnen deze tekst mogelijk niet interpreteren, omdat de afbeelding geen echte tekst bevat.

Oplossing voor dit probleem ​

De oplossing is om tekst direct in HTML of CSS te zetten in plaats van in een afbeelding. Dit maakt het mogelijk om de tekst schaalbaar en leesbaar te maken, en toegankelijk voor gebruikers met hulpmiddelen zoals schermlezers.

Voorbeeld van implementatie ​

Een voorbeeld van het gebruik van echte tekst in plaats van een afbeelding:

html
<!-- Slecht voorbeeld: tekst als onderdeel van een afbeelding -->
<img src="banner-met-tekst.png" alt="Welkom op onze website!" />

<!-- Goed voorbeeld: echte tekst in HTML -->
<div class="banner">
  <h1>Welkom op onze website!</h1>
</div>

In het goede voorbeeld kan de tekst worden aangepast via CSS, geschaald door de gebruiker, en gelezen door schermlezers. Door geen afbeelding te gebruiken voor tekst, wordt de inhoud flexibeler en toegankelijker.

Belangrijke overwegingen ​

  • Logo’s en decoratieve tekst: Het gebruik van afbeeldingen voor logo’s of specifieke artistieke teksten is toegestaan, mits het nodig is voor het visuele effect of branding.
  • CSS-styling: Met CSS kun je tekst opmaken zonder deze in afbeeldingen te plaatsen. Denk hierbij aan schaduwen, kleurgradaties of aangepaste lettertypes, wat de noodzaak om tekst als afbeelding te gebruiken vermindert.
  • Responsive en schaalbare tekst: Gebruik CSS en HTML om ervoor te zorgen dat de tekst zich aanpast aan verschillende schermgroottes en instellingen van de gebruiker, zoals het vergroten van de tekstgrootte.

Alternatieve benaderingen ​

  • SVG in plaats van rasterafbeeldingen: Voor situaties waarin het uiterlijk van de tekst essentieel is, kun je SVG (Scalable Vector Graphics) overwegen, omdat deze vectorafbeeldingen schaalbaar zijn en in sommige gevallen leesbaar voor schermlezers wanneer de tekst correct wordt ingebed.
  • CSS-effecten: In plaats van tekst als afbeelding, kan CSS worden gebruikt om visuele effecten te creëren die het gebruik van afbeeldingen overbodig maken.

Belangrijkste punten ​

  • Gebruik echte tekst in plaats van afbeeldingen om toegankelijkheid en aanpasbaarheid te garanderen.
  • Beperk het gebruik van tekst als onderdeel van afbeeldingen tot situaties waarin het visuele ontwerp essentieel is voor de betekenis, zoals logo’s.
  • Controleer de toegankelijkheid van je tekst door hulpmiddelen te gebruiken en ervoor te zorgen dat deze flexibel blijft in schaalbaarheid en kleur.

Tools en Hulpmiddelen ​

  • Axe Accessibility Checker: Controleert of tekst in afbeeldingen voorkomt op je website en wijst op mogelijke verbeteringen. Axe.
  • WAVE Web Accessibility Evaluation Tool: Een gebruiksvriendelijke tool die je helpt bij het vinden van toegankelijkheidsproblemen, waaronder het gebruik van afbeeldingen voor tekst. WAVE.

Betekenis voor toegankelijkheid ​

Door tekst in HTML of CSS te gebruiken in plaats van als afbeelding, maak je de website toegankelijker en gebruiksvriendelijker voor alle gebruikers. Het voorkomt problemen met schaalbaarheid, leesbaarheid en ondersteuning door schermlezers, waardoor de ervaring beter en inclusiever wordt.

Referenties ​