Hoe een toegankelijke lezing van beelden mogelijk is!

In tijden van digitalisering mag de kwestie van toegankelijkheid niet worden verwaarloosd. Eén manier om het voor mensen met een handicap makkelijker te maken om toegang te krijgen tot inhoud op het internet is door middel van zogenaamde alternatieve teksten. Deze teksten zijn ontworpen om mensen met bepaalde handicaps de inhoud van een website te bieden in een vorm die ze kunnen begrijpen. Maar: Wat is zo'n alternatieve tekst precies? Wie heeft er behoefte aan? En hoe kun je er een maken?

Om websites en webinhoud toegankelijk te maken, zijn onder andere alternatieve teksten erg belangrijk om de toegang voor mensen met een beperking te vergemakkelijken. Ze brengen informatie en functies over voor blinden en slechtzienden en voor mensen met fysieke of cognitieve beperkingen. Ze helpen mensen ook om afbeeldingen, foto's en bedieningselementen te begrijpen. Schermlezers of brailleleesregels gebruiken de tekstalternatieven, waardoor deze elementen toegankelijk worden voor mensen met een beperking.

Aan de andere kant zijn ze ook nuttig voor zoekmachineoptimalisatie. De tekstalternatieven brengen de informatie over een afbeelding over naar de zoekmachines. Dit verbetert de vindbaarheid.

Hoe maak je tekstalternatieven?

Het antwoord op de vraag hoe je een tekstalternatief maakt, is vrij eenvoudig: om dit te doen, voeg je gewoon een alternatieve tekst in in het daarvoor bestemde gebied van een element dat van zo'n tekst wordt voorzien. De meeste ontwikkelaars passen dit toe in een zogenaamd CMS. De afkorting CMS staat voor Content Management System. Dit is software die wordt gebruikt voor het maken en beheren van webinhoud.

Hiervoor kan ook de programmeertaal HTML worden gebruikt. Daar komt het alt-attribuut, ook wel alt-tag genoemd, om de hoek kijken. Daar wordt het ingevoegd in de tag img. De tekst wordt geschreven in het binnengebied van het alt-attribuut, dat vervolgens wordt uitgevoerd via de ondersteunende technologieën.

Dit alleen is echter niet genoeg. Het title-attribuut mag ook niet worden vergeten, omdat er schermlezers zijn die niet de beschrijving van het alt-attribuut lezen, maar die van het title-attribuut. Daarom is het ook zinvol om voor beide tags een identieke tekst op te geven. Bovendien heeft dit ook de functie om de inhoud weer te geven als extra informatie over een element wanneer de muis over het gebied wordt bewogen.

Verder is er het aria attribuut. Om precies te zijn, het aria-label attribuut of ook het aria-labelledby attribuut. Deze worden gebruikt om knoppen of formuliervelden te labelen.

De verschillende soorten afbeeldingen

In een wereld waarin we steeds digitaler worden, is het niet genoeg om alleen maar tekstalternatieven te maken. Het is veel effectiever om de verschillende soorten afbeeldingen correct te beschrijven, omdat ze ook verschillen in hun functie. Deze moeten echter eerst worden herkend. Beschrijvingen zijn nutteloos als ze de functie van een afbeelding niet kunnen weergeven. Dus rijst de vraag: Welke soorten afbeeldingen zijn er? En wat is de beste manier om ze te beschrijven?

Eerst moet je vertrouwd raken met de verschillen tussen de verschillende soorten afbeeldingen. Het is belangrijk om het doel van een afbeelding te begrijpen. Over het algemeen wordt er een onderscheid gemaakt tussen informatieve, functionele en decoratieve afbeeldingen. Daarnaast zijn er de zogenaamde lettertypes. Hier is de beschrijving heel eenvoudig, men neemt hier gewoon de tekst over die in het diagram te zien is.

Informatieve afbeeldingen

Bij informatieve afbeeldingen wordt de zichtbare inhoud van een afbeelding overgebracht door alternatieve teksten. Er wordt aandacht besteed aan informatie die relevant is voor de boodschap van de afbeelding. Een voorbeeld hiervan is een logobeschrijving. Hier wordt kort beschreven hoe het logo eruitziet en van wie het is.

In het volgende voorbeeld wordt een tekstalternatief geïntegreerd in een logo in HTML:

<img

src="logo.jpg"

alt="Het Eye-Able logo. Het stelt een oog voor."

title="Het logo van Eye-Able. Het stelt een oog voor.">

</img>

Hier wordt een afbeeldingsbestand ingesloten in HTML met het img element, waarbij het src attribuut de bron van de afbeelding specificeert. De beschrijving van de afbeelding wordt tussen aanhalingstekens geplaatst in de alt- en title-attributen. Op deze manier wordt de tekst "Het Eye-Able logo. Het stelt een oog voor" wordt uitgevoerd via de schermlezer of brailleleesregel.

Op deze manier wordt de barrière weggenomen en kunnen alle mensen die ondersteunende technologieën gebruiken, begrijpen wat er in deze afbeelding te zien is.

Diagrammen

Als het echter om een diagram gaat, moet dit altijd per geval worden besloten. Dit hangt vaak af van het type diagram en de informatie die erin staat. Als het diagram slechts weinig informatie bevat, kan dit worden opgenomen in de alternatieve tekst. Bijvoorbeeld: "Presenteert de verkiezingsresultaten van de partijen in een staafdiagram. Partij A: 40%, Partij B: 30%, Partij C: 20%, enzovoort." Als er echter iets complexers of langdurigers wordt gepresenteerd, is het aan te raden om de gedetailleerde informatie in een volgende tekst op te nemen. De alternatieve tekst zou dan alleen het type en het doel van het diagram moeten vermelden. Daarnaast kan worden aangegeven dat de meer gedetailleerde beschrijving hieronder volgt. Een voorbeeld is een diagram met bevolkingscijfers van de Duitse deelstaten. De inhoud zou dan luiden: "Geeft de bevolkingscijfers van de 16 deelstaten weer in een staafdiagram. Opmerking: de meer gedetailleerde beschrijving volgt in de tekst".

Functionele beelden

Laten we nu eens kijken naar de functionele afbeeldingen. Dit zijn gekoppelde afbeeldingen. Ze zijn onderverdeeld in links, elementen of knoppen. In de tekstalternatieven definieer je de functie en niet wat je moet herkennen. In plaats daarvan geef je aan waar de link naartoe leidt.

Hier is zo'n voorbeeld in HTML voor een gekoppelde afbeelding:

<a href=“https://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 gemaakt naar de pagina https://eye-able.com/. In het img-element zien we opnieuw het logo van Eye-Able, maar deze keer beschrijven het alt- en title-attribuut de functie in plaats van de afbeelding. De inhoud "Startpagina van Eye-Able" wordt nu dus uitgevoerd via ondersteunende technologieën.

Hetzelfde geldt voor symbolen. Als er bijvoorbeeld een diskette wordt gebruikt, is het uiterlijk van het pictogram niet relevant voor uitvoer met een schermlezer omdat het de functie van opslaan symboliseert. Een ander voorbeeld zijn zoekiconen. Of dit een vergrootglas is of niet is irrelevant. Veel interessanter is de actie erachter. Dit staat voor een zoekoptie of de start van een zoekopdracht.

De situatie is vergelijkbaar met knoppen. Een knop die een pijl naar rechts voorstelt, mag nooit "pijl naar rechts" in de alternatieve tekst hebben. Voor een ziende is het duidelijk dat de volgende pagina wordt geopend als je erop klikt, maar niet voor een blinde. Dit komt omdat zij alleen "pijl naar rechts" horen via de spraakuitvoer. Dit is niet duidelijk genoeg of laat niet zien dat de volgende pagina wordt geopend als de knop wordt ingedrukt. Daarom is het zinvoller om deze alternatieve teksten te voorzien van "ga naar de volgende pagina" of "blijf scrollen".

Decoratieve afbeeldingen

Een ander type afbeeldingen zijn decoratieve afbeeldingen. Deze worden gebruikt om een webpagina te versieren. De procedure voor het maken van alternatieve teksten is hier heel eenvoudig. Hier wordt de inhoud van de alternatieve tekst leeg gelaten. Het is belangrijk dat het attribuut van de alternatieve teksten nog steeds aanwezig is. Alleen de tekstinhoud wordt hier leeg gelaten. Dit heeft als gevolg dat de schermlezer deze irrelevante afbeelding overslaat in de uitvoer.

Hoe schrijf je goede alternatieve teksten?

Nu de verschillende afbeeldingen zijn geïntroduceerd, blijft er nog maar één vraag over: "Hoe formuleer je optimale alternatieve teksten?" Zodra je al deze subtiliteiten en verschillen van de afbeeldingen kent, zijn er slechts een paar regels die je moet volgen. De volgende tips kunnen helpen:

1. Begin van een tekstalternatief:

   Hier moet ervoor worden gezorgd dat er geen doublures ontstaan. Het begin mag daarom niet beginnen met: "De afbeelding ...", "De afbeelding ...", "De foto ..." of "De link" .... Of het een afbeelding of een link is, wordt sowieso herkend en uitgevoerd door screenreaders. Daarom moet dit achterwege worden gelaten.

2. Lengte van de teksten:

   Er wordt niet gespecificeerd hoe lang een alternatieve tekst moet zijn. Een tot twee zinnen zou echter voldoende moeten zijn voor de beschrijving van een afbeelding. De ideale lengte is 80 tekens. Waarom 80? Blinde mensen lezen deze teksten vaak met behulp van een brailleleesregel. Brailleleesregels kunnen tussen de 40 en 80 tekens per keer weergeven. Voor de duidelijkheid is het daarom aan te raden om deze limiet aan te houden. Natuurlijk kan een tekst langer zijn. Hij mag echter niet langer zijn dan 120 tekens.

3. Spelling en interpunctie:

   Er moet worden gelet op een correcte spelling. Als een woord een spelfout bevat, kan dit snel leiden tot ambiguïteit, aangezien een schermlezer precies weergeeft wat is opgeslagen in de alternatieve tekst. Correcte grammatica speelt ook een belangrijke rol bij het begrijpen van afbeeldingen. Maar ook correcte interpunctie is relevant. Onjuiste of ontbrekende interpunctie maakt het moeilijk voor de luisteraar om de afbeelding te begrijpen. Daarom moet een spelling- en grammaticacontrole worden uitgevoerd voordat de tekstinhoud wordt ingevoegd.

4. Auteursrechten:

   Veel afbeeldingen hebben een copyrightvermelding. Maar is deze informatie belangrijk om een afbeelding te begrijpen? Het antwoord is: Nee! Voor een goede formulering van tekstalternatieven is deze informatie oninteressant, omdat in een afbeeldingsbeschrijving alleen de belangrijkste dingen worden geschreven. Daarom moet deze informatie worden weggelaten.

5. Feedback:

   Het is gemakkelijk om te bepalen of de afbeeldingsbeschrijving succesvol is. Maar hoe? Deze vraag is gemakkelijk te beantwoorden. Het vergt niet veel inspanning. Een korte feedback van een blinde of slechtziende persoon geeft informatie over of de tekstinhoud zinvol is geformuleerd. Maar niet iedereen kent iemand met een oogbeperking. Dit kan op een andere manier worden opgelost. Iedereen die de afbeelding nog niet heeft gezien, kan hier worden ondervraagd. Dit kan hier natuurlijk schriftelijk, maar ook telefonisch. Zodra hier een "positieve" terugkoppeling komt, is de beschrijving geslaagd.

Wat gebeurt er eigenlijk als alternatieve teksten ontbreken?

Het ontbreken van alternatieve teksten voor afbeeldingen kan vooral vervelend zijn voor blinde gebruikers. Dit zou betekenen dat ze de inhoud van de afbeelding niet kunnen zien. Tegelijkertijd zou de schermlezer in zo'n geval alleen de bestandsnaam weergeven, zoals: "img123.jpg". Zo'n beschrijving zou niemand helpen. Ontwikkelaars moeten er daarom altijd voor zorgen om tekstinhoud te gebruiken. Het is echter ook belangrijk om de verschillen te kennen om afbeeldingen en grafieken op een zinvolle manier te kunnen beschrijven. Hulptechnologieën kunnen ze dan weergeven met behulp van de tekstalternatieven. Dit maakt het internet ook een beetje toegankelijker voor iedereen.