Leerlijn Afbeeldingen

Vraag

Ik zie dat er telkens termen door elkaar worden gebruikt: alt-tekst, alternatieve tekst, tekstalternatieven, alt-attribuut, beeldbeschrijving. Gaat het om dezelfde dingen? Of wat is nou eigenlijk het verschil? 

Antwoord van onze expert

Deze termen worden inderdaad veel door elkaar gebruikt. Soms wordt het door verschillende soorten software en bronnen ook nog op een andere manier gebruikt. Hier een uitleg over hoe de termen doorgaans gebruikt en bedoeld worden.

De termen alt-tekst, alternatieve tekst en tekstalternatieven duiden vaak hetzelfde aan. Het is een tekstueel alternatief voor een afbeelding. Deze tekst moet door software geassocieerd kunnen worden met de afbeelding (of niet-tekstuele inhoud) waarbij het hoort. Veelal wordt over alt-tekst of alternatieve tekst gesproken als in HTML (EPUB) het tekstuele alternatief toegevoegd wordt via het alt-attribuut van het img-element. Bijvoorbeeld:

<img src="images/afbeelding1.jpg" alt="Houtskoolschets van de Eiffeltoren" />

Het alternatief kan echter ook de vorm van bijvoorbeeld het title-attribuut hebben.

Bij publicaties in andere vorm, bijvoorbeeld PDF, kan via een functie van de tekstverwerker of het opmaakprogramma een alternatieve tekst toegevoegd worden.

De term tekstalternatief wordt veel gebruikt in de context van de toegankelijkheidsrichtlijn WCAG. In de praktijk komt het neer op hetzelfde als alt-tekst of alternatieve tekst, alleen wordt in de definitie van de term meer ruimte gehouden over de manier, waarop het alternatief geassocieerd kan worden met de afbeelding.

Een tekstalternatief kan een beeldbeschrijving zijn, dit is het geval als een afbeelding inhoudelijk beschreven wordt.

Een tekstalternatief hoeft echter niet per se een beeldbeschrijving te zijn. Een tekstalternatief kan aangeven wat een afbeelding is zonder het inhoudelijk te beschrijven. Volgens de WCAG kan het voorkomen dat een afbeelding wel een tekstalternatief moet hebben, maar géén beeldbeschrijving. Bijvoorbeeld bij een afbeelding van een schilderij. De afbeelding moet dan een tekstalternatief hebben (bijvoorbeeld dat het een schilderij is, de titel en kunstenaar van het schilderij). De afbeelding hoeft niet inhoudelijk beschreven te worden. Wát op het schilderij staat hoeft dus niet omschreven te worden.

Ten slotte, een beeldbeschrijving hoeft niet altijd een tekstalternatief te zijn. Een beeldbeschrijving kan technisch geassocieerd worden met de afbeelding, doordat het bijvoorbeeld in het alt-attribuut van een afbeelding is geplaatst. In dat geval is het een tekstalternatief. Een beeldbeschrijving kan echter ook gewoon in de lopende tekst rondom een afbeelding staan. In dat geval leest iedereen de beeldbeschrijving. Niet alleen de gebruikers van hulpsoftware.

Vraag

Moet ik aan alle afbeeldingen van boekcovers alt-teksten toevoegen?

Antwoord van onze expert

Of er bij boekomslagen een beeldbeschrijving moet worden toegevoegd hangt af van de context, waarin deze staat en wat het doel of functie is van de afbeelding.

Een aantal situaties:

• Heeft de afbeelding van de omslag als doel om te informeren? Of bijvoorbeeld om te verleiden tot aankoop? Dan heeft de cover een duidelijke functie die je moet vertalen naar een beeldbeschrijving. Lezers met een visuele beperking weten dan ook wat de functie van de boekcover is.
• Heeft de omslag een leesbare tekst, zoals titel en auteur? Dan moet deze tekst in de alt-tekst terugkomen. Behalve als deze tekst ook direct voor of na de afbeelding staat. Dan zou dezelfde informatie herhaald worden, wat niet gebruiksvriendelijk is voor gebruikers van schermlezers. Een alternatieve tekst zoals ‘boekomslag’ kan dan volstaan.
• Vormt de boekomslag samen met andere boekomslagen een lijst van publicaties? En staat alle informatie van de omslag ook in tekst direct voor of na de afbeelding? En heeft de afbeelding verder geen informerende of verleidende functie? Dan kan de algemene alternatieve tekst zoals ‘boekomslag’ achterwege gelaten worden. De afbeelding kan decoratief gemaakt worden. Mensen die met een schermlezer lezen kunnen de herhaling van steeds dezelfde alternatieve tekst als vervelend ervaren.
• Is de afbeelding een link en staat in diezelfde link geen andere tekst, zorg dan voor een alt-tekst die het doel van de link beschrijft. Als er in dit geval geen alt-tekst beschikbaar is, dan weet een gebruiker met hulpsoftware mogelijk niet waar de link naar toe gaat.
• Staat er een omslag op de detailpagina van het boek of in een artikel over het boek, voeg dan een beeldbeschrijving toe die omschrijft hoe de cover er uit ziet.

Kortom maak steeds aan de hand van de context, de functie en het doel van de afbeelding een afweging. Je kunt de alt-tekst leeg laten (de afbeelding decoratief maken). Je kunt ook een alternatieve tekst toevoegen die de afbeelding duidt. Bijvoorbeeld  alt-tekst ‘boekomslag’ eventueel aangevuld met de tekst op de kaft. Of je maakt een werkelijk inhoudelijk beschrijving van de omslag van het boek.

Vraag

Zijn er voorbeelden te vinden van beeldbeschrijvingen van complexe afbeeldingen? Bijvoorbeeld grafieken of flow-charts?

Antwoord van onze expert

Poet Image Description (diagramcenter.org) is een mooie (Engelstalige) website waar je kunt ‘oefenen’ met beeldbeschrijvingen. Dit is een tool van DIAGRAM Center waar meer informatie en voorbeelden te vinden zijn. Ook bij Images Tutorial (WAI, W3C) zijn goede voorbeelden te vinden.

Vraag

Ik heb een website waarbij een alt-tekst via de content-editor wordt toegevoegd aan afbeeldingen. Hoe kan ik zien of deze terugkomt in de front-end van de website?

Antwoord van onze expert

De alt-tekst van een afbeelding staat in de HTML. Het is een attribuut (alt) in het element img. Bijvoorbeeld:

<img src="images/afbeelding1.jpg" alt="Houtskoolschets van de Eiffeltoren" />

Als het alt-attribuut leeg is (er staat niets tussen de aanhalingstekens), dan wordt de afbeelding gemarkeerd als decoratief.  Hulpsoftware, zoals schermleessoftware, kan de afbeelding dan niet waarnemen. Als het attribuut niet bestaat, dan bepaalt de hulpsoftware zelf of de afbeelding decoratief is. Of de software verzint zelf een alt-tekst, zoals de bestandsnaam.

Er zijn verschillende manieren om te achterhalen of de alt-tekst aanwezig is. Een aantal voorbeelden:

• Inspecteer de code. Ga met je muis op de afbeelding staan en kies met je rechtermuisknop voor Inspecteren. Via F12 (Windows) kom je er ook. Je krijgt nu de code van webpagina en de afbeelding te zien en je kunt ook andere elementen op de website inspecteren. Controleer of het img-element een alt-attribuut heeft.
• Een mogelijk snellere oplossing is gebruik maken van een extensie in je browser. Bijvoorbeeld Alt Text Tester voor Chrome of de toegankelijkheidschecker WAVE. In WAVE (Web Accessibilty Evaluation Tool) Browser Extension vind je via Details, Features de al dan niet aanwezige alternatieve tekst.
• Een andere, snelle mogelijkheid is gebruik te maken van bijvoorbeeld Alt tags checker van AdResults. Als je je webadres invoert, krijg je alle gevonden afbeeldingen te zien. De alt-tekst staat daarbij aangegeven. Of juist helemaal niets, als deze niet is gevuld. Deze checker werkt niet voor sites, waarvoor je ingelogd moet zijn.

De vraag

In onze publicatie met complexe afbeeldingen staan in de lopende tekst al beschrijvingen van die afbeeldingen. Moeten we dan alsnog alt-attributen toevoegen aan die afbeeldingen?

Antwoord van onze expert

Heel goed dat de beeldbeschrijvingen al volledig in de context staan. Dit maakt de publicatie toegankelijker voor iedereen. Of een beschrijving adequaat is, kun je toetsen door de afbeelding weg te laten en je af te vragen of er écht geen informatie ontbreekt. Is dat het geval? Dan volstaat de beeldbeschrijving.

Wij adviseren wel altijd een alt-tekst toe te voegen. Als je dit niet doet en je laat de waarde van het alt-attribuut in het img-element leeg, dan wordt de afbeelding gemarkeerd als decoratief. De afbeelding wordt dan door hulpsoftware niet genoemd. Gebruikers die afhankelijk zijn van hulpsoftware weten dan niet van het bestaan van de afbeelding. Als in de lopende tekst of door een bijschrift nabij de afbeelding (die wel door hulpsoftware wordt benoemd) verwezen wordt naar een afbeelding, kan dat verwarrend zijn voor gebruikers. Bovendien kan het voorkomen dat andere lezers van de publicatie de afbeelding ter sprake brengen. Het beste is om een korte alt-tekst toe te voegen. Bijvoorbeeld: alt=”schematische weergave van een hart”.

Zeer slechtzienden maken vaak gebruik van vergrotingssoftware. Yvonne Rutten is zeer slechtziend en maakt gebruik van vergrotingssoftware om boeken, krant en websites te lezen maar ook voor haar werk als helpdesk medewerkster. In deze korte video vertelt zij meer over haar ervaring en gebruik van de software.

Ga naar de video over vergrotingssoftware.

Er is onderscheid tussen voorleestools zoals ReadSpeaker en schermlezers zoals NVDA.

Een voorleestool leest doorgaans alleen de (echte) tekst op het scherm voor. Er zijn voorleestools die ook de beeldbeschrijvingen (een tekstalternatief voor de informatie in een afbeelding) voorlezen. De Apple-, Windows- en Android-besturingssystemen leveren zowel een voorlees-tool als een schermlezer. In een iPhone en iPad zit een dergelijke voorleesfunctie standaard in het besturingssysteem, maar deze moet wel via Instellingen > Toegankelijkheid > ‘Gesproken materiaal’ geactiveerd worden.

Een schermlezer daarentegen leest alles voor: niet alleen de tekst maar ook de menu’s. Blinden en slechtzienden gebruiken dit om te navigeren, formulieren in te vullen, handelingen te verrichten, overzichtslijsten van links, koppen, knoppen, oriëntatiepunten op te roepen en nog veel meer. Omdat blinden en slechtzienden noodzakelijkerwijs navigeren in een sequentiële volgorde dient er een logische volgorde te zijn vastgelegd in de code. In een iPhone en iPad heet een dergelijke schermlezer Voiceover. In Windows heet deze Narrator (Verteller), in Android heet de schermlezer Talkback.

Anders dan het woord doet vermoeden leest de schermlezer dus niet alleen voor wat op het scherm te zien is, maar wat er achter de schermen in de code is vastgelegd. Voor designers en ontwikkelaars is het overigens een handig hulpmiddel om de eigen code te evalueren.

In algemene zin heeft een voorleestool (zoals ReadSpeaker of de Hardop lezen-functie in Edge) meerwaarde:

• voor mensen met taal- en ontwikkelstoornissen die moeite hebben met het ‘ontcijferen’ van tekst en geholpen zijn met audio-ondersteuning. In deze gevallen is het zinvol als in de tekst kan worden meegelezen met een meeleescursor die aangeeft welk woord op dat moment klinkt: een soort karaokebalkje dus;
• voor gebruikers met een zeer milde vorm van slechtziendheid. Mensen die slechtziend zijn zullen hun eigen hulptechnologie inzetten om websites goed te kunnen waarnemen, bedienen en begrijpen;
• voor gebruikers die tijdelijk slechtziend zijn, bijvoorbeeld door een oogontsteking, betraande ogen.
  Voor gebruikers die vanwege de situatie niet goed kunnen zien, bijvoorbeeld bij fel zonlicht op het scherm;
• als een vorm van aandacht voor uw gebruikers: u laat zien dat u rekening houdt met mensen die moeite hebben met lezen.

Wel is het belangrijk te zorgen voor een goede werking van de voorleestool.

• De tekst op het scherm moet echte tekst zijn. Een voorleestool kan immers geen afbeeldingen van tekst voorlezen.
• Omdat de voorleestool lineair door de tekst heen gaat dient de leesvolgorde logisch te zijn.
• De code van de pagina’s dient robuust gebouwd te zijn, d.w.z. geen fouten te bevatten en dermate goed in elkaar te zetten dat het parsen (vertalen van die code) naar user agents. Voorleestools, brailleleesregels, browsers en andere technologie kunnen dan goed overweg met uw website.

Een voorleestool kan sommige leerlingen helpen bij het lezen en begrijpen van teksten. Zeker wanneer er sprake is van dyslexie of concentratiestoornissen. In die zin valt een voorleestool te voerwegen. De meeste mensen met een leesbeperking maken echter gebruik van specifieke ondersteunende (compenserende) software. Daarbij zijn veelal ook computerstemmen voorhanden.

Visueel beperkte mensen gebruiken hulptechnologie waarmee ze alles kunnen laten voorlezen. Voor hen is een voorleestool geen bruikbare oplossing, omdat ze niet alleen de tekstuele inhoud willen kunnen verklanken. Ook de informatie die nodig is om de interface te begrijpen en gebruiken dient waarneembaar te zijn. Denk daarbij aan menu-items, tekstalternatieven bij afbeeldingen en formuliergegevens die achter de schermen voorhanden (zouden moeten) zijn. Het is om die reden zinvol digitale informatie robuust en toegankelijk te bouwen zodat iedere gebruiker met zijn persoonlijke hulptechnologie de informatie goed kan waarnemen, bedienen en begrijpen.

In de browser Edge is testen zeer eenvoudig. Je opent de PDF in Edge en kiest voor Hardop Voorlezen. Mocht je Chrome gebruiken dan kun je een extensie zoeken en toevoegen die de tekst kan voorlezen. Een goede check is bovendien de PDF te openen met Acrobat Reader of Pro en dan CTRL + A (= alles selecteren) indrukken. Alle geselecteerde tekst is ‘echte’ tekst, niet geselecteerde tekst is een afbeelding van tekst.