1. Alt-attributen

Uitleg

De stap om alt-attributen te bekijken is gelijk de stap met de meeste uitleg. IJkpunt 1.1 luidt: "Lever een tekstequivalent voor elk niet tekstueel element".

We gaan hiervan één aspect onderzoeken; we gaan kijken naar de tekstequivalenten van afbeeldingen.
(Andere niet-tekstuele elementen zijn bijvoorbeeld: animaties, applets, audio en video).

Voor dit checkpunt gaan we op een paar pagina's kijken of er goede alternatieve teksten zijn gebruikt voor afbeeldingen.

Open de homepage van de site en klik op 2. Algemeen > Overzicht afbeeldingen en alt-attributen.

In een nieuw venster verschijnt nu een overzicht met drie kolommen: 'Afbeelding', 'Alt-attribuut' en 'Bestandsnaam van afbeelding'. Voor ons zijn de eerste twee kolommen van belang.

In de eerste kolom worden alle afbeeldingen op de pagina (behalve afbeeldingen die via style sheets verschijnen) weergegeven.

In de tweede kolom wordt weergegeven of er een alt-attribuut is gebruikt en wat de inhoud is van de alt-attributen:

• "tekst die in het alt-attribuut staat"
• "" (leeg alt-attribuut)
• geen alt-attribuut

Voorbeelden

Voorbeeld 1

In onderstaande afbeelding staat een voorbeeld van een overzicht dat gegenereerd is met tool 2a van de toolbar. In de eerste kolom ziet u afbeeldingen die gebruikt zijn op een pagina, in de tweede kolom het alt-attribuut bij de afbeelding.

We zien hier een logo dat als alt-tekst de tekst van het logo heeft. Hier is dus tekstueel aangegeven wat op de afbeelding te zien is. Wanneer dit logo een link is kan dit ook aangegeven worden, maar veel hulpsoftware doet dit zelf ook al.

Het volgende wat we in dit overzicht zien is een 'spacer', die hier trans.gif heet. Een 'spacer' is een transparante afbeelding van 1 pixel bij 1 pixel, die vaak gebruikt wordt om teksten, afbeeldingen of andere objecten op een pagina te positioneren. Een spacer kan opgerekt worden (een andere grootte krijgen) en daardoor andere elementen op een plek duwen.

Het alt-attribuut van deze spacer is "". Dit wil zeggen dat er een leeg alt-attribuut gebruikt is. Een leeg alt-attribuut wordt in de HTML-code van een pagina als volgt aangegeven: alt="".

Bij een decoratieve afbeelding als een spacer en ook bijvoorbeeld gekleurde balkjes hoort een leeg alt-attribuut gebruikt te worden. Wanneer geen alt-attribuut wordt gebruikt, lezen bijvoorbeeld schermlezers het hele adres van de afbeelding op. Het alt-attribuut hoeft ook geen tekstuele beschrijving te hebben, omdat de afbeelding eigenlijk geen inhoud of andere functie dan lay-out heeft. De afbeelding is namelijk zelfs niet eens te zien!

Het gebruik van een alt-attribuut is overigens ook verplicht in de laatste HTML-talen.

Na de spacer en gekleurde balkjes zien we in het overzicht weer een paar spacers. Deze hebben geen alt-attribuut gekregen. Schermlezers zullen dus het hele adres voorlezen, wat erg storend is. Hierbij hoort een leeg alt-attribuut gebruikt te zijn. Het ontbreken van een alt-attribuut is altijd fout.

Voorbeeld 2

Een ander voorbeeld van afbeeldingen is tekst van afbeeldingen. Tekst in een menu of tekst van paragraafkoppen bestaat in plaats van gewone tekst vaak uit afbeeldingen van tekst. Wanneer dit niet verduidelijkt wordt, is voor bijvoorbeeld blinden het menu niet meer te begrijpen. In de onderstaande afbeelding ziet u een voorbeeld van een overzicht van afbeeldingen van een menu, waarbij de tekst uit afbeeldingen bestaat. Het menu is dus niet toegankelijk omdat er geen tekstuele alternatieven voor de afbeeldingen zijn.

Voorbeeld 3

Het volgende voorbeeld (zie onderstaande afbeelding) is ook een overzicht van de afbeeldingen en alt-attributen van een pagina. Hierbij wordt wel door middel van een alt-attribuut een tekstueel alternatief voor elke afbeelding gegeven.

Testen met de toolbar

Na deze crashcursus alt-attributen gaan we nu kijken of er goede alt-attributen gebruikt zijn op de website die u wilt testen. We bekijken vier soorten afbeeldingen:

1. spacers: een lege, transparante afbeelding van 1 pixel bij 1 pixel, meestal met de naam spacer.gif, of trans.gif. Alleen goed met een alt-attribuut "" of " " (zoals in voorbeeld 1). Het is fout om als alt een omschrijving te gebruiken bij deze afbeeldingen. Alt="spacer" is dus fout.
2. decoratieve afbeeldingen: afbeeldingen zonder extra informatie (bijvoorbeeld de grijze balkjes in voorbeeld 1).
3. functionele afbeeldingen: logo's, foto's, buttons, grafische tekst. De informatie die met de afbeelding overgedragen wordt dient ook in het alt-attribuut overgedragen worden. Zie voorbeeld 3.
4. complexe afbeeldingen: grafiek. Hiervan hebben we geen voorbeelden gegeven, maar stelt u zich eens voor dat u de afbeeldingen niet kunt zien. Gebruik hiervoor tool 2b van de toolbar 'Weergave afbeeldingen / weergave alt-attributen'. Wordt de informatie die in de afbeelding van de grafiek staat nu nog aan u overgedragen door hetzij een alt-attribuut, hetzij een uitleggende tekst?

Bekijk nu met behulp van tools 2a en 2b van de drempelvrij.nl toolbar een aantal zo verschillend mogelijke pagina's.

Checklist

Op de checklists staan vijf vragen over alt-attributen. Wanneer u weinig technische kennis over webpagina's heeft kunt u de laatste vraag overslaan. Beantwoord de overige vier vragen in ieder geval.