2.3.1 Elke afbeelding heeft een alt-attribuut

Alle afbeeldingen die u invoegt met behulp van een img-, een area- of een input type="image"-element hebben een alt-attribuut nodig. Dat is een toegankelijkheidsregel, maar ook een voorwaarde om aan de HTML-standaard te voldoen. De inhoud van het alt-attribuut hangt af van het type afbeelding.

Tips voor goede alt-teksten

  • Volzinnen zijn niet nodig. Vaak volstaan enkele woorden. Beperk de alt-tekst tot ongeveer 80 karakters.
  • Begin een alt-tekst niet met 'afbeelding van', 'hier ziet u' of 'foto:'.
  • De alt-tekst is niet de goede plaats voor de copyright-informatie van een foto. Gebruik hiervoor het title-attribuut (zie verder).
  • Vergeet niet om alt-teksten te vertalen op meertalige websites

Foto's en illustraties

Bij informatieve foto's en illustraties bevat de alt-tekst een beknopte beschrijving van wat afgebeeld is.

Voorbeelden

Zonsondergang op het strand

Elvis Presley

<img src="foto1.jpg" alt="Zonsondergang op het strand" />
<img src="foto2.jpg" alt="Elvis Presley" />

Grafische tekst

Herhaal in de alt-tekst letterlijk de tekst die grafisch is weergegeven.

HTML5

W3C

<img src="logo_HTML5.png" alt="HTML5" />
<img src="logo_W3C.gif" alt="W3C" />

Als de grafische tekst meer dan drie regels lang is of niet-lineair (zoals in een organogram), dan is een alt-tekst alleen niet toereikend. Pas in dat geval ook het ijkpunt over complexe afbeeldingen toe.

Grafische links

Als de afbeelding tegelijk een link is, krijgt het doel van de link voorrang op de beschrijving.

Voorbeeld (niet goed)

pijltje omhoog printer

<img src="pijl.gif" alt="Pijltje omhoog" />
<img src="print.jpg" alt="Printer" />
<input type="image" src="zoek.png" alt="Vergrootglas" />

Voorbeeld (goed)

<img src="pijl.gif" alt="Bovenkant pagina" />
<img src="print.jpg" alt="Afdrukken" />
<input type="image" src="zoek.png" alt="Zoeken" />

Noot: elke klikbare zone van een image map is ook een grafische link.

Voorbeeld

Provincie Antwerpen Provincie Oost-Vlaanderen Provincie West-Vlaanderen Provincie Limburg Provincie Vlaams-Brabant

<img alt="" src="map_vlaanderen.png" usemap="#vlaanderen" />
<map name="vlaanderen">
<area shape="circle" coords="287,56,51" href="http://www.provant.be/" alt="Provincie Antwerpen" />
<area shape="circle" coords="163,100,50" href="http://www.oost-vlaanderen.be" alt="Provincie Oost-Vlaanderen" />
<area shape="rect" coords="13,36,104,149" href="http://www.west-vlaanderen.be" alt="Provincie West-Vlaanderen" />
<area shape="rect" coords="358,48,443,167" href="http://www.limburg.be" alt="Provincie Limburg" />
<area shape="rect" coords="217,111,328,167" href="http://www.vlaamsbrabant.be" <br />alt="Provincie Vlaams-Brabant" />
</map>

Logo linkt naar homepage

Op veel websites kan je op het logo klikken om terug te keren naar de homepage. Het logo is dan ook een grafische link. In de alt-tekst is het bijgevolg belangrijker te zeggen dat het om een link naar de homepage gaat dan dat het een logo is. In onderstaand voorbeeld is het logo tevens grafische tekst.

Voorbeeld (goed)

Home VIOE - Vlaams Instituut voor het Onroerend Erfgoed

<a href="http://www.vioe.be/">
<img src="vioe-logo.png" alt="Home VIOE - Vlaams Instituut voor het Onroerend Erfgoed" /></a>

Decoratieve afbeeldingen

Decoratieve afbeeldingen zijn o.a.

  • onzichtbare 'spacers',
  • afgeronde hoeken en paginaranden,
  • sfeerfoto's.

Omdat decoratieve afbeeldingen geen informatiewaarde hebben, laat u de alt-tekst leeg.

Voorbeelden (niet goed)

<img src="spacer.gif" />
<img src="blue_fade.jpg" alt=" " />
<img src="border.png" alt="decoratie" />
<img src="top_left.gif" alt="Afgerond hoekje linksboven" />

Voorbeelden (goed)

<img src="spacer.gif" alt="" />
<img src="blue_fade.jpg" alt="" />
<img src="border.png" alt="" />
<img src="top_left.gif" alt="" />

Als een grote afbeelding opgeknipt is en de weergave met behulp van verschillende img-elementen is samengesteld, koppel de omschrijving dan aan het eerste onderdeel en laat de alt-tekst van de andere delen leeg.

Noot: decoratieve afbeeldingen voegt u bij voorkeur niet als afbeelding in maar als achtergrondafbeelding in CSS.

Fotogalerijen

Een fotogalerij is een reeks van vijf of meer foto's over hetzelfde onderwerp. Er is niets op tegen om iedere foto afzonderlijk te beschrijven met een alt-tekst, maar dat is niet verplicht om het label te behalen.

Fotogalerijen zijn vluchtig; de meeste fotoverslagen zijn niet meer dan een visuele impressie van een evenement dat voorbij is. Daarom mag u bovenaan zo'n galerij een algemene beschrijving geven van de fotoreeks. U omschrijft dan in enkele zinnen waar en wanneer de foto's genomen zijn en wat er zoal te zien is. De foto's zelf geeft u een lege alt-tekst (alt=""). Als de foto's een link bevatten naar een vergrote versie, geef ze dan een unieke alt-tekst, zoals alt="Foto 1 (groot)", alt="Foto 2 (groot") etc.

Captcha

Een grafische captcha is een beveiligingstechniek waarbij de bezoeker een code moet overtypen uit een afbeelding. Dit is niet toegankelijk voor blinden, slechtzienden en veel dyslectici. Bij voorkeur gebruikt u een spam-beveiligingstechniek zonder captcha. Lukt dat niet, kies dan voor een implementatie die voor iedereen toegankelijk is. Mogelijke alternatieven voor een grafische captcha hebben we opgesomd in een apart artikel Spam vermijden zonder captcha.

Captcha met vervormde woorden very en goopme

Uitzondering voor tests

In een test of oefening is het niet altijd mogelijk de juiste alt-tekst aan een afbeelding te koppelen. De test of oefening zou ongeldig worden. Dit leidt soms helaas tot onoverkomelijke problemen. Voorbeeld: een taalcursus waar de oefening bestaat uit het benoemen van afbeeldingen.

Opmerking

Het title-attribuut heeft geen functie als het gaat om toegankelijkheid van afbeeldingen. Screenreaders letten enkel op het alt-attribuut. Toetsenbordgebruikers krijgen de inhoud van het title-attribuut evenmin te zien. U kunt het gebruiken voor niet-essentiële informatie die enkel verschijnt als de muis over de afbeelding beweegt.

Zelf testen

  • Is er voor elke afbeelding en image map area een alt-attribuut aanwezig?
  • Klopt de inhoud van de alt-tekst met de afbeelding?
    • Ja, op beide vragen; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.

Web developer tool bar in Firefox

Images > display alt attributes
(Bij elke afbeelding komt de alt-tekst te staan.)

Wave toolbar voor Firefox

Errors, Features and Alerts
(Bij afbeeldingen met een alt-tekst wordt het groene alt-icoon getoond samen met de alt-tekst; bij afbeeldingen zonder alt-tekst verschijnt een rood icoon met een schuine witte streep.)

Accessibility toolbar in Internet Explorer

Afbeeldingen> Toon afbeeldingen
( Elke afbeelding wordt omlijnd en de alt-tekst komt erbij te staan.)