Opvallend (on)toegankelijk: alternatieve teksten

Opvallend (on)toegankelijk: alternatieve teksten

Hey! Ik zal me even voorstellen: ik ben Jesse! Ik woon in het bruisende Breda en werk inmiddels al bijna een jaar als onderzoeker bij Cardan. Dag in dag uit neem ik verschillende websites onder de loep om te beoordelen hoe toegankelijk ze zijn voor mensen met een beperking. Ik analyseer de bevindingen en noteer deze, zodat jij gemakkelijk aan de slag kunt met het verbeteren van je website op toegankelijkheid!

Oh ja, en voor het geval je mijn blog “Zo werk je aan digitale toegankelijkheid met een topsportmentaliteit: 7 praktische lessen” nog niet hebt gelezen: ik sta ook zo’n 3x per week op de ijsbaan om mij weer klaar te stomen voor het wereldkampioenschap synchroonschaatsen! Maar, voor nu verder over digitale toegankelijkheid.

Afbeeldingen: hoe maak je ze waarneembaar voor slechtziende mensen?

Afbeeldingen: veel websites staan er vol mee. Dat is niet voor niets. Afbeeldingen maken een pagina interessant en zorgen voor afwisseling met anders ook maar droge tekst. Veel mensen zijn visueel ingesteld en haken zonder afbeeldingen snel af.

→ Wat voor lezer ben jij? Een plaatjeskijker of een tekstenlezer?

Sommige afbeeldingen zorgen vooral voor wat sfeer op de pagina, zoals een bannerfoto. Andere geven juist belangrijke informatie, zoals een infographic.

Maar… wat als je de afbeelding helemaal niet kunt zien? Bijvoorbeeld omdat je een visuele beperking hebt. Wist je dat in Nederland ruim 300.000 mensen slechtziend of blind zijn? Ook zij willen de informatie goed meekrijgen. De oplossing: tekstalternatieven.

Tekstalternatieven zijn over het algemeen een bekend onderwerp binnen digitale toegankelijkheid, maar toch gaat daar heel vaak wat mee mis. In dit blog neem ik je mee hoe jij in de toekomst de beste alternatieve teksten gaat schrijven. We duiken er dieper op in middels de WCAG-richtlijnen. De WCAG richtlijnen zijn namelijk richtlijnen die jou als contentmaker, developer of ux-designer helpen bij het toegankelijk maken van jouw website, app of PDF-document.

WCAG 1.1.1 – Niet-tekstuele content

WCAG-succescriterium 1.1.1 vertelt ons alles over tekstalternatieven. In het kort zegt dit succescriterium dat er voor alle niet-tekstuele content (waaronder dus ook afbeeldingen) een tekstalternatief geboden moet worden die dezelfde boodschap overbrengt.

Er is hierbij een verschil tussen decoratieve inhoud en informatieve inhoud. Decoratieve inhoud is leuk voor de sfeer, maar draagt niet bij aan de belangrijkste boodschap van de pagina. Het liefst wil je deze inhoud dus ook verbergen voor hulpsoftware. Zo voorkom je dat mensen overspoeld worden met onnodige informatie.

Een afbeelding als decoratief aangeven

Hoe je een afbeelding als decoratief aangeeft, hangt ervan af hoe je de afbeelding op de pagina hebt geplaatst. Vaak wordt hiervoor een img-element gebruikt. Je kunt een img-element als decoratief aangeven door een leeg alt-attribuut toe te voegen. In de code ziet dat er zo uit:

<img src=”image01_400.jpg” alt>

of

<img src=”image01_400.jpg” alt=””>

Een aantal situaties die ik nog wel eens fout zie gaan:

• Het alt-attribuut helemaal weglaten. Geen alt-attribuut is geen tekstalternatief, toch? Nee, zo werkt het helaas niet. Als een alt-attribuut ontbreekt op een img-element die niet verborgen is, zal hulpsoftware de afbeelding niet negeren en wordt mogelijk de bestandsnaam voorgelezen. Fijn, dat we nu weten dat hier “image01_400.jpg” staat..

• Iets vergelijkbaars zien we vaak in PDF-documenten. Hier staan afbeeldingen dan in Figure-tags, zonder Alt-tag. Een decoratieve afbeelding kan beter als Artefact worden getagd.

• Onlangs was ons advies wel heel letterlijk opgepakt: <img alt=”alt=”””>. Het tekstalternatief was hierdoor alt=”” geworden. Niet helemaal wat we bedoelden!

→ Werk je in een CMS? Dan hoef je meestal niet alt="" in te vullen. Laat dan het tekstalternatief leeg. Dan zal alt=”” in de code verschijnen.

Afhankelijk van hoe je je afbeelding op de pagina plaatst zijn er ook andere manieren hoe je afbeeldingen kunt verbergen, bijvoorbeeld met aria-hidden="true".

Een informatieve afbeelding van een tekstalternatief voorzien

Besluit je dat je afbeelding niet decoratief is, dan is het belangrijk om te zorgen dat je een tekstalternatief met de juiste boodschap toevoegt. Tekstalternatieven waar we niet zo blij van worden:

• De bestandsnaam als tekstalternatief: <img src=”image01_400.jpg” alt=”image01_400.jpg”>. Vergelijkbaar met eerder, “image01_400.jpg” voegt niets toe aan de boodschap.

• Een afbeelding die eigenlijk decoratief is en toch een tekstalternatief heeft meegekregen zonder waardevolle informatie:

• Een afbeelding met een tekstalternatief die geen link heeft met de inhoud of wat er op de afbeelding is te zien:

• Een afbeelding die ook als link dient, waarbij het tekstalternatief en dus het linkdoel begint met “Afbeelding van …”. Dit is verwarrend, omdat het nu kan lijken dat de link naar een afbeelding van … gaat.

Het alt-attribuut is trouwens niet de enige manier om een afbeelding van een tekstalternatief te voorzien. Sterker nog, bijvoorbeeld op een svg-element, een ander element waarmee afbeeldingen op websites geplaatst kunnen worden, kan niet eens het alt-attribuut gebruikt worden. Er wordt vaak gesproken over “de alt-tekst” wanneer het om tekstalternatieven gaat, maar dat vinden wij hierdoor iets te kort door de bocht. Het is beter om het gewoon te hebben over “de alternatieve tekst” of “het tekstalternatief”. Kost je iets meer tijd en moeite, maar dan ben je wel duidelijk. En duidelijkheid, daar houden we van!

Vragen over alternatieve teksten?

Heb je inhoudelijke vragen over tekstalternatieven of andere zaken omtrent WCAG? Mail dan naar support@cardan.com. Heb je een specifiek onderwerp dat je graag wilt zien terugkomen? Stuur ons dan een e-mail naar contact@cardan.com.