Afbeeldingen

Bij gebruik van niet-tekstuele content op een pagina (zoals afbeeldingen, maar ook knoppen en invoervelden) hoort er een tekstueel alternatief worden gegeven.

Afbeeldingen die zijn voorzien van een tekstueel alternatief zijn toegankelijker voor mensen met een visuele beperking. Zij kunnen afbeeldingen niet visueel waarnemen maar door een beschrijving te geven krijgen zij via voorleessoftware of braille-uitvoer toch dezelfde informatie.

Alt-teksten

Een tekstueel alternatief voor afbeeldingen wordt doorgaans gegeven met behulp van het alt-attribuut. De inhoud van het alt-attribuut hangt af van het doel van afbeelding.

<img src="hond.jpg" alt="Hond speelt met een bal">

Alle img-, een area- of een input type=”image”-element moeten worden voorzien van een alt-attribuut.

Informatieve afbeelding

Een informatieve afbeelding is een afbeelding die een informatie overdraagt. Geef een informatieve afbeelding een tekstueel alternatief dat beschrijvend van aard is. De tekst moet verwoorden wat er op de afbeelding te zien is.

Geef afbeeldingen die als link worden gebruikt een alt-tekst die het doel van de link beschrijft.

Decoratieve afbeeldingen

Afbeeldingen zijn decoratief als deze niet noodzakelijk zijn voor het begrijpen van de tekst.

Gebruik voor een afbeelding die alleen ter decoratie wordt geplaatst geen alternatieve tekst. Het alt-attribuut wordt dan wel geplaatst maar het mag geen tekst bevatten.

<img src="horizontale-lijn.jpg" alt="" />

Vaak is het beter om decoratieve afbeeldingen met een stylesheet (CSS) te plaatsen.

Complexe afbeeldingen

Complexe afbeeldingen, zoals bijvoorbeeld een grafiek of infographic, kunnen doorgaans niet beknopt worden beschreven. Beschrijf complexe afbeeldingen in de omringende tekst of op een aparte pagina. Soms is een samenvatting van de grafiek voldoende.

Afbeelding als onderdeel van een link

Als een afbeelding wordt gebruikt naast een link (bijvoorbeeld een icoon om een categorie aan te duiden), dan is dit een decoratieve afbeelding. De alt-tekst zal namelijk gelijk zijn aan de linktekst. Dit wordt dubbel voorgelezen door een screenreader.

<a href="wcag.nl"><img src="logo-wcag.nl" alt="" />WCAG.nl</a>

Afbeeldingen van tekst

Afbeeldingen van tekst zijn voor mensen met een visuele beperking niet voldoende toegankelijk. Gebruik daarom geen afbeeldingen van tekst, tenzij het niet anders kan. In de meeste gevallen kan dezelfde visuele weergave worden bereikt met CSS.

Tekst kan gemakkelijk worden vergroot zonder dat de kwaliteit achteruit gaat.

Flitsen

Felle, flitsende beelden kunnen epileptische aanvallen veroorzaken. Gebruik daarom geen flitsende content.

Testen

  1. Controleer of alle informatieve afbeeldingen zijn voorzien van een gelijkwaardig tekstueel alternatief.
  2. Controleer of alle aanklikbare afbeeldingen zijn voorzien van een tekstueel alternatief dat de bestemming beschrijft.
  3. Controleer of decoratieve afbeeldingen zijn voorzien van een leeg alt-attribuut of zijn plaatst met een stylesheet (CSS).
  4. Controleer of er geen afbeeldingen van tekst zijn gebruikt.
  5. Controleer of er geen flitsende content aanwezig is.

Gerelateerde succescriteria

  • 1.1.1 Niet-tekstuele content (A)
  • 1.4.5 Afbeeldingen van tekst (AA)
  • 1.4.9 Afbeeldingen van tekst (geen uitzondering) (AAA)
  • 2.3.1 Drie flitsen of onder de drempelwaarde (A)