1.1.1 Niet-tekstuele content

Succescriterium 1.1.1 Niet-tekstuele content

Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.

Bedieningselementen, invoer: Als niet-tekstuele content een bedieningselement is of gebruikersinvoer accepteert, dan heeft deze een naam die het doel ervan beschrijft. (We verwijzen naar succescriterium 4.1.2 voor aanvullende eisen ten aanzien van bedieningselementen en content die gebruikersinvoer accepteren.)

Op tijd gebaseerde media: Als niet-tekstuele content op tijd gebaseerde media is, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content. (We verwijzen naar Richtlijn 1.2 voor aanvullende eisen ten aanzien van media.)

Test: Als niet-tekstuele content een test of oefening is die, als ze door middel van tekst gepresenteerd wordt onjuist zou zijn, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.

Zintuiglijk: Als niet-tekstuele content primair is bedoeld om een specifieke zintuiglijke ervaring te creëren, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.

CAPTCHA: Als het doel van niet-tekstuele content is om te bevestigen dat content wordt gebruikt door een persoon in plaats van een computer, dan worden tekstalternatieven geleverd die het doel van de niet-tekstuele content identificeren en beschrijven. En er worden alternatieve vormen van CAPTCHA aangeboden gebruikmakend van uitvoermodes voor verschillende soorten van zintuiglijke perceptie om tegemoet te komen aan verschillende functiebeperkingen.

Decoratie, opmaak, onzichtbaar: Als niet-tekstuele content puur decoratief is, slechts voor visuele opmaak wordt gebruikt, of niet aan gebruikers wordt gerepresenteerd, dan wordt het op zo’n manier geïmplementeerd dat het genegeerd kan worden door hulptechnologie.

Niet-tekstuele content begrijpen (Engelstalig)

Geef alle niet-tekstuele content een tekstalternatief dat hetzelfde doel dient. Niet-tekstuele content is alles wat geen gewone tekst is. Denk hierbij aan afbeeldingen (zoals foto’s, illustraties en iconen), emoji, afbeeldingen van tekst, geluiden en andere elementen die niet uit tekst bestaan.

Voor sommige content geldt een aangepaste eis:

Een bedieningselement of invoerveld zonder tekst heeft een naam nodig die het doel beschrijft.
Bij mediabestanden, tests, kunst en muziek is een korte omschrijving genoeg. Die moet vertellen wat het is.
Een CAPTCHA heeft een tekstalternatief nodig dat het doel noemt. Er is ook een alternatieve CAPTCHA die een ander zintuig gebruikt.
Decoratie, opmaak en onzichtbare content verberg je voor hulptechnologie.

Mensen met een visuele beperking kunnen deze niet-tekstuele content niet (of niet goed) zien. Zonder tekstalternatief missen zij informatie. Schermlezers gebruiken het tekstalternatief om de content te presenteren. Zo kan voorleessoftware tekst omzetten in spraak en kan een brailleleesregel tekst vertalen naar braille. Voor geluid geldt hetzelfde: mensen die doof of slechthorend zijn, lezen dan het tekstalternatief.

Hoe pas je dit toe?

Geef informatieve afbeeldingen een tekstalternatief met dezelfde informatie als de afbeelding op die plek. Beschrijf dus wat de afbeelding hier vertelt.
Staat er belangrijke tekst in een afbeelding? Neem die tekst over in het tekstalternatief.
Geeft een afbeelding informatie met kleur? Noem die informatie ook in het tekstalternatief.
Geef functionele afbeeldingen een tekstalternatief dat beschrijft waar de link naartoe gaat of wat het resultaat van de actie is.
Geef complexe afbeeldingen, zoals grafieken, een kort tekstalternatief dat zegt waar de afbeelding over gaat. Zet de volledige uitleg in de tekst bij de afbeelding of op een aparte pagina. Verwijs in het korte tekstalternatief naar die uitleg, of zet direct naast de afbeelding een link ernaartoe.
Laten afbeeldingen samen één ding zien, zoals 4 van de 5 sterren? Geef dan één afbeelding het tekstalternatief voor de hele groep en verberg de rest.
Geef emoji, symbolen en ASCII-art een tekstalternatief, of zet de betekenis in de tekst ernaast. Gebruik geen opgemaakte Unicode-letters als tekst.
Geef video, audio, tests, kunst en muziek minstens een korte omschrijving die zegt wat het is.
Geef een CAPTCHA een tekstalternatief dat het doel noemt. Bied ook een tweede vorm aan voor een ander zintuig.
Verberg decoratieve afbeeldingen voor hulptechnologie.
Verandert een afbeelding? Laat het tekstalternatief dan meeveranderen.

Lees het artikel over tekstalternatieven bij een afbeelding

Voor wie is dit belangrijk?

Mensen die een schermlezer gebruiken.
Mensen die blind of slechtziend zijn.
Mensen die doof of slechthorend zijn.

Wie is verantwoordelijk?

Hoe toets je dit?

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
- Bepaal voor elke afbeelding:
  - Of de afbeelding informatie overbrengt (informatief)
  - Of die informatie niet in een kort tekstalternatief past (complex)
  - Of de afbeelding wordt gebruikt als link of knop (functioneel)
  - Of de afbeelding puur decoratief is (decoratief)
  - Of de afbeelding verandert, na een actie of automatisch
Controleer voor elke informatieve afbeelding:
- Of de afbeelding een tekstalternatief heeft
- Of het tekstalternatief dezelfde informatie geeft als de afbeelding
- Bij een afbeelding met tekst die informatie overbrengt:
  - Of het tekstalternatief dezelfde tekst bevat
- Bij een afbeelding die informatie met kleur overbrengt:
  - Of het tekstalternatief die informatie ook bevat
Controleer voor elke complexe afbeelding:
- Of de afbeelding een kort tekstalternatief heeft
- Of het korte tekstalternatief het onderwerp van de afbeelding benoemt (bijvoorbeeld “Grafiek omzet 2020-2024”)
- Of er een uitgebreide beschrijving is
- Of de uitgebreide beschrijving dezelfde informatie geeft als de afbeelding
Controleer voor elke uitgebreide beschrijving of minstens één van de volgende waar is:
- Of het korte tekstalternatief naar de beschrijving verwijst (bijvoorbeeld “Grafiek omzet 2020-2024, uitleg onder de grafiek”)
- Of er direct naast de afbeelding een link of knop naar de beschrijving staat
Controleer voor elke afbeelding die wordt gebruikt als link:
- Of de link een naam heeft, via de afbeelding of via de link zelf
- Of de naam beschrijft waar de link naar verwijst
Controleer voor elke afbeelding die wordt gebruikt als knop:
- Of de knop een naam heeft, via de afbeelding of via de knop zelf
- Of de naam beschrijft wat het resultaat van de actie is
Controleer voor elke decoratieve afbeelding met een tekstalternatief:
- Of het tekstalternatief beschrijft wat er op de afbeelding te zien is
Test elke afbeelding die verandert en controleer:
- Of het tekstalternatief meeverandert met de afbeelding

Test 2: Code van afbeeldingen

Zoek in de code naar informatieve en complexe <img>-elementen en controleer:
- Of het element een tekstalternatief heeft (zie De toegankelijke naam bepalen)
- Of het element en de bovenliggende elementen geen aria-hidden="true" hebben
- Of het element geen role="presentation" of role="none" heeft
Zoek in de code naar decoratieve <img>-elementen zonder beschrijvend tekstalternatief en controleer of minstens één van de volgende waar is:
- Of het alt-attribuut leeg is (alt="") en er geen gevuld title-attribuut is
- Of het element aria-hidden="true" heeft
- Of het element role="presentation" of role="none" heeft
Zoek in de code naar informatieve <svg>-elementen en controleer:
- Of het element een tekstalternatief heeft (zie De toegankelijke naam bepalen)
Zoek in de code naar <svg>-elementen in links en knoppen en controleer:
- Of de link of knop een toegankelijke naam heeft, via het <svg>-element of via het element zelf
Zoek in de code naar decoratieve <svg>-elementen en controleer:
- Of het element aria-hidden="true" heeft
Zoek in de code naar image maps (<map>– en <area>-elementen) en controleer:
- Of het <img>-element met usemap een tekstalternatief heeft
- Of elk <area>-element met een href een toegankelijke naam heeft
- Of het alt-attribuut van elk <area>-element beschrijft waar de link naartoe gaat
Zoek in de code naar informatieve <canvas>-elementen en controleer:
- Of het element een tekstalternatief heeft (zie De toegankelijke naam bepalen)
Zoek in de code naar decoratieve <canvas>-elementen en controleer:
- Of het element aria-hidden="true" heeft
Zoek in de code naar iconen die met CSS worden ingevoegd (icon fonts, ::before of ::after met content) en controleer:
- Bij een informatief icoon:
  - Of het element een tekstalternatief heeft (zie De toegankelijke naam bepalen)
- Bij een decoratief icoon:
  - Of het element van het icoon aria-hidden="true" heeft
Zoek in de code naar elementen met een informatieve background-image en controleer of minstens één van de volgende waar is:
- Of het element role="img" heeft met aria-label of aria-labelledby
- Of er tekst in de code staat die dezelfde informatie geeft (bijvoorbeeld verborgen tekst)
Zoek in de code naar <input type="image">-elementen en controleer:
- Of het element een tekstalternatief heeft (zie De toegankelijke naam bepalen)

Let op: Alleen als de uitgebreide beschrijving niet via het korte tekstalternatief of een link direct naast de afbeelding te vinden is.

Zoek in de code naar uitgebreide beschrijvingen van complexe afbeeldingen en controleer:
- Of aria-describedby op de afbeelding verwijst naar het id van de beschrijving

Test 3: Unicode en ASCII-art

Inventariseer de pagina
- Bepaal welke Unicode-tekens of symbolen worden gebruikt om informatie over te brengen:
  - Emoji (😉, 👍)
  - Vinkjes en kruisjes (✓, ✗)
  - Pijlen (→, ←, ↑, ↓)
  - Sterren voor beoordelingen (★, ☆)
  - Andere symbolen met een eigen betekenis
- Bepaal welke ASCII-art er is:
  - Emoticons (:-), :-D)
  - Figuren of tekeningen van tekens
- Bepaal welke tekens tekst nabootsen:
  - Opgemaakte Unicode-letters (𝐯𝐞𝐭 of 𝘤𝘶𝘳𝘴𝘪𝘦𝘧)
Schakel een schermlezer in
Controleer voor elk teken dat informatie overbrengt of minstens één van de volgende waar is:
- Of de schermlezer een naam of tekstalternatief voorleest die past bij de betekenis in deze context
- Of de betekenis in de tekst ernaast staat
Controleer voor elke ASCII-art of minstens één van de volgende waar is:
- Of de schermlezer een tekstalternatief voorleest dat beschrijft wat de ASCII-art weergeeft
- Of er direct voor of na de ASCII-art een tekst staat die beschrijft wat de ASCII-art weergeeft
Controleer voor elk teken dat tekst nabootst:
- Of de schermlezer de bedoelde tekst voorleest

Test 4: CAPTCHA’s

Verken de pagina
- Bepaal welke CAPTCHA’s er zijn
Controleer voor elke CAPTCHA:
- Of de CAPTCHA een tekstalternatief heeft dat de CAPTCHA identificeert en het doel beschrijft (bijvoorbeeld “CAPTCHA: Voer de tekens in die je ziet”)
- Bij een CAPTCHA die geen tekst gebruikt:
  - Of er een tweede vorm van de CAPTCHA is die een ander zintuig gebruikt (bijvoorbeeld een audio-CAPTCHA naast een visuele CAPTCHA)

Test 5: Mediabestanden

Inventariseer de pagina
- Bepaal welke mediabestanden er zijn:
  - Geluidsfragmenten (bijvoorbeeld podcasts)
  - Filmpjes zonder geluid (bijvoorbeeld animaties zonder geluid)
  - Filmpjes met geluid
  - Live filmpjes met geluid
Bekijk of beluister elk mediabestand en controleer:
- Of er een korte omschrijving is die het mediabestand identificeert (bijvoorbeeld een titel of korte beschrijving)
- Of de omschrijving zichtbaar bij het mediabestand staat of in de code aan het mediabestand is gekoppeld
- Of de omschrijving past bij de inhoud van het mediabestand

Test 6: Overig

Verken de pagina
- Bepaal welke andere niet-tekstuele content er is:
  - <object>-elementen
  - <embed>-elementen
  - Wiskundige formules als afbeelding
  - Grafieken en visualisaties met JavaScript
  - Laadiconen en andere animaties die een status tonen
  - Geluiden die informatie geven (bijvoorbeeld een signaal bij een goed antwoord)
  - Tests of oefeningen die met tekst niet zouden werken (bijvoorbeeld een gehoortest)
  - Content voor een zintuiglijke ervaring (bijvoorbeeld een kunstwerk of muziekstuk)
Controleer voor elke test, oefening en content voor een zintuiglijke ervaring:
- Of er een korte omschrijving is die de content identificeert
Controleer voor alle andere niet-tekstuele content:
- Of de content een tekstalternatief heeft
- Of het tekstalternatief dezelfde informatie geeft of hetzelfde doel dient

Belangrijk om te weten

Het tekstalternatief geeft dezelfde informatie als de afbeelding op deze plek. Dezelfde afbeelding kan op een andere pagina een ander tekstalternatief nodig hebben.
Een decoratieve afbeelding met een beschrijvend tekstalternatief wordt niet afgekeurd. De afbeelding wordt dan behandeld als informatief. Een tekstalternatief dat niets beschrijft, zoals een bestandsnaam of “afbeelding”, wordt wel afgekeurd.
Staat de informatie van een afbeelding al in de tekst direct ernaast, of in het tekstalternatief van een andere afbeelding direct ernaast? Dan is de afbeelding decoratief (bijvoorbeeld een icoon naast de linktekst, of de overige sterren van een beoordeling met één tekstalternatief).
Bij twijfel tussen informatief en decoratief: zou een ziende gebruiker iets missen als de afbeelding er niet was? Zo nee, dan is de afbeelding decoratief.
Een afbeelding die deel is van een test of oefening, of die bedoeld is voor een zintuiglijke ervaring (bijvoorbeeld een kunstwerk), valt onder de test Overig.
Een datatabel bij een grafiek telt ook als uitgebreide beschrijving.

Beoordeling

Afbeeldingen

Informatieve, functionele en complexe afbeeldingen moeten een tekstalternatief hebben
Het tekstalternatief van informatieve afbeeldingen moet dezelfde informatie geven als de afbeelding
Bij een afbeelding die als link wordt gebruikt, moet de link via de afbeelding of via de link zelf een naam hebben die beschrijft waar de link naar verwijst
Bij een afbeelding die als knop wordt gebruikt, moet de knop via de afbeelding of via de knop zelf een naam hebben die beschrijft wat het resultaat van de actie is
Het korte tekstalternatief van complexe afbeeldingen moet het onderwerp van de afbeelding benoemen
De uitgebreide beschrijving van complexe afbeeldingen moet dezelfde informatie geven als de afbeelding
Voor alle uitgebreide beschrijvingen moet minstens één van de volgende zaken gelden:
- Het korte tekstalternatief verwijst naar de beschrijving
- De beschrijving is in de code aan de afbeelding gekoppeld
- Er staat direct naast de afbeelding een link of knop naar de beschrijving
Voor alle decoratieve afbeeldingen moet minstens één van de volgende zaken gelden:
- De afbeelding wordt genegeerd door hulptechnologie
- Het tekstalternatief beschrijft wat er op de afbeelding te zien is
Bij een afbeelding met tekst die informatie overbrengt, moet het tekstalternatief dezelfde tekst bevatten
Bij een afbeelding die verandert, moet het tekstalternatief meeveranderen

Code van afbeeldingen

Informatieve afbeeldingen mogen niet verborgen zijn met aria-hidden="true", role="presentation" of role="none"
Het <img>-element met usemap-attribuut moet een tekstalternatief hebben
<area>-elementen moeten een tekstalternatief hebben
<input type="image">-elementen moeten een tekstalternatief hebben

Unicode en ASCII-art

Voor alle tekens die informatie overbrengen (Unicode-tekens, symbolen en emoji), moet minstens één van de volgende zaken gelden:
- Het teken heeft een tekstalternatief dat past bij de betekenis in deze context
- De betekenis staat in de tekst ernaast
Voor alle ASCII-art moet minstens één van de volgende zaken gelden:
- De ASCII-art heeft een tekstalternatief dat beschrijft wat de ASCII-art weergeeft
- Direct voor of na de ASCII-art staat een tekst die beschrijft wat de ASCII-art weergeeft
Tekens die tekst nabootsen moeten een tekstalternatief hebben met de bedoelde tekst

CAPTCHA

CAPTCHA’s moeten een tekstalternatief hebben dat de CAPTCHA identificeert en het doel beschrijft
Niet-tekstuele CAPTCHA’s moeten een alternatieve vorm hebben die een ander zintuig gebruikt

Media

Mediabestanden moeten een korte omschrijving hebben die het mediabestand identificeert

Overig

Niet-tekstuele content moet een tekstalternatief hebben
Bij een test of oefening die met tekst niet zou werken, en bij content voor een zintuiglijke ervaring, moet het tekstalternatief de content minstens identificeren
Bij alle andere niet-tekstuele content moet het tekstalternatief dezelfde informatie geven of hetzelfde doel dienen

Bronnen

WCAG 2.2 – Succescriterium 1.1.1 Niet-tekstuele content
Images Tutorial | Web Accessibility Initiative (WAI) | W3C (Engelstalig)
WebAim: Alternative Text (Engelstalig)

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent