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:'.
- Sommige content management systemen gebruiken de bestandsnaam van de afbeelding als alt-tekst. Dit raden we af aangezien bestandsnamen vaak niet betekenisvol zijn.
- 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. - 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
<p><img src="foto1.jpg" alt="Zonsondergang op het strand" /></p>
<p><img src="foto2.jpg" alt="Elvis Presley" /></p>
Grafische tekst
Herhaal in de alt-tekst letterlijk de tekst die grafisch is weergegeven.
<p><img src="agenda.jpg" alt="Agenda" /></p>
<p><img src="logo.png" alt="W3C" /></p>
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)
<p><a href="#top">
<img src="pijl.gif" alt="Pijltje omhoog" /></a></p>
<p><a href="">
<img src="print.jpg" alt="Printer" /></a></p>
<p><input type="image" src="zoek.png" alt="Vergrootglas" /></p>
Voorbeeld (goed)
<p><a href="#top">
<img src="pijl.gif" alt="Bovenkant pagina" /></a></p>
<p><a href="">
<img src="print.jpg" alt="Afdrukken" /></a></p>
<p><input type="image" src="zoek.png" alt="Zoeken" /></p>
Noot: elke klikbare zone van een image map is ook een grafische link.
Voorbeeld
<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"
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)
<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)
<p><img src="spacer.gif" /></p>
<p><img src="blue_fade.jpg" alt=" " /></p>
<p><img src="border.png" alt="decoratie" /></p>
<p><img src="top_left.gif" alt="Afgerond hoekje linksboven" /></p>
Voorbeelden (goed)
<p><img src="spacer.gif" alt="" /></p>
<p><img src="blue_fade.jpg" alt="" /></p>
<p><img src="border.png" alt="" /></p>
<p><img src="top_left.gif" alt="" /></p>
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 en slechtzienden. Vermeld in de alt-tekst dat het om een captcha gaat en voorzie een alternatief in audio bijvoorbeeld.
Een voorbeeld van de combinatie van een grafische en een auditieve captcha vindt u bij het aanmaken van een nieuwe Google account.
In bovenstaand voorbeeld is de alttekst "characters" het meest gepast omdat de instructietekst spreekt over characters i.p.v een captcha.
Andere alternatieven voor een grafische captcha zijn e-mailverificatie, sms-verificatie, een rekensom enz. Elke techniek heeft echter nadelen. Vermeld best ook het e-mailadres en telefoonnummer van de helpdesk waar mensen terecht kunnen.
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, zoals in deze fotowedstrijd. De alt-tekst van de test zou iets moeten zijn als alt="Foto met vijf voorwerpen".
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.