In tijden van digitalisering mag de kwestie van toegankelijkheid niet worden verwaarloosd. Een manier om het voor mensen met een handicap makkelijker te maken om toegang te krijgen tot inhoud op het internet is het gebruik van zogenaamde alternatieve teksten. Deze teksten zijn zo ontworpen dat ze de inhoud van een website weergeven in een vorm die mensen met bepaalde handicaps kunnen begrijpen. Maar wat is een alternatieve tekst precies? Wie heeft ze nodig? 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 ook om afbeeldingen, foto's en bedieningselementen te begrijpen. Schermlezers of brailleleesregels gebruiken de tekstalternatieven en maken deze elementen toegankelijk 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: je voegt gewoon een alternatieve tekst in in het overeenkomstige gebied van een element dat van zo'n tekst moet worden voorzien. De meeste ontwikkelaars gebruiken dit in een zogenaamd CMS. De afkorting CMS staat voor Content Management Systeem. Dit is software die wordt gebruikt om webinhoud te maken en te beheren.
Hiervoor kan ook de programmeertaal HTML worden gebruikt. Hier komt het alt-attribuut, ook bekend als de alt-tag, om de hoek kijken. Het wordt 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. Ook het title-attribuut mag niet worden vergeten, want er zijn schermlezers die niet de beschrijving van het alt-attribuut lezen, maar die van het title-attribuut. Het is daarom zinvol om voor beide tags een identieke tekst in te voeren. Dit heeft ook de functie om de inhoud weer te geven als extra informatie over een element wanneer je de muis over het gebied beweegt.
Er is ook het aria attribuut. Om precies te zijn, het aria-label attribuut of het aria-labelledby attribuut. Deze worden gebruikt voor het labelen van knoppen of formuliervelden.
De verschillende soorten afbeeldingen
In een wereld waarin we steeds meer digitaliseren, 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?
Ten eerste moet je vertrouwd raken met de verschillen tussen de verschillende soorten afbeeldingen. Het is belangrijk om de betekenis en het doel van een afbeelding te begrijpen. Over het algemeen wordt er een onderscheid gemaakt tussen informatieve, functionele en decoratieve afbeeldingen. Er zijn ook zogenaamde lettertypes. Hier is de beschrijving heel eenvoudig, je kopieert gewoon de tekst die in de afbeelding wordt weergegeven.
Informatieve foto's
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. Hierin wordt kort beschreven hoe het logo eruit ziet en wie het heeft ontworpen.
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 Eye-Able logo. 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 tekstinhoud "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 wordt getoond.
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 een kleine hoeveelheid informatie bevat, kan dit worden opgenomen in de alternatieve tekst. Bijvoorbeeld: "Toont de verkiezingsuitslagen van de partijen in een staafdiagram. Partij A: 40%, Partij B: 30%, Partij C: 20% etc.". Als er echter iets complexers of langere informatie wordt gepresenteerd, is het raadzaam om de gedetailleerde informatie in een volgende tekst op te nemen. De alternatieve tekst moet dan alleen het type en het doel van het diagram vermelden. Daarnaast kan worden aangegeven dat hieronder een meer gedetailleerde beschrijving volgt. Een voorbeeld zou een diagram zijn dat de bevolkingscijfers van de federale staten toont. De inhoud zou dan luiden: "Toont de bevolkingscijfers van de 16 deelstaten in een staafdiagram. Opmerking: de meer gedetailleerde beschrijving volgt in de tekst".
Functionele beelden
Vervolgens bekijken we de functionele afbeeldingen. Dit zijn gekoppelde afbeeldingen. Ze zijn onderverdeeld in links, elementen of knoppen. In de tekstalternatieven wordt de functie gedefinieerd en niet wat er moet worden herkend. In plaats daarvan geef je aan waar de link naartoe leidt.
Hier is een voorbeeld in HTML voor een gekoppelde afbeelding:
<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 Eye-Able-logo, maar deze keer beschrijven het alt- en title-attribuut niet de afbeelding, maar de functie. De inhoud "Eye-Able homepage" wordt nu uitgevoerd via de ondersteunende technologieën.
Hetzelfde geldt voor symbolen. Als er bijvoorbeeld een diskette wordt gebruikt, is het uiterlijk van het pictogram niet relevant voor de uitvoer met een schermlezer, omdat het de functie van opslaan symboliseert. Zoekpictogrammen zijn een ander voorbeeld. Of het een vergrootglas is of niet is irrelevant. De actie erachter is veel interessanter. Dit symboliseert een zoekoptie of de start van een zoekopdracht.
De situatie is vergelijkbaar met knoppen. Een knop die een pijl naar rechts weergeeft, mag nooit de naam "pijl naar rechts" krijgen in de alternatieve tekst. 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 geeft niet aan dat de volgende pagina wordt geopend als er op de knop wordt geklikt. Het is daarom logischer om deze alternatieve teksten te voorzien van "naar volgende pagina" of "scroll naar volgende pagina".
Decoratieve afbeeldingen
Een ander type afbeeldingen zijn decoratieve afbeeldingen. Deze worden gebruikt om een website te versieren. De procedure voor het maken van alternatieve teksten is hier heel eenvoudig. De inhoud van de alternatieve tekst wordt leeg gelaten. Het is belangrijk dat het attribuut alternatieve tekst nog steeds aanwezig is. Alleen de tekstinhoud wordt hier leeg gelaten. Hierdoor slaat de schermlezer deze irrelevante afbeelding over in de uitvoer.
Hoe schrijf je goede alternatieve teksten?
Nu de verschillende afbeeldingen zijn gepresenteerd, is er nog maar één vraag: "Hoe formuleer je optimale alternatieve teksten?" Zodra je al deze subtiliteiten en verschillen tussen de afbeeldingen kent, zijn er slechts een paar regels die je moet volgen. De volgende tips kunnen helpen:
- Begin van een tekstalternatief:
Hierbij moet ervoor worden gezorgd dat er geen overlap is. Het begin moet 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 worden weggelaten.
Lengte van de teksten:
Er wordt niet gespecificeerd hoe lang een alternatieve tekst moet zijn. Eén of twee zinnen moeten echter voldoende zijn om een afbeelding te beschrijven. 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 ook langer zijn. Hij mag echter niet langer zijn dan 120 tekens.
Spelling en interpunctie:
Zorg ervoor dat de spelling correct is. Als een woord een spelfout bevat, kan het snel onduidelijk worden omdat een schermlezer precies weergeeft wat er in de alternatieve tekst staat. 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 er een spelling- en grammaticacontrole worden uitgevoerd voordat de tekstinhoud wordt ingevoegd.
Copyright:
Veel afbeeldingen hebben een copyrightvermelding. Maar is deze informatie belangrijk om een afbeelding te begrijpen? Het antwoord is: Nee! Deze informatie is niet van belang voor een goede formulering van tekstalternatieven, omdat een afbeeldingsbeschrijving alleen de belangrijkste informatie bevat. Daarom moet deze informatie worden weggelaten.
Feedback:
Je kunt snel bepalen of de afbeeldingsbeschrijving succesvol is. Maar hoe? Deze vraag is gemakkelijk te beantwoorden. Er is geen grote inspanning voor nodig. Korte feedback van een blinde of slechtziende geeft informatie over of de tekstinhoud zinvol is geformuleerd. Maar niet iedereen kent iemand met een visuele beperking. Dit kan ook anders worden opgelost. Aan iedereen die de afbeelding nog niet heeft gezien, kunnen vragen worden gesteld. Dit kan natuurlijk schriftelijk, maar ook telefonisch. Zodra er een "positieve" reactie 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 herkennen. Tegelijkertijd zou de schermlezer in zo'n geval alleen de bestandsnaam weergeven, bijvoorbeeld: "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 deze dan reproduceren met behulp van de tekstalternatieven. Dit maakt het internet ook toegankelijker voor iedereen.
