Technieken om afbeeldingen een tekstalternatief te geven

Afbeeldingen maak je toegankelijk door ze als decoratief te markeren of door ze een tekstalternatief te geven. Hoe je dat doet, hangt af van de manier waarop de afbeelding is ingevoegd (via een img- of svg-element of via CSS). Behalve afbeeldingen hebben tekstuele karakters ook een tekstalternatief nodig als je ze niet gebruikt voor hun letterlijke betekenis.

Een ander artikel behandelt het verschil tussen decoratieve en informatieve afbeeldingen en leert je een volwaardig tekstalternatief te schrijven voor afbeeldingen in uiteenlopende contexten.

Inhoud

• De accessibility tree
• Het img-element
• Het SVG-element
• Via CSS
• Tekstuele karakters
• Icon fonts
• Sociale media

De accessibility tree

Browsers geven de infomatie van de webpagina door aan hulpmiddelen via de accessibility tree.

• Als je een afbeelding als decoratief markeert, verwijder je die uit de accessibility tree. Screenreadergebruikers krijgen niets te horen en weten niet dat er een afbeelding op het scherm staat.
• Onderstaande technieken voor informatieve afbeeldingen voegen in de accessibility tree een toegankelijke naam toe aan de afbeelding.
  • Als een screenreader een afbeelding tegenkomt, leest hij die toegankelijke naam.
  • Een persoon die spraakherkenningssoftware gebruikt, kan de toegankelijke naam van een element gebruiken om erop te klikken.

Je kan de inhoud van de accessibility tree visualiseren via de developer tools in de browser. Als voorbeeld inspecteren we het AnySurfer logo in Chrome.

• Selecteer het tabblad 'Accessibility'
• Onder 'computed properties' zie je:
  • Name: "AnySurfer - Accueil"
  • Role: img

Het img-element

Afbeeldingen die je invoegt met <img>, <input type="image"> en <area> hebben altijd een alt-attribuut nodig.

Decoratieve afbeelding

Bij een decoratieve afbeelding laat je het alt-attribuut leeg. Het attribuut is aanwezig maar heeft geen inhoud, ook geen spatie of een ander karakter. Bijvoorbeeld:

<img src="bloemen.png" alt="" />

Een leeg alt-attribuut verwijdert de afbeelding uit de accessibility tree. Hier zie een logo met een leeg alt-attribuut. In de accessibility tree is aangegeven 'Accessibility node not exposed'

Een leeg alt-attribuut is niet hetzelfde als een ontbrekend alt-attribuut. Bij een ontbrekend alt-attribuut is de afbeelding toch aanwezig in de accessibility tree met een rol img, maar zonder naam. De hulpmiddelen zullen dan proberen de naam te raden en gebruiken vaak de naam van het bestand.

Een ontbrekend alt-attribuut is een inbreuk op de HTML-specificatie.

Informatieve afbeelding

Bij informatieve afbeeldingen die je invoegt met <img> en <input type="image"> plaats je het tekstalternatief in het alt-attribuut.

Voor een logo dat een link is naar de site van AnySurfer:

<a href="https://www.anysurfer.be">
<img src="logo.png" alt="Home AnySurfer" />
</a>

Voor een vergrootglas als zoekknop:

<input type="image" src="vergrootglas.png" alt="Zoeken" />

Het SVG-element

Voor een afbeelding die is ingevoegd met een svg-element, zijn ARIA-attributen nodig om ze toegankelijk te maken. Als je nog niet vertrouwd bent met ARIA, lees dan eerst Wat is ARIA?

Decoratieve SVG

Verwijder decoratieve SVG-afbeeldingen uit de accessibility tree met aria-hidden="true".

<svg aria-hidden="true"></svg>

Informatieve SVG

• Voeg aan het svg-element het ARIA-attribuut role="img" toe om er zeker van te zijn dat de component in de accessibility tree een afbeelding is.

• Het tekstalternatief voor de informatieve afbeelding plaats je in het title-element:

  <svg role="img">
  <title>Zoeken</title>
  </svg>

• Sommige artikels raden aan om ook een aria-labelledby-attribuut toe te voegen om de inhoud van de title met de SVG te verbinden. Maar in de tests van Deque zijn de resultaten voor het achtste patroon met aria-labelledby exact gelijk aan patroon 5 zonder die extra koppeling.

Via CSS

Je kan een afbeelding invoegen via CSS, hetzij via background URL of met de :before en :after pseudo-elementen.

Decoratieve CSS-afbeelding

Je hoeft niets te doen om de afbeelding als decoratief te markeren. De afbeelding komt niet in de accessibility tree terecht.

Informatieve CSS-afbeelding

Voorbeeld: een link naar Twitter die geen tekst bevat, maar enkel een via CSS ingevoegd logo van Twitter:

<a class="twitter" href="https://twitter.com/anysurfer">
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

Deze informatieve afbeelding heeft een tekstalternatief nodig. Dat kan je het gemakkelijkst toevoegen via verborgen tekst. In specifieke gevallen kan het ook met aria-label.

Verborgen tekst

In de HTML-code voeg je een tekst toe die je visueel verbergt, maar die wel in de accessibility tree terechtkomt en zo een toegankelijke naam geeft aan de afbeelding.

<a class="twitter" href="https://twitter.com/anysurfer">
<span class="visuallyhidden">Twitter</span>
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Meer over deze techniek in het artikel over verborgen tekst.

Met een aria-label

Ook met het atribuut aria-label kan je een component een toegankelijke naam geven. Je kan het Twitter icoon dus ook een tekstalternatief geven met een aria-label:

<a class="twitter" 
aria-label="Twitter" href="https://twitter.com/anysurfer">
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

De techniek met verborgen tekst is altijd bruikbaar. Als je voor de techniek met aria-label kiest, hou er dan rekening mee dat een aria-label enkel werkt op een element dat een rol heeft en dat de inhoud van het aria-label andere tekst overschrijft. Lees dus zeker het artikel over aria-label en aria-labelledby.

Tekstuele karakters

Soms gebruik je tekstuele karakters niet voor wat ze letterlijk betekenen maar voor hoe ze er uitzien. Ook deze kunnen decoratief of informatief zijn. Het zijn letterlijk geen afbeeldingen, maar kunnen toch een tekstalternatief nodig hebben.

Zie voor een uitgebreider verhaal ons artikel over Emoticons en emoji's .

Emoticons

Emoticons zijn zelden decoratief. Je voegt ze toe om een twist aan je boodschap te geven. Je wil aangeven hoe de lezer je woorden moet interpreteren. Niet iedereen zal de opeenvolgende leestekens altijd correct interpreteren. Om een emoticon toegankelijk te maken:

• verberg je de karakters met aria-hidden="true"
• en voeg je een tekstalternatief toe met de techniek van verborgen tekst (zie hoger: class="visuallyhidden).

Voorbeeld:

<span aria-hidden="true">:/</span>
<span class="visuallyhidden">(melancholisch)</span>

Emoji

Als de emoji decoratief is, verwijder het dan uit de accessibility tree. Plaats de emoji in een span met aria-hidden="true". Bijvoorbeeld het vliegtuigje op de website van een vliegtuigmaatschappij:

Vlieg naar de zon!
<span aria-hidden="true">✈</span>

Als een emoji informatief is:

• Zet de emoji in een span zodat je er attributen aan kunt toevoegen.
• Geef het de rol afbeelding via role="img".
• Geef het een tekstalternatief via aria-label.

Gaan we met de <span role="img" aria-label="trein">🚆</span> of met het <span role="img" aria-label="vliegtuig">✈</span>?

Gaan we met de 🚆 of met het ✈?

Noot: sommige screenreaders spreken tekst uit voor een aantal emoji. Bij ondubbelzinnige emoji zoals het vliegtuigje gaat dat goed, maar andere zijn voor interpretatie vatbaar. Zo zegt JAWS2023 "vermoeid kattengezicht" en VoiceOver voor iOS "kattengezicht dat schreeuwt van angst" als er op het scherm een 🙀 staat. Met de bovenstaande techniek ben je zeker dat je eigen beschrijving wordt voorgelezen. Bovendien is die beschrijving ook leesbaar op een brailleleesregel.

Andere karakters

Voor een sluit-knop gebruikt men soms een X of een vermenigvuldigingsteken. Visueel lijkt het een kruisje en de bezoeker begrijpt dat het een sluit-knop is. Maar voor een screenreadergebruiker is "knop X" of "knop maal" niet betekenisvol.

• Verberg het karakter met aria-hidden="true" en voeg een tekstalternatief toe via verborgen tekst,
• of, geef de knop een aria-label. De inhoud van het aria-label zal de inhoud van de knop overschrijven:

<button aria-label="Sluiten">
×
</button>

Icon fonts

Bij icon fonts voeg je via CSS een karakter in dat je niet gebruikt voor zijn letterlijke betekenis. Om icon fonts toegankelijk te maken, combineer je voorgaande technieken:

Decoratieve icon font

Je kan aria-hidden="true" gebruiken om het icoon onzichtbaar te maken. Om dat te kunnen doen, moet je het karakter invoegen via een span binnen het element en niet op het element zelf.

In dit voorbeeld bevat de knop een tekst en een icoon. Het icoon is redundant en kan als decoratief worden beschouwd. Doe niet:

<button data-icon="p" class="icon">
Zoeken
</button>

.icon:before {
	font-family: 'icomoon'; 
	content: attr(data-icon);
	}

Maar wel:

<button>
<span data-icon="p" class="icon" aria-hidden="true"> </span>
Zoeken
</button>

.icon:before {
	font-family: 'icomoon'; 
	content: attr(data-icon);
	}

Informatieve icon font

Verwijder het karakter uit de accessibility tree en voeg een tekstalternatief toe. Bij een zoekknop die enkel een icoon bevat en geen zichtbare tekst kan dat met een aria-label. De inhoud daarvan overschrijft het karakter dus je moet het niet eerst verbergen:

<button data-icon="p" class="icon" aria-label="Afspelen"></button>

.icon:before {
	font-family: 'icomoon'; 
	content: attr(data-icon);
	}

Als het icoon niet in een interactief element staat, kan je ook een aria-label gebruiken, maar om het te laten werken, moet je dan, zoals in het voorbeeld van emoji, een role="img" toevoegen aan de span.

<span class="phone" role="img" aria-label="telefoon">

Een andere mogelijke techniek is het karakter te verbergen met aria-hidden="true" en een tekstalternatief toe te voegen via verborgen tekst (class="visuallyhidden"). Deze techniek levert echter problemen op voor gebruikers van VoiceOver op iOS als ze de functie 'explore by touch' gebruiken.