Alt-Tekst
Gelinkte afbeelding
Je hebt een afbeelding van loopschoenen in je webshop. De afbeelding werkt als een link naar de pagina met alle loopschoenen. Welke alt-tekst geef je die afbeelding? A: “Airmax 90.” B: Geen beschrijving, het is decoratief. C: “Alle onze loopschoenen.” Het juiste antwoord is C. Wanneer een afbeelding als link werkt, moet de beschrijving vertellen waar de link naartoe gaat, niet wat er op het plaatje staat.
Plattegrond
De plattegrond van je museum is bedoeld om op een compacte manier veel informatie te geven over een complex gebouw. Waar is de ingang, waar koop je kaartjes, waar zijn de toiletten. Maar voor mensen die de pagina niet kunnen zien, is die plattegrond een dichte deur. En voor mensen die slecht zien, is het zoeken naar een naald in een hooiberg: kleine labels, weinig contrast, niet in te zoomen zonder dat je het overzicht verliest.
Tekst in afbeelding
Je hebt op je website een prachtige banner: “Vandaag 15% korting op alle artikelen.” De tekst staat ingebakken in het plaatje. Ziet er geweldig uit. Maar wie bereik je er eigenlijk mee? Alleen de mensen die het plaatje kunnen zien en de tekst scherp genoeg kunnen lezen. Mensen die voorleessoftware gebruiken, horen niks. Mensen die de tekst groter willen maken of het contrast willen verhogen, kunnen dat niet. En Google kan de tekst in je afbeelding niet lezen.
Knop zonder naam
Je hebt op je website een zoekveld met een knop. Op een desktop staat er “Zoeken” naast het vergrootglas-icoon. Prima, dat werkt. Maar wat gebeurt er als je inzoomt of de pagina op een telefoon bekijkt? De tekst “Zoeken” verdwijnt en alleen het icoon blijft over. En als dat icoon geen tekstalternatief heeft, dan weet iemand die voorleessoftware gebruikt niet wat die knop doet. Ze horen: “Knop.” Dat is alles. Geen “zoeken”, geen “versturen”, gewoon “knop.”
Decoratieve afbeeldingen
Ik kom het regelmatig tegen in audits: een decoratieve scheidingslijn, leuke bolletjes, of een achtergrondpatroon, en ze hebben allemaal een beschrijving. “Afbeelding, blauwe cirkel.” “Afbeelding, golvend lijntje.” Iemand die voorleessoftware gebruikt, hoort al die rommel tussendoor terwijl die gewoon door je webshop wil scrollen. Stel je voor dat je in een fysieke winkel loopt en bij elke stap iemand in je oor fluistert: “Tegel. Tegel. Nog een tegel.”
Afbeelding van prefix
Je hebt een overzichtspagina in je webwinkel met 100 producten. In elke alt-tekst staat “Afbeelding van…”. Klinkt netjes, toch? Tot je luistert wat er gebeurt. Voorleessoftware zegt bij elke afbeelding al automatisch “afbeelding.” Dus als jij “Afbeelding van Nike schoenen” in de alt-tekst zet, hoort je klant: “Afbeelding. Afbeelding van Nike schoenen.” Bij de vierde rij producten word je daar helemaal gek van. En dat wil je niet als winkelier.
Knop zonder naam
Je hebt op je website een zoekveld met een knop. Op een desktop staat er “Zoeken” naast het vergrootglas-icoon. Prima, dat werkt. Maar wat gebeurt er als je inzoomt of de pagina op een telefoon bekijkt? De tekst “Zoeken” verdwijnt en alleen het icoon blijft over. En als dat icoon geen tekstalternatief heeft, dan weet iemand die voorleessoftware gebruikt niet wat die knop doet. Ze horen: “Knop.” Dat is alles. Geen “zoeken”, geen “versturen”, gewoon “knop.”
Decoratieve afbeeldingen
Ik kom het regelmatig tegen in audits: een decoratieve scheidingslijn, leuke bolletjes, of een achtergrondpatroon, en ze hebben allemaal een beschrijving. “Afbeelding, blauwe cirkel.” “Afbeelding, golvend lijntje.” Iemand die voorleessoftware gebruikt, hoort al die rommel tussendoor terwijl die gewoon door je webshop wil scrollen. Stel je voor dat je in een fysieke winkel loopt en bij elke stap iemand in je oor fluistert: “Tegel. Tegel. Nog een tegel.”
Productafbeelding zonder beschrijving
Ik moest een keer nieuwe golfschoenen kopen. De volgende dag zou ik gaan golfen en ik moest voor 16:00 bestellen om ze op tijd te krijgen. Die hele dag zat ik in de auto. En ik heb een stoornis: maximaal drie kleuren in mijn outfit. De schoenen moesten wit zijn met rode elementen. Probeer dat eens in de file te vinden op je telefoon. Ik kon alleen maar luisteren naar wat de voorleessoftware me vertelde. Maar bij de meeste webshops was er niks te horen: geen kleur, geen materiaal, geen details. En toen was ik weg als klant.
Alt-tekst schrijven: de keuzehulp voor de juiste alt-tekst bij elke afbeelding
Elke afbeelding op je website heeft een alt-attribuut nodig. Maar wat je daarin schrijft, hangt af van de context. Is de afbeelding decoratief? Dan laat je de alt-tekst leeg (alt=""). Bevat de afbeelding informatie? Dan beschrijf je die informatie.