Alt-teksten: alternatief voor afbeeldingen

Een schokkend bericht: niet iedereen kan afbeeldingen zien. Daarvoor zijn meerdere redenen, de belangrijkste zijn:

• blindheid of slechtziendheid
• het gebruik maken van een console - een computer die slechts tekst kan weergeven
• het uitzetten van afbeeldingen om bandbreedte te sparen en reclame te weren

Al deze mensen kunnen prima van het internet gebruik maken, maar missen de informatie die afbeeldingen kunnen bieden. Met de komst van I-mode, palm-computers en internet via (trage) mobiele verbindingen wordt deze groep eerder groter dan kleiner.
Gelukkig is er een alternatief: de alt-tekst. Dit is in HTML 4.01 een verplicht attribuut van afbeeldingen. De HTML-code voor een afbeelding is <IMG src="verkoop.gif" alt="Verkoopcijfers"> Een alt-tekst kan ook leeg zijn: <IMG src="rand.gif" alt="">. Dit is iets anders dan het niet opgeven van een alt-tekst: <IMG src="rand.gif">

Goede alt-teksten

Een alt-tekst is dus een alternatief voor een afbeelding. Het moet via tekst dezelfde informatie geven als de afbeelding. Het hoeft geen levensechte beschrijving te zijn van wat er te zien is, het gaat om de informatie.

Voor afbeeldingen die puur voor het visuele effect zijn opgenomen, ter versiering dus, volstaat de lege alt-tekst: alt="".
Voor afbeelding die als navigatie dienen is een alt-tekst heel belangrijk, de alt-tekst moet aangeven waar je heen navigeert.

	Een dergelijke afbeelding wordt vaak gebruikt om navigatie naar een vorige pagina aan te geven. In dat geval is "Vorige pagina" een goede alt-tekst, maar "Grijze pijl" niet.
	Of deze, veel voorkomend om de homepage aan te geven. Maar een beschrijving is niet nuttig. Stelt u zich een menu op een pagina voor:

Echt duidelijk is zoiets niet. Maar wordt het als volgt weergegeven:

dan is het gelijk duidelijk waar elk menu-item heenwijst. Dat iemand zonder afbeeldingen niet weet welke kleur de home-knop heeft is niet echt belangrijk, de pagina is nog gewoon bruikbaar.

Foto's en illustraties

Bij foto's of illustraties is de informatie wat minder makkelijk kort te omschrijven. Bovendien is het vaak een herhaling van iets wat ook in de tekst al staat - en dus in feite overbodig. Toch kan een alt-tekst ook hier handig zijn, bijvoorbeeld voor de mensen die selectief afbeeldingen kunnen zien. Zij kunnen dan aan de hand van de alt-tekst een inschatting maken of de afbeelding de moeite waard is.

Zoals gezegd, een alt-tekst moet kort zijn. Voor lange beschrijvingen kan het longdesc-attribuut gebruikt worden. Dit is een link naar een alternatieve pagina waar een uitgebreide beschrijving staat. De code wordt dan <IMG src="verkoop.gif" alt="Verkoopcijfers in 1999" longdesc="verkoop.html">. Omdat helaas nog maar weinig browsers deze functie ondersteunen kan het beste ook een tekstlink worden opgenomen.

Voorbeelden

Op veel pagina's worden zogenaamde 'spacers' gebruikt. Dit zijn kleine afbeeldingen, soms doorzichtig, die kunnen worden gebruikt als scheiding tussen tekst, menu-knoppen en dergelijke. In grafische browsers zullen deze plaatjes niet opvallen, maar in een tekstbrowser zijn ze des te storender als de alt-tekst mist.
Een duidelijk voorbeeld hiervan is de pagina van D66:
De pagina gebruikt echter erg veel afbeeldingen voor dit effect, hier zie je elke afbeelding omlijnd met een rode rand:

In een tekstbrowser, zoals Lynx, wordt de pagina als volgt weergegeven: (Beschrijving)

Hierbij geeft Lynx de bestandsnamen weer als het alt-attribuut mist. Dit is soms handig, want dat maakt dat je nog enige informatie krijgt uit de bestandsnaam. Zo is navigatie nog een beetje mogelijk.
Als in Opera de afbeeldingen uitstaan gebeurt dit niet, voor elke afbeelding zonder alt-attribuut wordt de tekst 'Image' weergegeven. Dit maakt het onmogelijk om de pagina te navigeren:

Maar het heeft ook nadelen, zoals te zien is op de pagina van de Nederlandse omroepen, waar verschillende keren de mysterieuze tekst '[ZolphltGwM]' in voorkomt:

Meer informatie

Engelstalig artikel waarin het gebruik van alt-teksten nog veel verder uitgelegd wordt, met vele voorbeelden.
Drempelsweg biedt informatie over toegankelijkheid van het internet.
Raph's toegankelijkheidspagina met tips, trucs, voorbeelden en uitleg.