Normen · WCAG 2.2

SC 1.4.5 Niveau AA WCAG 2.0

Afbeeldingen van tekst

Tekst dient als echte tekst te worden weergegeven, niet als een gerasterde afbeelding — tenzij de afbeelding essentieel is (een logo, een screenshot van een besproken interface) of volledig aanpasbaar.

Wat het vereist

Wanneer dezelfde visuele presentatie bereikt kan worden met echte tekst en CSS, dient echte tekst gebruikt te worden. Afbeeldingen van tekst zoomen niet netjes mee, kunnen niet geselecteerd worden, kunnen niet door de browser vertaald worden, kunnen niet worden aangepast met gebruikers-CSS en worden vaag bij sterk inzoomen. Uitzonderingen: logo’s, essentiële afbeeldingen (een screenshot die laat zien hoe een interface eruitziet) en afbeeldingen van tekst die de gebruiker kan aanpassen.

Hoe hieraan te voldoen

  • Geef koppen, banners en promotieteksten weer als HTML-tekst met weblettertypen, niet als geëxporteerde PNG’s.
  • Gebruik voor marketingbadges (“Nieuw”, “Aanbieding”, “30% korting”) een <span> met CSS-opmaak in plaats van een sprite-afbeelding.
  • Als een ontwerper een hero-afbeelding aanlevert met ingebakken tekst, vraag dan om de tekst als aparte laag die via CSS over de afbeelding geplaatst kan worden.
  • Geef voor server-side gegenereerde quote-cards in social-media-stijl de voorkeur aan SVG met <text>-elementen — SVG-tekst schaalt goed en is selecteerbaar.
  • Gebruik @font-face om aangepaste display-lettertypen te laden in plaats van decoratieve typografie te rasteren.

Veelvoorkomende fouten

  • Banneradvertenties waarbij alle tekst (“Tijdelijk aanbod! Bestel nu!”) als JPEG is weergegeven, wazig bij 200% zoom.
  • Prijskaartjes waarbij ”€ 99/maand” deel uitmaakt van een kaartafbeelding in plaats van HTML-tekst.
  • Sectie-dividers met gestileerde tekst (“Onze diensten”) als PNG in plaats van een opgemaakte <h2>.
  • Calls-to-action die volledig op een afbeelding gebaseerd zijn, waarbij de alternatieve tekst de visuele copy dupliceert.
  • In marketingpagina’s gebruikte e-mailachtige screenshots waarbij de marketingtekst ook gewoon echte tekst had kunnen zijn.

Waarom het van belang is

Afbeeldingen van tekst zijn ook een vertaal- en SEO-mislukking: Google kan ze niet indexeren, Chrome kan ze niet vertalen en gebruikers van schermmagnificatie zien ze gepixeld. De oplossing is doorgaans eenvoudig: vervang de export door HTML. De weerstand zit in de workflow — ontwerpers leveren JPEG’s aan omdat die sneller te produceren zijn in Figma dan om te specificeren.