Omslag van 'Handboek webcontent: meer focus, minder content'

17. Afbeeldingen toegankelijk en vindbaar maken

Blinde gebruikers en zoekmachines kunnen geen afbeeldingen zien. Gebruik je een afbeelding die extra informatie overbrengt, dan moet je deze afbeelding voorzien van een tekstalternatief.

17.1 Afbeeldingen plaatsen via html of css

Even een korte technische introductie van afbeeldingen op het web. Afbeeldingen kun je plaatsen in de html-code of via de css.

In html ziet dat er bijvoorbeeld zo uit:

<img src="leuk-plaatje.jpg" alt="">

Via css zo:

.home-image { url ('../img/lentekriebels.jpg'); }

Het belangrijkste verschil is dat afbeeldingen die je via css plaatst meestal decoratief zijn. Je kunt namelijk geen alt-attribuut toevoegen. Met dit alt-attribuut voeg je een alternatieve tekst toe voor mensen die de afbeelding niet kunnen zien en ook voor zoekmachines.

Plaats je de afbeelding in de html, dan kun je kiezen om er wel of niet een alternatieve tekst bij te plaatsen. Hiervoor kan je het alt-attribuut gebruiken, bijvoorbeeld:

<img src="live-12312.jpg" alt="Ariana Grande">

Er is geen alt-tekst nodig als de afbeelding geen extra betekenis overbrengt.

Plaats dan wel een leeg alt-attribuut (alt=""). Doe je dat niet, dan gebruikt de screenreader de het webadres en de bestandsnaam (in het voorbeeld hierboven 'live-12312.jpg'). En dit webadres kan heel lang zijn, dus dat is erg onhandig. Met een leeg alt-attribuut slaat een screenreader de afbeelding over.

Kun je in jouw cms het veld voor het alt-attribuut niet leeg laten, vul dan een spatie in. Daarmee slaat de screenreader nog steeds de afbeelding over.

17.2 Informatief of decoratief

Beeld kan sfeer overbrengen of een concrete betekenis. We hebben het daarom ook wel over informatieve en decoratieve afbeeldingen.

Het is soms lastig om te bepalen of een afbeelding informatief of decoratief is. Twijfel je? Stel jezelf dan de vraag: mis je essentiële informatie als de afbeelding er niet is? Is dat het geval. Dan is deze informatief en moet je een alternatief geven. Hoe dat moet, leggen we verderop uit.

Mis je niets als de afbeelding er niet is? Dan is hij decoratief en heeft hij geen alternatief nodig.

17.3 Tekstueel alternatief bij informatieve afbeeldingen

Brengt de afbeelding essentiële betekenis over, dan is een tekstalternatief nodig. Vaak is dit tekstalternatief extra tekst, die leesbaar is voor iedereen, zoals een bijschrift of een uitleg in de tekst bij de afbeelding.

Het kan ook een zogenaamde alt-tekst zijn. Deze tekst is niet direct zichtbaar en geeft de alternatieve tekst voor gebruikers van schermlezers en voor Google.

De kenmerken voor een goed tekstalternatief zijn:

  1. Het moet leesbaar zijn voor de schermlezer
  2. Betekenisvol: beschrijft het doel van de afbeelding
  3. Kort: maximaal 150 tekens, maar korter is beter.
Opmerking: Een schermlezer is software, die tekst uitvoert in spraak of braille. Het tekstalternatief moet dus 'zichtbaar' zijn voor deze software. In het Engels heet dit 'programmatically determinable'. Dat is een vrij technisch verhaal. Aan het eind van het hoofdstuk gaan we hier nog wat dieper op in.

De verschillende methoden om een tekstalternatief te plaatsen zijn:

  1. Alt-tekst
  2. Omschrijving in de omringende tekst
  3. Bijschrift
  4. Tabel
  5. Uitgebreide omschrijving

17.4 Alt-tekst

Een alt-tekst is nodig als de afbeelding informatief is én de betekenis niet in de omringende tekst wordt uitgelegd. De maximale lengte van de alt-tekst is 150 tekens.

In de alt-tekst omschrijf je de betekenis die de afbeelding overbrengt. Dat is afhankelijk van de context: dus hetzelfde plaatje kan in verschillende situaties ook verschillende alt-teksten nodig hebben.

Stel je hebt een foto van een hond. De alt-tekst kan dan per situatie verschillend zijn, afhankelijk van het doel van de afbeelding.

Bijvoorbeeld bij de foto van een hond:

  • Context: webpagina over blindengeleidenbonden. Alt-tekst: blindengeleidehond
  • Context: webpagina over hondenrassen. Alt-tekst: Labrador Retriever
Alt-tekst kan verschillen afhankelijk van het doel van de afbeelding

De schermlezer leest deze alt-tekst op en voegt daar nog 'Afbeelding van' of een soortgelijke tekst toe. In bovenstaand voorbeeld wordt dan bijvoorbeeld opgelezen 'Afbeelding van Labrador Retriever'.

De alt-tekst is niet alleen belangrijk voor mensen die de afbeelding niet kunnen zien, maar ook voor zoekmachines. Die gebruiken hem om de afbeelding te indexeren.

Als maximale lengte wordt 150 tekens aangehouden, alhoewel hier geen specifieke WCAG-richtlijn voor is. Dat is vergelijkbaar met de lengte van alt-teksten voor zoekmachines, die iets onder de 150 tekens ligt.

17.5 Omschrijving in de omringende tekst

Bij een complexe afbeelding kun je vaak ook goed de betekenis uitleggen in de omringende tekst.

Dat kan bijvoorbeeld bij een infographic. Het lijkt wellicht dubbel om de betekenis nog een keer in tekst uit te leggen, maar in de praktijk valt dat mee. Voor veel mensen is een tekstuele uitleg van de infographic ook fijn.

Verwijs je in de tekst niet expliciet naar de afbeelding, dan kan de alt-tekst leeg blijven. De afbeelding is dan decoratief en wordt overgeslagen door de schermlezer.

Infographics kun je vaak goed uitleggen in de omringende tekst.

17.6 Bijschrift

Een bijschrift staat boven of onder de afbeelding. De vormgeving is zo dat de gebruiker duidelijk ziet dat de tekst bij de afbeelding hoort.

Om ook voor schermlezergebruikers duidelijk te maken dat de tekst bij de afbeelding hoort, plaats je in de alt-tekst een verwijzing naar het bijschrift, bijvoorbeeld:

alt="Infographic over stikstof, zie bijschrift onder de afbeelding"

17.7 Tabel bij een grafiek

Een grafiek bevat vaak veel data en die kun je meestal niet kwijt in de omringende tekst of in een alt-attribuut. Een tabel met alle data onder de grafiek is dan een mooie oplossing. Niet alleen voor schermlezers, veel mensen vinden een grafiek moeilijker dan een tabel met daarin de cijfers.

Verwijs dan in de alternatieve tekst naar de tabel:

alt="Grafiek, zie onderstaande tabel"
Grafiek met tekstuele uitleg in de tabel

17.8 Kaarten

Een kaart is een visuele weergave van geografische informatie. Denk aan een kaartje met de hondenuitlaatplaatsen of een kaartje bij een dat aangeeft waar en wat er precies gebouwd gaat worden.

Kijk bij een kaart wat het doel of de essentie is. Probeer dit vervolgens te omschrijven in tekst. Een volledige uitleg van alles wat er op het kaartje te zien is hoeft echt niet.

Hieronder een voorbeeld van een kaart met het verspreidingsgebied van een zandhagedis in een gemeente:

Kaart met verspreidingsgebied van zandhagedis

Het is voldoende om in de tekst bij de afbeelding de volgende tekst op te nemen:

Binnen de gemeente komt de zandhagedis uitsluitend voor in het zuidelijk gedeelte van de gemeente (militair oefenterrein).

Noem je de kaart niet expliciet in de tekst, dan kan de kaart decoratief blijven. Een alternatieve tekst hoeft niet.

Verwijs je wel naar de kaart, neem dan in de alternatieve tekst een verwijzing naar de uitleg op.

17.9 Afbeelding is decoratief

Is de afbeelding decoratief of niet-informatief, dan mag de alt-tekst leeg blijven:

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

Een puur decoratieve afbeelding kun je ook via css plaatsen. Dit is bijvoorbeeld het geval bij onderstaande afbeelding van een bord met eten op de site van de provincie Noord-Brabant.

Decoratieve afbeelding

Vaak is het echter niet mogelijk om als webredacteur dit via de css te regelen en zul je de afbeelding gewoon in de content plaatsen. Gebruik dan een leeg alt-attribuut.

17.10 Aanklikbare afbeelding

Als de afbeelding aanklikbaar is, dan zijn de regels iets anders dan voor niet-aanklikbare afbeeldingen.

Er zijn 2 situaties:

  • In de link staat ook tekst.
  • In de link staat alleen de afbeelding.

Afbeelding is aanklikbaar EN er is wel linktekst

Als de afbeelding in een link staat met een tekst erbij, dan is de afbeelding ook niet-informatief en ook dan volstaat een leeg alt-attribuut. De screenreader leest dan de linktekst op.

Je moet hier wel echt in de html-code kijken of de tekst ook echt in de link staat. In onderstaand voorbeeld is de tekst in de link 'Bonobo's en chimpansees spreken dezelfde taal'

<a href="bonobos.html">
<img src="bonobos-chimps-321239.png" alt=""> <h2>Bonobo's en chimpansees spreken dezelfde taal</h2></a>
<p>Mensen begrijpen gebaren mogelijk ook</p>
Tekst in de link, geen alt-tekst nodig voor de afbeelding

Afbeelding is aanklikbaar EN er is geen linktekst

Situatie 2 is als de afbeelding aanklikbaar is en in de link staat geen tekst. Dan gebruik je wel een alt-tekst.

De alt-tekst omschrijft in dit geval de bestemming van de afbeelding: waar gaat de link naar toe? Vaak is dat ook de pagina waarnaar gelinkt wordt.

Het verschil in alt-tekst tussen wel en niet aanklikbaar kunnen we het beste even uitleggen met een voorbeeld van het twitter-icoon:

  • Als de afbeelding niet aanklikbaar is, omschrijf je wat er te zien is. In dit geval is de alt-tekst 'twitter-icoon'.
  • Is de afbeelding wel aanklikbaar, dan omschrijf je de bestemming. Dus de alt-tekst is dan 'twitter'.
<a href="https://twitter.com/GebrCentraal">
<img src="twitter-logo.png" alt="Twitter"></a>

17.11 Het logo van een site: informatief EN aanklikbaar

Een bijzondere afbeelding op een site is het logo. Dat heeft 2 functies:

  • Het informeert de bezoeker wie de afzender is.
  • Het is een link die leidt naar de homepage.

Wat moet je hier dan kiezen? Duidelijk maken wat er op de afbeelding te zien is of de bestemming beschrijven? De oplossing: allebei!

De alt-tekst vertelt wat er te zien is op het logo EN de bestemming. Bijvoorbeeld: bij het logo van de gemeente Delft wordt de alt-tekst 'Home gemeente Delft' of 'gemeente Delft, home'.

17.12 Title-attribuut: niet gebruiken voor afbeeldingen

Behalve een alt-tekst kun je ook nog een titel aan een afbeelding toevoegen. Dat doe je met het title-attribuut. Deze titel geeft de mouseover-tekst bij een afbeelding, zoals hieronder te zien is.

Afbeelding met title-attribuut (geeft tekst bij mouseover)

Gebruik dit title-attribuut niet voor links of bij afbeeldingen op je website, deze is altijd nutteloos en bijna altijd een dubbeling met de andere informatie.

Het title-attribuut is wel nodig bij een iframe en kan ook handig zijn bij webapplicaties of andere platforms waarbij gebruikers dagelijks de applicatie gebruiken.

17.13 Gebruik geen afbeeldingen van tekst

Afbeeldingen van tekst kun je niet gebruiken; ze zijn niet toegankelijk en ook niet gebruiksvriendelijk. De enige uitzondering zijn logo's.

Je kunt wel tekst op een afbeelding plaatsen, zodat het er uit ziet alsof de tekst in de afbeelding is. Als de tekst op de afbeelding zit, kan deze vergroot en verkleind worden en kan een screenreader deze ook makkelijk lezen.

Hieronder een voorbeeld van tekst op een afbeelding. Het bericht is opgebouwd uit 3 elementen:

  • foto van het zwembad
  • half doorzichtige grijze afbeelding
  • tekst

Via CSS wordt het samengevoegd tot 1 element.

Het is niet altijd direct te zien of de tekst los is van de afbeelding of dat de tekst is opgenomen in de afbeelding.

Selecteer dan alle tekst met Ctr-A (Cmd-A voor Mac-gebruikers) op een webpagina. Is alleen de tekst van de afbeelding geselecteerd, dan weet je dat de tekst los is van de afbeelding. En dat is dus goed!

17.14 WAI-ARIA: betere maar technische oplossingen voor tekstalternatieven

In bovenstaande paragrafen bespreken we vooral de mogelijkheden die een webredacteur heeft met het plaatsen van een tekstalternatief.

Het is echter ook mogelijk om de koppeling van tekst en afbeelding te doen met zogenaamde ARIA-attributen. ARIA staat voor Accessible Rich Internet Applications. Mogelijke attributen zijn aria-label, aria-labelledby en aria-describedby.

Vooral voor het koppelen van een bijschrift of uitleg bij een afbeelding is dit toegankelijker dan de methoden die we hierboven beschreven.

Het is echter een vrij technische oplossing en gezien de context van dit hoofdstuk bespreken we dit verder niet.

Wil je hier mee aan de slag (want het is zeker interessant) overleg dit dan eens met je webbouwer en kijk wat je samen hierin kunt doen.

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.