In deze tijd van digitalisering mag het thema toegankelijkheid niet worden verwaarloosd. Een manier om mensen met een beperking de toegang tot inhoud op internet te vergemakkelijken, zijn zogenaamde alternatieve teksten. Deze teksten zijn zo opgesteld dat ze mensen met bepaalde beperkingen de inhoud van een website weergeven in een voor hen begrijpelijke vorm. Maar: wat is zo’n alternatieve tekst precies? Wie heeft ze nodig? En hoe kun je er een maken?
Om websites en webcontent toegankelijk te maken, zijn onder andere alternatieve teksten van groot belang om de toegang voor mensen met een beperking te vergemakkelijken. Ze bieden informatie en functies voor blinde en slechtziende mensen, evenals voor mensen met lichamelijke of cognitieve beperkingen. Ze helpen ook bij het begrijpen van afbeeldingen, foto’s en bedieningselementen. Schermlezers of brailleregels maken gebruik van de alternatieve teksten en maken deze elementen zo toegankelijk voor mensen met een beperking.
Aan de andere kant zijn ze ook nuttig voor zoekmachineoptimalisatie. De tekstalternatieven geven de zoekmachines informatie over een afbeelding. Hierdoor wordt de vindbaarheid verbeterd.
Hoe maak je tekstalternatieven?
Het antwoord op de vraag hoe je een tekstalternatief aanmaakt, is heel eenvoudig: je hoeft alleen maar in het daarvoor bestemde veld van een element dat van een dergelijke tekst moet worden voorzien, een alternatieve tekst in te voeren. De meeste ontwikkelaars doen dit in een zogenaamd CMS. De afkorting CMS staat voor Content Management System. Dit is software die wordt gebruikt voor het maken en beheren van webcontent.
De programmeertaal HTML kan hier ook voor worden gebruikt. Hier komt het alt-attribuut, ook wel alt-tag genoemd, om de hoek kijken. Dit wordt binnen de img-tag geplaatst. In het alt-attribuut wordt de tekst geschreven die vervolgens via de ondersteunende technologieën wordt weergegeven.
Dat alleen is echter niet voldoende. Ook het title-attribuut mag niet worden vergeten, aangezien er schermlezers zijn die niet de beschrijving van het alt-attribuut voorlezen, maar wel die van het title-attribuut. Daarom is het ook zinvol om bij beide tags dezelfde tekst op te geven. Bovendien zorgt dit ervoor dat de inhoud als aanvullende informatie over een element wordt weergegeven wanneer je met de muis over het gebied beweegt.
Daarnaast is er nog het aria-attribuut. Om precies te zijn: het aria-label-attribuut of het aria-labelledby-attribuut. Deze worden gebruikt om knoppen of formuliervelden te labelen.
De verschillende soorten afbeeldingen
In een wereld waarin we steeds meer digitaliseren, volstaat het niet om alleen tekstalternatieven op te stellen. Het is veel effectiever om de verschillende soorten afbeeldingen correct te beschrijven, aangezien ze ook qua functie van elkaar verschillen. Deze moeten echter eerst worden herkend. Beschrijvingen zijn nutteloos als ze de functie van een afbeelding niet kunnen weergeven. De vraag rijst dus: welke soorten afbeeldingen zijn er? En hoe kun je ze het beste beschrijven?
Allereerst is het belangrijk om vertrouwd te raken met de verschillen tussen de verschillende soorten grafieken. Daarbij is het van belang om de betekenis en het doel van een grafiek te begrijpen. Over het algemeen wordt er onderscheid gemaakt tussen informatieve, functionele en decoratieve grafieken. Daarnaast zijn er nog de zogenaamde letterbeelden. De beschrijving hiervan is heel eenvoudig: je neemt hier gewoon de tekst over die in de grafiek te zien is.
Informatieve afbeeldingen
Bij informatieve afbeeldingen wordt de zichtbare inhoud van een afbeelding weergegeven door middel van alternatieve teksten. Daarbij wordt gelet op informatie die relevant is voor de boodschap van de afbeelding. Een voorbeeld hiervan is een beschrijving van een logo. Hierin wordt kort beschreven hoe het logo eruitziet en van wie het afkomstig is.
In het volgende voorbeeld wordt in HTML een tekstalternatief in een logo geïntegreerd:
<img
src="logo.jpg"
alt="Het Eye-Able-logo. Het stelt een oog voor."
title="Het Eye-Able-logo. Het stelt een oog voor.">
</img>
Hier wordt een afbeeldingsbestand met het img-element in HTML ingesloten, waarbij het src-attribuut de bron van de afbeelding aangeeft. De beschrijving van de afbeelding wordt tussen aanhalingstekens in de attributen alt en title geplaatst. Op deze manier wordt de tekst „Het Eye-Able-logo. Het stelt een oog voor“ via de schermlezer of de brailleleesregel weergegeven.
Op deze manier wordt de drempel weggenomen en kunnen alle mensen die gebruikmaken van ondersteunende technologieën begrijpen wat er op deze afbeelding te zien is.
Diagrammen
Als het echter om een diagram gaat, moet dit altijd per geval worden bekeken. Dit hangt vaak af van het soort diagram en de informatie die erin is opgenomen. Als de afbeelding slechts weinig informatie bevat, kan deze in de alternatieve tekst worden opgenomen. Bijvoorbeeld: „Geeft de verkiezingsuitslagen van de partijen weer in een staafdiagram. Partij A: 40%, Partij B: 30%, Partij C: 20% enz.“. Als er echter iets complexers of langers wordt weergegeven, is het raadzaam om de gedetailleerde informatie in een daaropvolgende tekst op te nemen. In de alternatieve tekst moeten dan alleen het type en het doel van de grafiek worden vermeld. Daarnaast kan worden aangegeven dat de meer gedetailleerde beschrijving verderop volgt. Een voorbeeld hiervan is een grafiek die de bevolkingsaantallen van de deelstaten weergeeft. De inhoud zou dan luiden: „Geeft de bevolkingsaantallen van de 16 deelstaten weer in een staafdiagram. Opmerking: de meer gedetailleerde beschrijving volgt in de tekst“.
Functionele afbeeldingen
Vervolgens bekijken we de functionele afbeeldingen. Dit zijn afbeeldingen met een link. Ze worden onderverdeeld in links, elementen of knoppen. In de tekstalternatieven wordt de functie beschreven, en niet wat er op de afbeelding te zien is. In plaats daarvan wordt aangegevenwaarde link naartoe leidt.
Hier is een voorbeeld in HTML van een afbeelding met een link:
<a href=“https://services.eye-able.com/“>
<img src=“logo.jpg“
alt="Startpagina van Eye-Able"
title="Startpagina van Eye-Able"
</img>
</a>
De a-tag en het href-attribuut worden in HTML gebruikt om een link te maken. In dit geval wordt de link naar de pagina https://services.eye-able.com/ gemaakt. In het img-element zien we opnieuw het logo van Eye-Able, maar deze keer beschrijven de alt- en title-attributen niet de afbeelding, maar de functie. Zo wordt de tekst „Startpagina van Eye-Able“ nu via de ondersteunende technologieën weergegeven.
Hetzelfde geldt voor pictogrammen. Als er bijvoorbeeld een diskette wordt gebruikt, is het uiterlijk van het pictogram niet relevant voor de weergave door een schermlezer, omdat het de functie van het opslaan symboliseert. Een ander voorbeeld zijn zoekpictogrammen. Of het hier om een vergrootglas gaat, doet er niet toe. Veel interessanter is namelijk de handeling die erachter schuilgaat. Hiermee wordt een zoekoptie of het starten van een zoekopdracht weergegeven.
Hetzelfde geldt voor knoppen. Een knop met een pijl naar rechts mag in de alternatieve tekst nooit worden omschreven als „pijl naar rechts“. Voor iemand die kan zien, is het duidelijk dat de volgende pagina wordt geopend als je erop klikt, maar voor blinde mensen is dat niet het geval. Zij horen via de spraakuitvoer namelijk alleen „pijl naar rechts“. Dat is niet eenduidig genoeg en maakt niet duidelijk dat de volgende pagina wordt geopend wanneer de knop wordt ingedrukt. Daarom is het zinvoller om deze alternatieve teksten te formuleren als „naar de volgende pagina“ of „verder bladeren“.
Decoratieve schilderijen
Een ander soort afbeeldingen zijn decoratieve afbeeldingen. Deze worden gebruikt om een webpagina te verfraaien. De werkwijze bij het opstellen van alternatieve teksten is hier heel eenvoudig. De inhoud van de alternatieve tekst wordt hier leeg gelaten. Het is belangrijk dat het attribuut voor de alternatieve tekst wel aanwezig is. Alleen de tekstinhoud blijft hier leeg. Dit heeft tot gevolg dat de schermlezer deze irrelevante afbeelding bij het voorlezen overslaat.
Hoe schrijf je goede alternatieve teksten?
Nu de verschillende afbeeldingen zijn besproken, blijft er nog maar één vraag over: „Hoe schrijf je optimale alternatieve teksten?“ Als je al deze nuances en verschillen tussen de afbeeldingen kent, zijn er nog maar een paar regels waar je rekening mee moet houden. De volgende tips kunnen daarbij helpen:
- Begin van een tekstalternatief:
Hier moet erop worden gelet dat er geen herhalingen ontstaan. Het begin mag dus niet beginnen met: „De afbeelding …“, „De grafiek …“, „De foto …“ of „De link“ … Of het nu om een grafiek of een link gaat, wordt sowieso door schermlezers herkend en uitgesproken. Daarom moet hiervan worden afgezien.
Lengte van de teksten:
Er is geen vaste regel voor hoe lang een alternatieve tekst moet zijn. Voor de beschrijving van een afbeelding zouden één tot twee zinnen echter voldoende moeten zijn. Het ideaal is 80 tekens. Waarom 80? Blinde mensen lezen deze teksten vaak met behulp van een brailleleesregel. Brailleleesregels kunnen tussen de 40 en 80 tekens tegelijk weergeven. Omwille van de overzichtelijkheid is het daarom raadzaam om je aan deze limiet te houden. Natuurlijk mag een tekst ook langer zijn. Deze mag echter niet langer zijn dan 120 tekens.
Spelling en interpunctie:
Er moet op correcte spelling worden gelet. Als een woord een spelfout bevat, kan dit al snel tot onduidelijkheden leiden, aangezien een schermlezer precies datgene voorleest wat in de alternatieve tekst is opgenomen. Ook correcte grammatica speelt een belangrijke rol bij het begrijpen van afbeeldingen. Maar ook correcte interpunctie is daarbij van belang. Verkeerde of ontbrekende leestekens maken het voor de luisteraar namelijk moeilijker om de afbeelding te begrijpen. Daarom moet er, voordat de tekstinhoud wordt ingevoegd, een spelling- en grammaticacontrole worden uitgevoerd.
Auteursrechten:
Veel afbeeldingen zijn voorzien van een auteursrechtvermelding. Maar is deze informatie wel belangrijk om een afbeelding te begrijpen? Het antwoord is: nee! Voor het goed formuleren van tekstalternatieven is deze informatie niet relevant, aangezien in een afbeeldingsbeschrijving alleen het belangrijkste wordt vermeld. Daarom moet deze informatie worden weggelaten.
Feedback:
Of de beeldbeschrijving geslaagd is, kun je snel vaststellen. Maar hoe? Die vraag is eenvoudig te beantwoorden. Daar is geen grote inspanning voor nodig. Een korte reactie van een blinde of slechtziende persoon geeft aan of de tekst inhoudelijk goed is geformuleerd. Maar niet iedereen kent iemand met een visuele beperking. Er is ook een andere oplossing. Iedereen die de afbeelding nog niet heeft gezien, kan hierom gevraagd worden. Dit kan natuurlijk schriftelijk, maar ook telefonisch. Zodra er een „positieve“ reactie komt, is de beschrijving geslaagd.
Wat gebeurt er eigenlijk als er alternatieve teksten ontbreken?
Het ontbreken van alternatieve teksten bij afbeeldingen kan vooral voor blinde gebruikers vervelend zijn. Dit zou er namelijk toe leiden dat zij de inhoud van de afbeelding niet kunnen volgen. Tegelijkertijd zou de schermlezer in zo’n geval alleen de bestandsnaam voorlezen, bijvoorbeeld: „img123.jpg“. Met zo’n beschrijving is niemand gebaat. Ontwikkelaars moeten er daarom altijd op letten dat ze tekstuele inhoud gebruiken. Het is echter ook belangrijk om de verschillen te kennen, zodat afbeeldingen en grafieken op een zinvolle manier kunnen worden beschreven. Ondersteunende technologieën kunnen deze vervolgens met behulp van de alternatieve teksten weergeven. Hierdoor wordt het internet voor iedereen een stuk toegankelijker.
