u bent hier

Een afbeelding is toegankelijk als ze een alternatieve tekst heeft, ook wel vervangende tekst genoemd. Die tekst is niet zichtbaar als de afbeelding wordt getoond. Maar ze wordt gezien door hulpmiddelen en zoekmachines.

In functie van het type afbeelding (HTML, CSS, svg, icon font, PDF, ...), gebruiken we verschillende technieken om een vervangende tekst te geven aan een afbeelding, de bekendste is het alt-attribuut.

De redenering om de inhoud van de alternatieve tekst te bepalen, blijft altijd dezelfde. Een alternatieve tekst moet de afbeelding kunnen vervangen. Het hangt af van de context. De inhoud van de pagina moet betekenisvol en volledig zijn als we alle afbeeldingen vervangen door hun alternatieve tekst.

Om welke soorten afbeeldingen gaat het?

Decoratieve afbeelding

Een afbeelding is decoratief als ze geen functie heeft en geen informatie toevoegt. Ze moet worden genegeerd door hulpmiddelen. 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 afbeelding 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

Als de afbeelding informatie bevat die dubbelop is met de tekst, kunnen we ze ook als decoratief beschouwen.

  • 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

Opgelet, een aanklikbare afbeelding kan meestal niet worden beschouwd als decoratief omdat ze een functie heeft (link of knop).

Informatiedragende afbeelding

Als de afbeelding informatie bevat, moet ze een pertinente vervangende tekst 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.

De vervangende tekst maakt deel uit van de inhoud en moet dus in de taal van de pagina zijn en de spelling- en grammaticaregels respecteren.

Aanklikbare afbeelding

Als de afbeelding aanklikbaar is, moeten we twee soorten onderscheiden.

Het eenvoudigste geval is waar de afbeelding de enige inhoud is van een link, zonder 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 afbeelding zich bevindt in een link met tekst, dan is de afbeelding vaak dubbelop, en dan kunnen we ze beschouwen als decoratief. Dat is bijvoorbeeld het geval als een icoon een envelop voorstelt in een link die ook de tekst 'messages' bevat.

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.

Voor dit soort afbeeldingen moet je enerzijds een beknopte vervangende tekst voorzien die aangeeft waarovr het gaat, bijvoorbeeld 'organigram van de raad van bestuur' of 'evolutie van de toegankelijkheid van websites van 2011 tot 2016'.

Anderzijds moet je een tekstuele versie van de afbeelding voorzien. 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.


Reacties

Reageer als eerste