W3C ijkpunt 1.1 Lever een tekstequivalent voor elk niet-tekstueel element

Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.

Beschrijving

Niet iedereen kan goed beelden zien of geluiden horen. Dat kan komen doordat ze een handicap hebben maar ook doordat ze een andere browser gebruiken of de beveiliging van hun computer op hoog hebben staan. Door in de code een effectieve beschrijving toe te voegen zijn niet-tekstuele elementen toch goed toegankelijk te maken. Het gaat om afbeeldingen, grafische tekst, spacers, animaties, applets, audio en video die dan via spraaksynthese-apparaten of brailleleesregels kunnen worden bekeken of beluisterd. De beschrijving moet natuurlijk wel functioneel zijn en hetzelfde doel hebben als de visuele of auditieve informatie. Met andere woorden, de beschrijving moet dezelfde informatie overbrengen of dezelfde functie hebben als de niet-tekstuele elementen.

Relevante Webrichtlijnen: R-pd.7.1, R-pd.7.2, R-pd.7.3, R-pd.7.4, R-pd.7.5, R-pd.7.6, R-pd.7.7.

Voordelen

• Sites met effectieve beschrijvingen werken meestal ook beter als ze worden gezien op een telefoon, pda of als de beveiliging van een computer op hoog staat.
• Blinden, slechtzienden en mensen met leesproblemen of verstandelijke beperkingen kunnen met behulp van spraaksynthese en braille toegang krijgen tot alle informatie op een webpagina;
• Doven, slechthorenden of mensen die moeite hebben om auditieve informatie te begrijpen kunnen de tekstuele weergave van de audio lezen, of laten omzetten door hulpapparatuur naar gebarentaal;

Criteria voor toetsing

• Niet-tekstuele content die in woorden kan worden uitgedrukt is expliciet gekoppeld aan een tekstequivalent.
• Niet-tekstuele content die niet in woorden wordt uitgedrukt, bevat een beschrijvend tekstlabel of een tekstbeschrijving die als tekstequivalent wordt geleverd.
• Er worden geen d-links gebruikt*

*: Dit is uitsluitend een succescriterium binnen de Webrichtlijnen. Het overschrijdt conformiteit met WCAG 1.0; zie hieronder voor meer informatie.

Alt, title en longdesc

Op veel sites blijkt dat niet duidelijk is wat de rol is van het alt en het title attribuut. Daarom leggen we hier het verschil nogeens uit:

Het alt-attribuut bevat informatie die beschikbaar is wanneer de niet tekstuele content niet getoond wordt. Het alt-attribuut moet equivalente informatie bevatten die de afbeelding beschrijft of de functie weergeeft (bijvoorbeeld als het een link is naar de homepage). Het is belangrijk om de tekst kort en krachtig te houden. In Frankrijk is de norm voor toegankelijke alt-attributen maximaal 60 karakters. NB: Gebruik altijd het alt-attribuut!

Additionele informatie, die de afbeelding zelf niet biedt, kan op verschillende manieren worden overgebracht:

• Door middel van het title-attribuut;
• In de lopende tekst;
• Door middel van het longdesc-element.

Voorbeelden met foto

Voorbeeld 1 (alt-attribuut)

Het is verplicht om een afbeelding altijd te voorzien van een effectieve beschrijving. Dat kan soms heel kort zijn. In het voorbeeld hierboven en code voorbeeld hieronder staat een foto van Britney Spears. Het alt attribuut beschrijft de foto:

1. <img src="britneyspears.jpg" width="93" height="120" alt="Portretfoto van Britney Spears" />

Voorbeeld 2 (alt- en title-attribuut)

Dezelfde foto, nu met aanvullende informatie over de fotograaf en copyright in het title attribuut (meer informatie):

1. <img src="britneyspears.jpg" width="93" height="120" alt="Portretfoto van Britney Spears" title="Fotograaf: B.G. Williams, © 2006 Dobu Press" />

Voorbeeld 3 (alt- en title-attribuut en longdesc)

Een beetje overdreven om de foto uit de voorgaande voorbeelden nog uitgebreider te beschrijving maar voor de liefhebbers is natuurlijk niets te zot. Dat kan dan in een longdesc:

1. <img src="britneyspears.jpg" width="93" height="120" alt="Portretfoto Britney Spears" longdesc="britneyspears-ld.html" />

Joe Clark stelt voor om bij het gebruik van een longdesc in de code bij voorkeur dezelfde naam te gebruiken als de afbeelding met daarachter de letters LD van longdesc. Zo zijn bij het vragen van een overzicht de bestanden met een longdesc eenvoudiger te vinden (zie externe links in de rechter kolom op deze pagina). De toevoeging van LD is optioneel.

NB: Omdat longdesc slecht wordt ondersteund door de browsers wordt nog wel de d-link gebruikt (descriptive link). Dit is een link die direct na de afbeelding wordt geplaatst naar de longdesc pagina. Samengevat kan op dit moment het beste een goede toelichting op dezelfde pagina worden gegeven zoals in voorbeeld 4 hieronder. Zie ook de Webrichtlijnen over d-link.

Voorbeeld 4a (Beschrijving in de tekst)

het is ook mogelijk om de informatie op dezelfde pagina neer te zetten in de tekst en daarnaar te verwijzen. Niets houdt u tegen om ook nog een longdesc te gebruiken maar dat is dan misschien niet nodig.

1. <img src="britneyspears.jpg" width="93" height="120" alt="Portretfoto Britney Spears, zie verdere toelichting op deze pagina" />

Voorbeeld 4b (Herhaling van de tekst)

Als in de code en in de tekst, direct bij de foto al staat wat er in de foto te zien is dan hoeft dat niet nog een keer herhaald te worden. Veel kranten kennen dit verschijnsel. Zij tonen onder elke foto een korte tekst. Het alt-attribuut kan dan leeg zijn (alt="").

1. <img src="britneyspears.jpg" width="93" height="120" alt="" /> Portretfoto van Britney Spears..

Een voorbeeld van het voorkomen van herhaling van tekst is te vinden op de site van Joe Clark.

Voorbeeld 5 (afbeelding is een link)

De alt-tekst moet vooral functioneel zijn: bij een afbeelding die als link wordt gebruikt dient het doel van de link te zijn beschreven en wordt het title attribuut gebruikt voor de verdere beschrijving:

1. <img src="britneyspears.jpg" width="93" height="120" alt="naar de homepage van Britney Spears" title="Portretfoto van Britney Spears" />

Als er in de link ook nog een afbeelding zit, dan kan het alt-attribuut leeg zijn omdat anders alles dubbel wordt voorgelezen. In het onderstaande voorbeeld wordt uitgegaan van een menuknop: 'links'

1. <a href="/rss.xml"> <img src="rss.png" width="60" height="30" alt="" /> RSS </a>

Meer voorbeelden van toepassing

Beschrijvingen van grafieken die illustratief zijn

Grafieken moeten volgens de richtlijn volledig worden beschreven, dus alle data die in de grafiek te vinden zijn. Echter... dit is lang niet altijd het gebruiksdoel van de grafiek. Als een grafiek illustratief is bij de tekst op dezelfde pagina en dus niet bedoeld om verdere data uit te lezen, dan kan de tekst - in sommige gevallen - worden beschouwd als een voldoende alternatief. Zorg er in de tekst wel voor dat bijvoorbeeld bij belangrijke trends, zoals stijging of daling, begin en eind data duidelijk zijn. Geef ook altijd een korte beschrijving van de grafiek in het alt-attribuut en verwijs daarin eventueel naar de uitleg op de pagina.

1. <img src="grafiekvandedag.jpg" width="10" height="10" alt="grafiek percentage aandelen van Nederlandse beursgenoteerde ondernemingen in buitenlandse handen" />

Bekijk de voorbeeldpagina van deze illustratieve grafiek
NB: als de grafiek niet illustratief is maar bedoeld om data weer te geven, dan is een volledige beschrijving van de grafiek, waarin alle data van de grafiek beschikbaar zijn, wel nodig. Die kan dan (eventueel) op een aparte pagina worden gegeven. Zorg dan wel voor een duidelijke en toegankelijk link naar die pagina.

Decoratieve afbeeldingen en spacers

Wanneer spacers (afbeeldingen die uitsluitend worden gebruikt voor de layout van een pagina) of decoratieve afbeeldingen worden gebruikt die geen extra informatie bevatten, dient aan dergelijke afbeeldingen een leeg alt-attribuut te worden gekoppeld (alt=""). Wanneer een afbeelding namelijk niet is voorzien van een alt-attribuut, kan het voorkomen dat de bestandsnaam wordt uitgevoerd. Dit kan heel verwarrend werken.

1. <img src="spacer.gif" width="10" height="10" alt="" />

De Webrichtlijnen stellen dat decoratieve en achtergrond afbeeldingen via de Style Sheet moeten worden geplaatst: Richtlijn R-pd.7.6. De gekleurde decoratieve balk bovenaan deze pagina is geplaatst via de Style Sheet. Daardoor heeft die geen alt attribuut (dat kan namelijk niet in een style sheet). Om toch te zorgen dat de afbeelding een alt attribuut heeft als bijvoorbeeld geen style sheet wordt ondersteund kan gebruik worden gemaakt van bijvoorbeeld CSS Image Replacement. Gebruik dit nog niet voor essentiele informatie. Zie voor meer informatie de link hierboven. Zie ook het artikel van Joe Clark over CSS image replacement, en het artikel van Dave Shea met meer onderzoek en voorbeelden.

Als image replacement technieken gebruikt zijn om afbeeldingen die met CSS geplaatst zijn een tekstueel alternatief te geven, dan moet er gelet worden op het feit dat de CSS techniek display:none, niet gebruikt wordt. Display:none wordt namelijk door de meeste nieuwe versies van hulp apparatuur en software wel geïnterpreteerd waardoor het alternatief dus niet mee genomen wordt. Dit geld ook voor visibility:hidden.

Een voorbeeld van een image replacement techniek die wel toegankelijk is, is het ver buiten beeld plaatsen van de alternatieve tekst of het onzichtbaar maken van de tekst doormiddel van overflow:hidden.

Let wel: Om aan de webrichtlijnen te voldoen gelden voor ijkpunt 6.1 nog enkele aanvullende eisen hier aan gerelateerd. Namelijk dat informatieve afbeeldingen altijd met HTML geplaatst moeten worden en dat CSS image replacement niet gebruikt mag worden op essentiële informatie zoals navigatie, logo's en headers.

Opsommingstekens, bullets

Natuurlijk de beste oplossing voor lijsten is het gebruik van "ul" en "ol". Sommige sites gebruiken liever een decoratief grafisch symbool zoals een verkleind logo voor lijsten. Dat kan door via de CSS een image in te laden. Maar zorg ervoor dat bij het wegvallen van de stylesheet, toch nog de lijst overblijft. Zie hierboven bij decoratieve afbeeldingen. Een bruikbare alternatieve tekst voor een grafische bullet is een asterisk (*). Beter is natuurlijk om gewoon de standaard lijst te gebruiken.

Objecten, applets en scripts

Wanneer je het object-element gebruikt om een afbeelding te plaatsen, kun je de tekstuele omschrijving binnen de object-elementen plaatsen.

1. <object data="huis.gif" type="image/gif" height="100" width="100">
2. Plaats de korte of lange beschrijving(of link naar een file met lange beschrijving) hier.
3. </object>

Ook bij Java-applets is het mogelijk om tekstuele beschrijvingen te geven. Dit kan op een aantal manieren.

1. <applet code="Blink.class" width="500" height="40">
2. <param name="lbl" value="korte omschrijving inhoud van de applet...">
3. <param name="speed" value="1">
4. Als u een Java-ondersteunende browser gebruikte, zou de volgende tekst op het beeld komen ......
5. </applet>

Bij het gebruik van scripttalen dient er een <noscript> element gebruikt te worden om de functionaliteit van de scripts te beschrijven. Via dit element kan informatie gegeven worden die anders verloren zou gaan wanneer de browser geen scripttalen ondersteunt (zie ook W3C ijkpunt 6.3):

1. <noscript>
2. Hier staat de inhoud die wordt gegenereerd wanneer het script niet kan worden uitgevoerd.
3. </noscript>

Grafische submit knop

Er worden regelmatig grafische knoppen gebruikt voor het versturen ('submitten') van formulieren. Als knoppen als plaatje via CSS geplaatst worden hebben ze geen alt-attribuut. het is dan dus niet altijd duidelijk waar ze voor zijn. Dit kan bijvoorbeeld worden opgelost door het type van het input element te veranderen van 'submit' naar 'image'. Het type 'image' ondersteund ook de attributen 'src' en 'alt' en heeft verder dezelfde functionaliteit als elke andere submit knop. Zie hieronder een voorbeeld:

1. <form action="/zoeken" method="post">
2. <label for="searchtekst">Zoeken</label>
3. <input type="text" name="searchtext" />
4. <input type="image" src="knop.gif" alt="Zoek" />
5. </form>

Image maps

Wanneer een image map gebruikt wordt voor navigatie of andere doeleinden is het van belang dat de actieve onderdelen (hotspots) van de afbeelding die een link vormen naar een ander document voorzien worden van een alt-tekst. Bij server-side image maps is dit niet mogelijk. Daarom wordt aanbevolen om client-side image maps te gebruiken (W3C ijkpunt 9.1).

1. <img src="imagemap.gif" alt="navigatieafbeelding" title="Afbeelding met twee onderdelen: Een huis en een boom" usemap="#map1">
2. <map name="map">
3. <area coords="0,0,39,39" href="pagina1.htm" alt="pagina1">
4. <area coords="40,0,79,39" href="pagina2.htm" alt="pagina2">
5. </map>

Overige

Ook multimedia-, geluids- en videofragmenten vormen niet-tekstuele elementen in een pagina. Daarom moeten ook deze onderdelen van tekstuele alternatieven worden voorzien. In de uitleg van W3C ijkpunt 1.3 en W3C ijkpunt 1.4 wordt hier verder op in gegaan.

Definities

Tekstequivalent

• Heeft dezelfde functie als de beoogde functie van de niet-tekstuele content;
• Geeft informatie die gelijk is aan de informatie die de niet-tekstuele content had moeten overbrengen;
• Kan gestructureerde content of metagegevens bevatten.

Niet-tekstueel element

• Niet-tekstuele elementen omvatten afbeeldingen, maar zijn hier niet toe beperkt. Ze omvatten tevens tekst in rasterafbeeldingen, image map regions, animaties (bijvoorbeeld geanimeerde GIF's), ASCII-art, afbeeldingen die gebruikt worden als opsommingstekens, opvultekens, grafische knoppen, geluiden (afgespeeld met of zonder gebruikersinteractie), zelfstandige audiobestanden, audiotracks van video en video. Scripts, applets en programmatische objecten vallen niet onder deze definitie en worden bij een ander ijkpunt aan de orde gesteld.

Verwijzingen

• R-pd.1.2 Bouw websites volgens het principe van gelaagd bouwen.
• R-pd.7.1 Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element en dient te worden voorzien van een effectieve alternatieve tekst.
• R-pd.7.2 Gebruik geen alt attribuut voor het oproepen van tooltips.
• R-pd.7.3 Gebruik geen d-links op overheidswebsites. Het gebruik van het longdesc (long description) attribuut verdient de voorkeur wanneer de alternatieve tekst op het alt attribuut ontoereikend is voor het begrip van de informatie in de afbeelding.
• R-pd.7.4 Afbeeldingen die staan geplaatst binnen een link dienen een niet-lege alternatieve tekst te hebben om bezoekers die de afbeelding niet zien in staat te stellen de link te volgen.
• R-pd.7.5 Geef bij het gebruik van image maps voor zowel het img element als ieder area element een effectieve alternatieve tekst aan via het alt attribuut.
• R-pd.2.9 Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.