Complexe afbeeldingen
We hebben gezien hoe het werkt met “gewone” afbeeldingen en alternatieve tekst. Maar hoe werkt het als je kaarten of grafieken hebt. Of infographics? Hoe werkt het dan met alt-tekst? In dit artikel wordt het allemaal uitgelegd hoe het werkt voor afbeeldingen met visuele data: complexe afbeeldingen dus.
Problemen
- Vaak krijgen dit soort complexe afbeeldingen helemaal geen alternatief. Ze zijn haast nooit decoratief en hebben dus alt-tekst nodig.
- De alt-tekst - indien aanwezig - is niet correct en beschrijft niet alle visuele data.
- Het alt-attribuut is niet aanwezig (verplicht voor alle afbeeldingen).
- Vaak is er erg veel visuele data aanwezig, te veel om in een alt-tekst te beschrijven.
- SVG-bestanden worden niet correct aangeduid als een afbeelding.
Dit zijn inbreuken op succescriterium 1.1.1 Niet-tekstuele content.
💡 Opmerking: Behalve het toevoegen van een tekstueel alternatief zijn er nog een aantal zaken waar je op moet letten. Je mag niet enkel op kleur steunen om informatie over te brengen. Lees daar meer over in Niet steunen op enkel kleur: toegankelijk maken voor kleurenblinden.
Kaarten
Hoe maak je wegenkaarten met een aangeduide route en weerkaarten toegankelijk? Of archeologische kaarten? De enige manier is om in tekst een alternatief te geven. Geef een routebeschrijving. Geef aan wat de weersverwachtingen voor de provincies zijn. Kortom: leg exact uit wat er op de kaart te zien is. Dat noemen we een uitgebreide beschrijving.
Dat kan in een paragraaf onder de kaart of op een aparte pagina. Het is wel belangrijk de uitgebreide beschrijving te koppelen aan een afbeelding. Dat kan door de paragraaf een ID te geven en die te koppelen via aria-describedby aan de afbeelding. In de alt-tekst omschrijf je kort en bondig wat te zien en meldt je dat een uitgebreidere beschrijving onder de afbeelding volgt.
Er kan ook een link onder de kaart geplaatst worden en in de alt-tekst verwijzen dat er een link naar een uitgebreide beschrijving onder de afbeelding volgt.
Grafieken
Grafieken bevatten veel informatie. Vaak gaat het ook om relaties die je af kunt leiden. Een land en het aantal inwoners bijvoorbeeld. Of een politieke partij en het aantal stemmen. De beste manier om dit via tekst over te brengen is een datatabel. Een correct opgemaakte datatabel is toegankelijk en screenreaders kunnen de relaties tussen de kolommen en de cellen dan zonder problemen correct overbrengen.
Naast een datatabel is het een goede gewoonte om de data ook via een spreadsheet of CSV-formaat aan te bieden. Dit geeft mensen de kans de data in een tool van hun eigen voorkeur in te laden en zo de data te bekijken of voor te laten lezen.
Een andere mogelijkheid naast een datatabel, maar wat complexer, is proberen de grafiek uit SVG’s op te bouwen en de SVG’s toegankelijk te maken. Lees de tutorial over lijngrafieken van CSS Tricks om te leren hoe je dat doet.
Conclusie
Complexe afbeeldingen hebben een alternatief nodig dat toegankelijk is: een uitgebreide beschrijving. Redacteuren moeten getraind worden in het herkennen wanneer uitgebreide beschrijvingen nodig zijn.
Zonder aandacht voor deze zaken, zal een groot deel van deze data niet toegankelijk zijn en onbruikbaar zijn voor een grote groep mensen en voldoet je project niet aan de succescriteria van de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG).
👉️ Opmerkingen? Vragen? Iets onduidelijk of onvolledig? Of vond je het helemaal geweldig? Stuur me een mailtje met je feedback!
Credits
Deze pagina is grotendeels gebaseerd op een vertaling van WebAim’s pagina over alternatieve tekst.