u bent hier

Een afbeelding is toegankelijk als ze een tekstalternatief heeft, ook wel vervangende tekst genoemd. Dit is van toepassing voor alle afbeeldingen op webpagina's, in documenten, in e-mails, nieuwsbrieven, op sociale media en in mobiele toepassingen. In een ander artikel lees je over de technieken om een vervangende tekst te geven aan een afbeelding in die verschillende toepassingen en afhankelijk van hoe de afbeelding is ingevoegd in de webpagina. Dit artikel gaat over de inhoud van het tekstalternatief afhankelijk van het doel van de afbeelding en de context.

Waarom tekstalternatieven?

Beelden maken websites en documenten visueel aantrekkelijk en ze kunnen helpen bij de oriëntatie. Goedgekozen beelden kunnen ook helpen om de inhoud beter te begrijpen, in het bijzonder voor mensen met een leerstoornis.

Maar als je informatie enkel via beelden communiceert, is dat ontoegankelijk voor blinden en sommige slechtzienden. Tekstalternatieven zijn dan nodig en ze hebben nog andere voordelen:

  • Gebruikers van een screenreader horen het tekstalternatief of lezen het in braille
  • Gebruikers van dicteersoftware kunnen grafische elementen enkel activeren als ze een tekstalternatief hebben
  • Als je het laden van afbeeldingen uitzet in de browser of je e-mailprogramma (bijvoorbeeld bij een trage internetverbidninding), krijg je de tekstalternatieven te zien en mist zo geen informatie.
  • Tekstalternatieven zijn ook belangrijk voor zoekmachines die je website indexeren.

Algemene principes voor tekstalternatieven

Decoratieve afbeelding

Een afbeelding is decoratief als ze geen functie heeft en geen informatie toevoegt. Als je een afbeelding als decoratief markeert, zal een screenreader ze negeren. Dat doe je meestal door een lege alternatieve tekst te geven

Het typevoorbeeld van een decoratieve afbeelding is een illustratie bij een artikel of een thema. In het voorbeeld hieronder is de foto van de bakker boven de titel 'Zelfstandigen' decoratief.

foto van een bakker gevolgd door een titel en de tekst au sujet d'incapacité de travail

Een afbeelding die informatie herhaalt die ook in tekst wordt gegeven, is ook decoratief.

  • In het voorbeeld hieronder zijn de afvalsoorten voor de groene zak aangegeven met tekst (bladeren, takken, etc) samen met foto's. De foto's kunnen we als decoratief beschouwen omdat we ze kunnen weglaten zonder informatie te verliezen.

    4 soorten groenafval met een illustratieve foto

  • De pictogrammen met tekst zijn meestal dubbelop, zoals bijvoorbeeld het pictogram van een kaartlezer, naast de tekst 'Aanmelden met een eId-kaartlezer':

    screenshot pictogram kaartlezer

Informatiedragende afbeelding

Als de afbeelding informatie bevat, moet ze een volwaardig tekstalternatief hebben.

Bijvoorbeeld, als je de lijst toont van parnterorganisaties in de vorm van logo's van die organisaties, dan zal het tekstalternatief van elk logo de naam van de organisatie zijn.

Bij een afbeelding die tekst bevat, herhaal je de tekst als tekstalternatief.

Vermijd zoveel mogelijk om tekst in afbeeldingen weer te geven.

Aanklikbare afbeelding

Als de afbeelding in een link of knop staat, hangt het tekstalternatief af van de context:

  • De afbeelding is de enige inhoud van de link of knop, zonder andere tekst: de vervangende tekst moet de bestemming of de functie van de link aangeven. Bijvoorbeeld 'Facebook' voor een icoon dat dient als link naar Facebook, of 'menu' voor een icoon dat dient om een menu te tonen.

    iconen Twitter, Facebook, LinkedIn, YouTube

  • Als de link of knop zowel tekst als een afbeelding bevat, dan is de afbeelding meestal decoratief. Bijvoorbeeld een link die een icoon van een envelop bevat en ook de tekst 'messages'.

    icoon envelop, naast het woord message

Complexe afbeelding

Met complexe afbeeldingen bedoelen we grafieken, kaarten, organigrammen, infografieken, of elk grafisch element waarvoor een vervangende tekst van ongeveer 80 karakters niet volstaat.

Deze afbeeldingen zijn informatiedragend en geef je dus een beknopte vervangende tekst die aangeeft waarover het gaat, bijvoorbeeld "organigram van de communicatieafdeling" of "evolutie van de toegankelijkheid van websites van 2011 tot 2021".

Hiermee weet een blinde bezoeker nog niet hoe het organigram er uit ziet en of het aantal toegankelijke websites in die periode is gedaald of gestegen. Voorzie dus ook een tekstuele versie van de informatie die in de afbeelding te zien is. Het kan gaan om een beschrijving in de vorm van tekst, of een gegevenstabel. De informatie die in deze tekstversie zit, moet dezelfde zijn als die beschikbaar is in de complexe afbeelding. Ze moet gemakkelijk te vinden zijn en het moet duidelijk zijn bij welke afbeelding de beschrijving hoort. Het kan gaan om een tekst op dezelfde pagina of om een link die leidt naar een andere pagina.

Voorbeeld: screenshots:

  • Screenshots kunnen heel handig zijn in een softwarehandleiding om instructies te illustreren.
  • Geef elke screenshot dan een tekstalternatief.
  • En beschrijf de stappen ook in woorden.

Opgelet: een foto van tekst is geen tekst. Screenreaders en zoekmachines kunnen er niets mee, de tekst is moeilijk te vergroten, de tekst is niet kopieerbaar en als er links in voorkomen zijn ze niet aanklikbaar. Voorvoorkomend:

  • Een uitnodiging of nieuwjaarskaart die is opgemaakt in een grafisch pakket. Die kan je niet zomaar in een e-mail plakken en verzenden. Voorzie de informatie ook in tekst.
  • Publiceer op een restaurantwebsite de menukaart niet door elke bladzijde te fotograferen.
  • Een PDF-document dat enkel bestaat uit gescande pagina's is niettoegankelijk.

Reacties


Anne Ruysseveldt

schreef
Ik vind de info over wel of geen alt-tekst zetten bij een afbeelding heel interessant. Info die ik mis in andere artikels/sites over alt-tekst voor toegankelijkheid. Van anysurfer.be had ik dan toch wat voorbeelden verwacht van goede én slechte voorbeelden van tekst. Wat heel belangrijk opdat je tekst ook echt een meerwaarde wordt voor toegankelijkheid.