Kennisbank succescriteria: 1.1.1 Niet-tekstuele content

Afbeeldingen die puur decoratief zijn voegen geen informatie toe. Ze maken een pagina aantrekkelijker, maar zijn niet echt nodig om een tekst of pagina te begrijpen. Mensen die gebruik maken van schermlezers, hebben eigenlijk niets aan deze plaatjes. Zorg daarom dat decoratieve afbeeldingen worden verborgen voor schermlezers.

Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

In de code ziet dat er zo uit: 

Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het alt-attribuut in het <​img​>-element worden leeg gelaten. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

In de code ziet dat er zo uit: 

In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Deze afbeeldingen moeten een tekstalternatief hebben.

Dit zijn bijvoorbeeld:

Voor afbeeldingen die ook als link worden gebruikt, is het belangrijk dat het tekstalternatief het doel van de link beschrijft. Het tekstalternatief is ook direct de linktekst. Zonder tekstalternatief heeft de link geen linktekst.

Een tekstalternatief voor een <​​​img​​>-element wordt gegeven met het alt-attribuut.

In de code ziet dat er zo uit: 

Complexe afbeeldingen, zoals infographics, grafieken of diagrammen voegen veel informatie toe aan een tekst of pagina. Ze vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben. Omdat er vaak erg veel informatie op de afbeelding staat, is het moeilijk om alles beknopt te beschrijven in een kort tekstalternatief. In dat geval is het nuttig om daarnaast ook een meer uitgebreide beschrijving te geven in de omringende tekst. Een handige manier om de visuele informatie ook in tekst aan te bieden, is bijvoorbeeld door de informatie helemaal uit te schrijven. Als het gaat om een diagram of grafiek, gebruik dan bijvoorbeeld een datatabel.

In de code ziet dat er zo uit:

Je kunt ook een link bij de afbeelding plaatsen die verwijst naar een andere pagina met een uitgebreide beschrijving van de informatie op de afbeelding. Zet deze link direct voor of direct na de afbeelding.

Afbeeldingen die informatie overdragen noemen we informatieve afbeeldingen. Informatieve afbeeldingen zijn belangrijk voor het begrijpen van een tekst of pagina. Deze afbeeldingen vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben dat nauwkeurig beschrijft of uitlegt wat er op de afbeelding te zien is. Beschrijf dit in een korte, duidelijke zin. Vermijd daarmee te algemene termen en probeer specifiek te zijn over wat de afbeelding weergeeft. Deze tekst moet beschrijvend genoeg zijn, zodat het de afbeelding kan vervangen als je die niet kunt zien.

Een tekstalternatief voor een <​​img​>-element wordt gegeven met het alt-attribuut.

In de code ziet dat er zo uit: