Alternatieve tekst voor afbeeldingen

Een decoratieve krul en een verkoopgrafiek gebruiken allebei het img-element, maar de juiste alt-tekst is voor de eerste een lege string en voor de tweede een volledige zin.

Waar alt-tekst voor dient

Een schermlezer zet een pagina om in spraak of braille. Bij een afbeelding kan die niet naar de pixels kijken en leest daarom het attribuut alt. Dezelfde tekst verschijnt als een afbeelding niet laadt en wordt door een zoekmachine of tekstbrowser ontvangen. WCAG 2.2 zet dit voorop: succescriterium 1.1.1 Niet-tekstuele content, niveau A, vraagt dat elke informatieve afbeelding, pictogram of grafiek een tekstalternatief heeft dat hetzelfde doel dient.

De sleutelwoorden zijn ‘hetzelfde doel’. Alt-tekst is geen bijschrift en geen opsomming van alles in beeld. Vraag wat een ziende lezer op deze plek uit de afbeelding haalt en schrijf dat op. Een foto van een brood op de homepage van een bakkerij vraagt misschien alleen ‘Zuurdesembrood, gesneden’. Dezelfde foto in een artikel over korstkleur vraagt misschien ‘Zuurdesembrood met een donkere, bijna zwarte korst en een open kruim’. Hetzelfde bestand, andere taak, andere tekst.

Vier veelvoorkomende gevallen

De W3C-handleiding voor afbeeldingen verdeelt de meeste beelden in enkele groepen. Informatieve afbeeldingen, zoals een foto of eenvoudig schema, krijgen een korte beschrijving van wat ze tonen. Decoratieve afbeeldingen, zoals een scheidingslijn of achtergrondtextuur, krijgen een lege alt, geschreven als alt="", wat hulptechnologie vertelt ze over te slaan. Functionele afbeeldingen, zoals een logo met een link naar home of een vergrootglas dat een zoekopdracht verstuurt, krijgen tekst die vertelt wat er gebeurt: ‘Corner Bakery home’ of ‘Zoeken’, niet ‘logo’ of ‘vergrootglas’. Afbeeldingen van tekst krijgen de woorden uit de afbeelding.

Het attribuut weglaten is niet hetzelfde als het leeg laten. Zonder alt vallen sommige schermlezers terug op de bestandsnaam, zodat een luisteraar iets als ‘IMG onderstrepingsteken 4032 punt jpeg’ hoort. Een lege alt is een bewuste keuze die zegt ‘hier is niets te zien’. Houd bij een complexe grafiek de alt kort (‘Staafdiagram met maandverkopen, hieronder beschreven’) en zet de getallen in een tabel of alinea ernaast, waar iedereen ze kan lezen.

Afbeeldingen zonder img-element

Afbeeldingen kunnen ook als inline-SVG of CSS-achtergrond verschijnen. Een CSS-achtergrond heeft helemaal geen plek voor alt-tekst en hoort dus alleen decoratief te zijn; alles met betekenis hoort in de HTML. Een puur decoratieve inline-svg kun je verbergen met aria-hidden="true", zoals je in hoofdstuk 6 leert. WCAG stelt geen tekenlimiet voor alt-tekst, maar de W3C-handleiding komt steeds op hetzelfde advies terug: wees kort en geef wat in deze context telt. Als je drie zinnen schrijft, hoort de inhoud waarschijnlijk in de paginatekst waar iedereen die kan lezen.

Je kunt je eigen pagina's zonder speciale software controleren. Bekijk de paginabron en zoek naar <img: elke treffer moet een alt-attribuut hebben, leeg of niet. De ontwikkelaarstools van grote browsers hebben ook een toegankelijkheidspaneel dat de uiteindelijke naam van elke afbeelding toont. Die namen achter elkaar zonder context lezen is een goede test. Als een lijst ‘afbeelding, afbeelding, grafiek, logo’ zegt, hoort een schermlezergebruiker precies dat.