Alt tags voor toegankelijkheid

Gisteren gaven we al een introductie over alt tags voor SEO. Vandaag gaan we nog wat verder in op alt tags en toegankelijkheid.

Alt tags en toegankelijkheid

Als je bij het schrijven van alt tags rekening wilt houden met de toegankelijkheid van je website, dan moet je je afbeeldingen in categorieën onderverdelen. Volgens de World Wide Web Consortium Web Content Accessibility Guidelines (WCAG) vallen afbeeldingen in een van de onderstaande categorieën, welke voor toegankelijkheidsdoeleinden zijn opgesteld:

Korting op WordPress handleiding

Informatieve afbeeldingen

Informatieve afbeeldingen kunnen gebruikt worden voor:

  • Het labelen van andere informatie (een afbeelding of icoon van een telefoon of email voor contactgegevens);
  • Het verstrekken van andere informatie (uitleg van iets in de afbeelding);
  • Het overbrengen van instructies;
  • Het overbrengen van een indruk, uitdrukking of emotie (denk aan een foto van een blij gezin bij content over een kindvriendelijk product);
  • Het communiceren van een bestandsformaat (PDF of ZIP icoontjes).

Wat is nu de beste benadering van alt tags bij informatieve afbeeldingen? Simpel: schrijf een of meerdere woorden met de kerninformatie over de afbeelding. Als het bijvoorbeeld een icoontje van een telefoon is, zou dit al volstaan:

<a href="tel:123-456-7890"><img src="afbeelding-telefoon.jpg" alt="telefoon"></a>

Decoratieve afbeeldingen

Decoratieve afbeeldingen zijn bijvoorbeeld afbeeldingen die:

  • Zijn gebruikt als onderdeel van het paginaontwerp (borders, dividers, enz.);
  • Zijn gebruikt als onderdeel van een tekstlink (om de aandacht naar de klikbare link te trekken, of het klikbare gebied te vergroten);
  • Puur worden gebruikt om een bepaalde sfeer te creëren of de uitstraling van een webpagina te verbeteren (‘eye candy’).

Als een afbeelding geen doel heeft, of wanneer het puur voor decoratieve doeleinden bedoeld is, kun je het beste een zogeheten ‘null tekst’ alternatief gebruiken:

<img src="afbeelding.jpg" alt="">

Functionele afbeeldingen

Functionele afbeeldingen brengen geen informatie over, maar worden gebruikt om acties te initiëren. Functionele afbeeldingen zijn vaak klikbare knoppen. Denk bijvoorbeeld aan een printer-icoon of een knop om een formulier in te dienen.

De alt tag van een functionele afbeelding moet de gewenste actie overbrengen (oftewel, het doel van de afbeelding), in plaats van alleen een beschrijving van de afbeelding. Om een voorbeeld te geven: Je hebt een klikbare knop waarmee je kunt doneren aan de plaatselijke dierenambulance. Dan zou de alt tag kunnen zijn:

<img src=”afbeelding.jpg” alt=”klik hier om dieren te helpen”>

Functionele afbeeldingen zijn van essentieel belang voor de functionaliteit van de content. Ontbrekende of lege alt waarden kunnen dan ook problemen creëren voor gebruikers van screen readers. Dergelijke assistieve technologieën lezen vaak de bestandsnaam voor de URL van de afbeelding of de URL van de link. Dus als de alt tag ontbreekt, begrijpt een gebruiker wellicht niet welke actie er door de klikbare afbeelding geïnitieerd wordt.

Afbeeldingen van tekst

Omdat de tekst in een afbeelding niet door zoekmachines ‘gelezen’ kan worden, zien we dit tegenwoordig gelukkig niet zo vaak meer als pakweg vijftien jaar geleden. Het wordt door elke zoekmachine afgeraden. Heb je desondanks wel een afbeelding van tekst op je website? Dan moet de alt tag de woorden bevatten die in de afbeelding gebruikt worden.

Complexe afbeeldingen

Complexe afbeeldingen zoals grafieken, diagrammen, kaarten en illustraties bevatten vaak veel informatie. Die informatie is soms niet in een kort zinnetje samen te vatten. Moet je dan een hele lange beschrijving in de alt tag zetten? Wel, dat kan, maar er is nog een andere methode.

De beste benadering van alt tags bij complexe afbeeldingen is om de lange beschrijving ergens op dezelfde webpagina als de afbeelding te zetten, en in het alt attribuut naar die locatie te verwijzen.

Een voorbeeld: Je afbeelding is een grafiek die laat zien hoeveel blindgangers uit de Tweede Wereldoorlog er sinds 1945 in Nederland zijn aangetroffen. De alt tag zou dan kunnen zijn:

<img src="blindgangers-sinds-1945-nl.png" alt="Grafiek aantal aangetroffen blindgangers in NL sinds 1935. Beschreven onder de kop Blindgangers in Nederland.”>

Dan moet je natuurlijk niet vergeten dat dat kopje waar je naar verwijst er ook daadwerkelijk komt!

Gegroepeerde afbeeldingen

Wanneer meerdere afbeeldingen één stukje informatie vertegenwoordigen, dan heeft slechts één van die afbeeldingen een alt tag nodig om de hele groep te beschrijven. De andere afbeeldingen moeten dan een leeg alt attribuut hebben, zodat ze door assistieve technologie genegeerd worden.

Een voorbeeld van gegroepeerde afbeeldingen is bijvoorbeeld vijf sterren die een beoordeling vertegenwoordigen:

alt tags en toegankelijkheid

De alt tags zouden er dan als volgt uit kunnen zien:

<img src="ster-ingekleurd.png" alt="4 van 5 stars">
<img src="ster-ingekleurd.png" alt="">
<img src="ster-ingekleurd.png" alt="">
<img src="ster-ingekleurd.png" alt="">
<img src="ster-leeg.png" alt="">`

Maar als een groep afbeeldingen een verzameling of thematisch gerelateerde afbeeldingen vertegenwoordigd, dan kun je beter wél overal een alt tag invullen. Bij voorkeur een alt tekst die zowel de afbeelding zelf beschrijft als de relatie van de afbeelding tot de groep.

Tot slot

Zoals je ziet kunnen alt tags niet alleen heel veel verschil maken op het gebied van vindbaarheid, maar ook van toegankelijkheid. Hoe meer aandacht je aan alt tags besteedt, hoe hoger je website zal scoren en hoe toegankelijker hij wordt!

Hosting en Webhosting bij Combell

Geef een reactie