Niet-tekstuele content – Niek Derksen

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 passend tekstalternatief. Denk hierbij aan afbeeldingen (zoals foto’s, illustraties en iconen), voortgangsbalken en andere elementen die niet uit tekst bestaan.

Uitzonderingen zijn:

niet-tekstuele bedieningselementen en invoer met een toegankelijke naam
op tijd gebaseerde media met een korte beschrijving
een test of oefening
niet-tekstuele content die bedoeld is om een specifieke zintuiglijke ervaring te creëren
CAPTCHA’s
niet-tekstuele content die puur decoratief is

Mensen met een visuele beperking kunnen deze niet-tekstuele content niet (of niet goed) zien. Daarom is het belangrijk om bij elke niet-tekstuele content een geschreven alternatief te maken. Schermlezers gebruiken het tekstalternatief om de content te presenteren. Zo kan voorleessoftware tekst omzetten in spraak en kan een brailleleesregel tekst vertalen naar braille.

Hoe pas je dit toe?

Geef alle niet-tekstuele content een tekstalternatief dat een gelijkwaardig doel dient.
- Geef informatieve afbeeldingen een tekstalternatief dat beschrijft wat er op de afbeelding te zien is.
- Geef functionele afbeeldingen een tekstalternatief dat beschrijft wat het doel van de link is of beschrijft wat het resultaat van de actie is.
- Geef complexe afbeeldingen een tekstalternatief en een uitgebreide beschrijving in de omringende tekst.
Zorg dat alle <img>-elementen een <alt>-attribuut hebben.
Zorg dat informatieve en functionele <svg>-elementen een role="img" hebben.
Zorg dat informatieve en functionele <svg>-elementen een title-element hebben als eerste content.

Tekstalternatief

Een tekstalternatief is een tekstuele beschrijving van niet-tekstuele content dat wel uit tekst bestaat. Je voegt deze beschrijving toe aan afbeeldingen of andere niet-tekstuele content.

Zorg dat een tekstalternatief:

de informatie beschrijft die belangrijk is voor de context en het doel van de afbeelding;
maximaal 150 tekens gebruikt
niet begint met met “Afbeelding van” of “Foto van”

Tekstalternatief toevoegen:

Bij een <img>-element voeg je een tekstalternatief toe met het alt-attribuut.
Bij een <svg>-element heb je verschillende mogelijkheden voor een tekstalternatief. De beste aanpak is:
- Voeg een <title>-element toe als eerste inhoud binnen het <svg>-element.
- Gebruik daarnaast het aria-labelledby-attribuut op het <svg>-element.

Lees het artikel over tekstalternatief toevoegen

Lees het artikel over tekstalternatieven bij een afbeelding

Geef niet-tekstuele content een tekstalternatief dat een gelijkwaardig doel dient.

Uitzonderingen

Geef media een korte tekstuele beschrijving.
Zorg bij CAPTCHA’s voor een alternatieve vorm die afhankelijk is van andere zintuigen.
Zorg dat decoratieve afbeeldingen kunnen worden genegeerd door hulptechnologieën.

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?

Redacteur
Ontwikkelaar

Hoe toets je dit?

Testprocedure

Test 1: Afbeeldingen

Inventariseer de pagina
- Bepaal welke afbeeldingen er allemaal zijn:
  - Foto’s
  - Illustraties
  - Iconen
  - Logo’s
  - Grafieken en diagrammen
  - Infographics
  - Kaarten
  - Productfoto’s
  - Schermafbeeldingen
  - Handleidingen
  - Layout-afbeeldingen
  - Geanimeerde afbeeldingen
  - Thumbnails
  - Abstracte afbeeldingen
  - Patronen
  - Enz.
- Bepaal voor iedere afbeelding:
  - Of het informatie overdraagt
  - Of het onderdeel is van een link of knop
  - Of het puur decoratief is
Controleer voor elke afbeelding die informatie overdraagt:
- Of het tekstalternatief beschrijft wat er op de afbeelding te zien is
- Of het tekstalternatief de (informatieve) tekst op een afbeelding benoemd (indien aanwezig)
- Of de afbeelding kan worden beschreven in 150 tekens
Controleer voor elke complexe afbeelding (die niet volledig beschreven kan worden in 150 tekens):
- Of er een kort tekstalternatief is die de afbeelding beschrijft
- Of er een uitgebreide beschrijving beschikbaar is in de omliggende content
- Of de uitgebreide beschrijving alle belangrijke informatie bevat
Controleer voor elke afbeelding die onderdeel is van een link:
- Of het tekstalternatief beschrijft waar de link naar verwijst
Controleer voor elke afbeelding die onderdeel is van een knop:
- Of het tekstalternatief beschrijft wat het resultaat van de actie is
Controleer voor elke afbeelding die puur decoratief is:
- Of het alt-attribuut leeg is (alt="")
- Of er geen title-attribuut aanwezig is
- Voor decoratieve SVG’s en icon fonts: of aria-hidden="true" is gebruikt
- Of de afbeelding wordt genegeerd door een schermlezer

Test 2: Code van afbeeldingen

Zoek in de broncode naar alle <img>-elementen en controleer:
- Of het alt-attribuut aanwezig is
Zoek in de broncode naar <svg>-elementen en controleer:
- Of het <title>-element aanwezig is als eerste onderliggende element
- Of role="img" is toegevoegd
- Of het aria-labelledby-attribuut verwijst naar het title-element
- Voor decoratieve SVG’s: of aria-hidden="true" is gebruikt
Zoek in de broncode naar image maps (<map>– en <area>-elementen) en controleer:
- Of het alt-attribuut aanwezig is
- Of het tekstalternatief beschrijft wat er op de afbeelding te zien is
Zoek in de broncode naar <canvas>-elementen (indien aanwezig) en controleer:
- Of role="img" is toegevoegd
- Of aria-label of aria-labelledby een tekstalternatief biedt
Zoek in de broncode naar Icon Fonts en controleer:
- Of informatieve iconen een tekstalternatief hebben
- Of decoratieve iconen worden verborgen met aria-hidden="true"

Test 3: Controleer CAPTCHA’s

Zoek CAPTCHA’s op de pagina en controleer:
- Of het alt-attribuut aanwezig is
- Of het tekstalternatief de functie van de CAPTCHA beschrijft
- Of een alternatieve methode beschikbaar is
- Of de alternatieve methode toegankelijk is in de directe context

Test 4: Controleer multimediabestanden

Zoek geluidsfragmenten en filmpjes op de pagina en controleer:
- Of er een korte tekstuele introductie beschikbaar is

Belangrijk om te weten

Het tekstalternatief moet hetzelfde doel dienen als de afbeelding
Als een afbeelding en tekst naast elkaar dezelfde informatie overdragen, dan kan de afbeelding als decoratief worden beoordeeld

Beoordeling

Informatieve en functionele afbeeldingen moeten een tekstalternatief hebben
Het tekstalternatief van afbeeldingen die informatie overdragen moet beschrijven wat er op de afbeelding te zien is.
Het tekstalternatief van afbeeldingen die ook een link zijn moet beschrijven waar de link naar verwijst
Het tekstalternatief van afbeeldingen die ook een knop zijn moet beschrijven wat het resultaat van de actie is
Het tekstalternatief van complexe afbeeldingen die informatie overdragen moet beknopt beschrijven wat er op de afbeelding te zien is
De uitgebreide beschrijving van complexe afbeeldingen die informatie overdragen moet nauwkeurig beschrijven wat er op de afbeelding te zien is
Als er tekst in een afbeelding staat, dan moet het tekstalternatief precies dezelfde tekst bevatten
Afbeeldingen die puur decoratief zijn moeten worden genegeerd door een schermlezer

<img>-elementen moeten een alt-attribuut hebben
<svg>-elementen van informatieve en functionele afbeeldingen moeten een role="img" hebben
<svg>-elementen van informatieve en functionele afbeeldingen moeten een <title>-element hebben als eerste content (die wordt gekoppeld met het aria-labelledby-attribuut)
Tekst in <svg>-elementen moet worden gekoppeld met het aria-labeledby-attribuut

CAPTCHA’s moeten een tekstalternatief hebben dat hun functie beschrijft.
CAPTCHA’s moeten een toegankelijke alternatieve methode hebben die beschikbaar is in de directe context.

Multimediabestanden moeten een korte tekstuele beschrijving hebben

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