Hoe een toegankelijke interpretatie van beelden mogelijk is!

In het digitale tijdperk mag de kwestie van toegankelijkheid niet worden verwaarloosd. Een manier om het voor mensen met een beperking gemakkelijker te maken om toegang te krijgen tot content op internet, is door middel van zogenaamde alternatieve teksten. Deze teksten zijn ontworpen om mensen met bepaalde beperkingen de inhoud van een website aan te bieden in een vorm die ze kunnen begrijpen. Maar: wat is zo'n alternatieve tekst precies? Wie heeft ze nodig? En hoe maak je er een?

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

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

Hoe maak je tekstalternatieven aan?

Het antwoord op de vraag hoe je een tekstalternatief maakt, is vrij eenvoudig: je hoeft alleen maar een alternatieve tekst in te voegen in het daarvoor bestemde gedeelte van een element dat van zo'n tekst moet worden 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 creëren en beheren van webcontent.

De HTML-programmeertaal kan hiervoor ook gebruikt worden. Daar komt het `alt`-attribuut, ook wel `alt-tag` genoemd, in beeld. Het wordt in de `<img>`-tag geplaatst. De tekst wordt in het `alt`-attribuut geschreven en vervolgens weergegeven door ondersteunende technologieën.

Dit alleen is echter niet voldoende. Ook het title-attribuut mag niet worden vergeten, aangezien sommige schermlezers de beschrijving van het alt-attribuut niet voorlezen, maar die van het title-attribuut. Daarom is het ook zinvol om voor beide tags dezelfde tekst te gebruiken. Bovendien zorgt dit ervoor dat de inhoud als extra informatie over een element wordt weergegeven wanneer de muis eroverheen beweegt.

Daarnaast is er het aria-attribuut. Meer precies, het aria-label-attribuut of ook wel het aria-labelledby-attribuut. Deze worden gebruikt om knoppen of formuliervelden te labelen.

De verschillende soorten afbeeldingen

In een steeds digitalere wereld is het niet voldoende om alleen tekstalternatieven te creëren. Het is veel effectiever om de verschillende soorten afbeeldingen correct te beschrijven, aangezien ze ook verschillen in hun functie. Deze functies moeten echter eerst worden herkend. Beschrijvingen zijn nutteloos als ze de functie van een afbeelding niet weergeven. De vraag is dus: welke soorten afbeeldingen bestaan er? En wat is de beste manier om ze te beschrijven?

Allereerst is het belangrijk dat u zich vertrouwd maakt met de verschillen tussen de diverse soorten afbeeldingen. Het is essentieel om het doel van een afbeelding te begrijpen. Over het algemeen wordt er onderscheid gemaakt tussen informatieve, functionele en decoratieve afbeeldingen. Daarnaast zijn er de zogenaamde lettertypen. De beschrijving hiervan is heel eenvoudig: men neemt hier simpelweg 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. De aandacht gaat uit naar informatie die relevant is voor de boodschap van de afbeelding. Een voorbeeld hiervan is een logo-beschrijving. Hierin wordt een korte beschrijving gegeven van hoe het logo eruitziet en van wie het is.

In het volgende voorbeeld wordt een tekstalternatief in een logo in HTML 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 in HTML ingesloten met behulp van het `<img>`-element, waarbij het `src`-attribuut de bron van de afbeelding aangeeft. De beschrijving van de afbeelding wordt tussen aanhalingstekens geplaatst in de `alt`- en `title`-attributen. Op deze manier wordt de tekstinhoud "Het Eye-Able-logo. Het stelt een oog voor" weergegeven via de schermlezer of brailleleesapparatuur.

Op deze manier wordt de barrière weggenomen en kunnen alle mensen die gebruikmaken van ondersteunende technologieën begrijpen wat er in 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 type en de informatie die het bevat. Als het diagram slechts weinig informatie bevat, kan dit in de alternatieve tekst worden opgenomen. Bijvoorbeeld: "Toont de verkiezingsuitslagen van de partijen in een staafdiagram. Partij A: 40%, Partij B: 30%, Partij C: 20%, enzovoort." Als er echter iets complexer of uitgebreider wordt weergegeven, is het aan te raden de gedetailleerde informatie in een volgende tekst op te nemen. De alternatieve tekst hoeft dan alleen het type en het doel van het diagram te vermelden. Daarnaast kan worden aangegeven dat de meer gedetailleerde beschrijving hieronder volgt. Een voorbeeld hiervan is een diagram met bevolkingscijfers van de Duitse deelstaten. De tekst zou dan luiden: "Toont de bevolkingscijfers van de 16 deelstaten in een staafdiagram. Let op: de meer gedetailleerde beschrijving volgt in de tekst."

Functionele afbeeldingen

Laten we vervolgens de functionele afbeeldingen bekijken. Dit zijn gekoppelde grafische elementen. Ze zijn onderverdeeld in links, elementen of knoppen. In de tekstalternatieven definieer je de functie en niet wat er herkend moet worden. In plaats daarvan specificeer je wat er herkend moet worden. waar de link leidt naar.

Hier volgt een voorbeeld in HTML voor een gekoppelde afbeelding:

<a href=“ https://eye-able.com/“ >

<img src="logo.jpg">

alt="Startpagina van Eye-Able"

titel="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 gemaakt. https://eye-able.com/ In het <img>-element zien we opnieuw het logo van Eye-Able, maar ditmaal beschrijven de <alt>- en <title>-attributen de functie in plaats van de afbeelding. De inhoud "Homepage van Eye-Able" wordt nu dus weergegeven met behulp van ondersteunende technologieën.

Hetzelfde geldt voor symbolen. 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 opslaan symboliseert. Een ander voorbeeld zijn zoekpictogrammen. Of het nu een vergrootglas is of niet, doet er niet toe. Veel interessanter is de actie die erachter schuilgaat. Dit pictogram staat voor een zoekoptie of het begin van een zoekopdracht.

Bij knoppen is de situatie vergelijkbaar. Een knop die een pijl naar rechts voorstelt, mag nooit de alternatieve tekst "pijl naar rechts" bevatten. Voor een ziende is het duidelijk dat de volgende pagina opent wanneer erop geklikt wordt, maar voor blinden is dat niet het geval. Zij horen namelijk alleen "pijl naar rechts" via de spraakuitvoer. Dit is niet duidelijk genoeg en geeft niet aan dat de volgende pagina opent wanneer de knop wordt ingedrukt. Daarom is het logischer om deze alternatieve teksten aan te bieden met "ga naar volgende pagina" of "verder scrollen".

Decoratieve afbeeldingen

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

Hoe schrijf je goede alternatieve teksten?

Nu de verschillende afbeeldingen zijn geïntroduceerd, rest er nog maar één vraag: "Hoe formuleer je optimale alternatieve teksten?" Als je eenmaal alle subtiliteiten en verschillen tussen de afbeeldingen kent, hoef je slechts een paar regels te volgen. De volgende tips kunnen je daarbij helpen:

1. Begin van een tekstalternatief:

   Het is belangrijk om hier te voorkomen dat er duplicaten ontstaan. Het begin mag daarom niet beginnen met: "De afbeelding ...", "De grafiek ...", "De foto ..." of "De link" .... Of het nu een afbeelding of een link is, schermlezers herkennen en tonen deze sowieso. Dit moet dus achterwege gelaten worden.

2. Lengte van de teksten:

   De ideale lengte van een alternatieve tekst is niet gespecificeerd. Eén tot twee zinnen zouden echter voldoende moeten zijn voor de beschrijving van een afbeelding. De ideale lengte is 80 tekens. Waarom 80? Blinden lezen deze teksten vaak met behulp van een brailleleesapparaat. Brailleleesapparaten kunnen tussen de 40 en 80 tekens tegelijk weergeven. Omwille van de duidelijkheid is het daarom raadzaam om je aan deze limiet te houden. Een tekst mag natuurlijk langer zijn. Deze mag echter niet meer dan 120 tekens bevatten.

3. Spelling en interpunctie:

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

4. Auteursrechten:

   Veel afbeeldingen bevatten een copyrightvermelding. Maar is deze informatie belangrijk voor het begrijpen van een afbeelding? Het antwoord is: Nee! Voor een goede tekstuele beschrijving is deze informatie niet relevant, omdat in een afbeeldingsbeschrijving alleen de belangrijkste zaken worden vermeld. Daarom moet deze informatie worden weggelaten.

5. Feedback:

   Het is eenvoudig vast te stellen of de beeldomschrijving geslaagd is. Maar hoe? Die vraag is makkelijk te beantwoorden. Het vergt niet veel moeite. Een korte feedback van een blinde of slechtziende geeft al informatie over de zinnige formulering van de tekst. Maar niet iedereen kent iemand met een visuele beperking. Dat kan op een andere manier worden opgelost. Iedereen die de afbeelding nog niet heeft gezien, kan hier worden ondervraagd. Dat kan natuurlijk schriftelijk, maar ook telefonisch. Zodra er een "positieve" reactie binnenkomt, is de beschrijving geslaagd.

Wat gebeurt er eigenlijk als alternatieve teksten ontbreken?

Het ontbreken van alternatieve teksten voor afbeeldingen kan met name voor blinde gebruikers erg vervelend zijn. Dit betekent dat ze de inhoud van de afbeelding niet kunnen zien. Tegelijkertijd geeft de schermlezer in zo'n geval alleen de bestandsnaam weer, bijvoorbeeld: "img123.jpg". Zo'n beschrijving is voor niemand nuttig. Ontwikkelaars zouden daarom altijd tekstuele inhoud moeten gebruiken. Het is echter ook belangrijk om de verschillen te kennen om afbeeldingen en grafieken op een zinvolle manier te kunnen beschrijven. Ondersteunende technologieën kunnen ze dan weergeven met behulp van de tekstalternatieven. Dit maakt het internet ook een stukje toegankelijker voor iedereen.