Technieken om afbeeldingen een tekstalternatief te geven

Afbeeldingen maak je toegankelijk door ze ofwel als decoratief te markeren, ofwel een tekstalternatief te geven als ze informatief zijn. Hoe je dat doet, hangt af van de manier waarop de afbeelding is ingevoegd: via een img- of svg-element of via CSS. Het gaat niet enkel over afbeeldingen maar ook over tekstuele karakters die men gebruikt voor hoe ze er uitzien en niet voor hun letterlijke betekenis. Ook die karakters kunnen decoratief of informatief zijn en dan een tekstalternatief nodig hebben.

Een apart artikel legt uit dat decoratief en informatief afhangt van de context en geeft tips om een volwaardig tekstalternatief te schrijven.

Inhoud

• Een afbeelding in de accessibility tree
• Het img-element
• Het svg-element
• Afbeeldingen ingevoegd Via CSS
• Tekstuele karakters (letters, leestekens, emoji, iconen)
• Karakters ingevoegd via CSS (o.a. icon fonts)
• Samenvatting

Een afbeelding in de accessibility tree

Browsers geven de informatie 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.
• Als je een tekstalternatief voorziet voor een informatieve afbeelding, krijgt die een toegankelijke naam in de accessibility tree
  • Een screenreader leest de naam voor en meldt dat het om een afbeelding gaat.
  • Een gebruiker van spraakherkenningssoftware kan de 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 de HTML-elementen <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="" />

Het lege alt-attribuut verwijdert de afbeelding uit de accessibility tree. Dit is aangegeven met '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 een informatieve afbeelding 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 website 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

Voeg aria-hidden="true" toe aan decoratieve svg-elementen om ze uit de accessibility tree te verwijderen.

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

Gebruik geen title-element in het svg-element.

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>

Afbeelding ingevoegd via CSS

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

Decoratieve CSS-afbeelding

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

Informatieve CSS-afbeelding

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

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

a.facebook:after { 
    content:url('icon_fb.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

Voeg in de HTML-code 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="fb" href="https://facebook.com/anysurfer">
<span class="visuallyhidden">Facebook</span>
</a>

a.fb:after { 
    content:url('icon_fb.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 Facebook-icoon dus ook een tekstalternatief geven met een aria-label:

<a class="fb" 
aria-label="Facebook" href="https://facebook.com/anysurfer">
</a>

a.fb:after { 
    content:url('icon_fb.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 het artikel over aria-label en aria-labelledby.

Tekstuele karakters (letters, leestekens, emoji en andere symbolen)

Naast afbeeldingen kan je allerlei karakters gebruiken of misbruiken. Ook deze kunnen decoratief of informatief zijn. Voorbeelden:

• Letters en symbolen die zijn gekozen voor hoe ze er uitzien en niet voor wat ze letterlijk betekenen. Bijvoorbeeld de letter "X" om te sluiten of een → voor "volgende".
• Opeenvolgende leestekens die een visuele betekenis krijgen zoals emoticons :-)
• Emoji zoals 🙀 zijn karakters die er uitzien als een afbeelding. Screenreaders spreken een tekstalternatief uit voor veelgebruikte emoji maar je kan er niet op rekenen dat ze kloppen in alle contexten.
• Icon fonts waarbij men karakters vervangt door iconen.

Decoratieve karakters

Verwijder decoratieve karakters uit de accessibility tree met aria-hidden="true". Voorbeelden:

• Een groterdan-teken is gebruikt omdat het er uitziet als een pijl naar rechts, maar we willen vermijden dat een screenreader groterdan voorleest:

  <a href="#">
    Lees meer
    <span aria-hidden="true">
      >
    </span>
  </a>

• De emoji van een vliegtuig op de website van een vliegtuigmaatschappij:

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

  Verwijder decoratieve emoji uit de accessibility tree om te vermijden dat screenreadergebruikers allerlei overbodige beschrijvingen horen.

Informatieve karakters

Twee mogelijke technieken:

• Verberg het karakter met aria-hidden="true" en voeg een alternatief toe via verborgen tekst.
• Voeg een tekstalternatief toe via aria-label (enkel bij elementen die een rol hebben).

Met aria-hidden en verborgen tekst

Om te vermijden dat screenreaders de letterlijke betekenis voorlezen, verberg de karakters en vervang ze door hun betekenis.

• Een kleinerdan-teken gevolgd door het cijfer 3 interpreteert men visueel als een hartje. Screenreaders lezen wat er staat: "kleiner dan 3" klinkt een stuk minder romantisch dan hoe het misschien bedoeld was.

  <span aria-hidden="true"><3</span>
  <span class="visuallyhidden">(hartje)</span>
  

• Emoticons voeg je toe om aan te geven hoe de lezer je woorden moet interpreteren. Ze zijn informatief maar als het visuele wegvalt, is het moeilijk om de opeenvolgende leestekens correct te interpreteren:

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

Met aria-label

Met aria-label kunnen we een naam geven aan een link, knop of emoji.

Voor een sluit-knop gebruikt men soms een X of een vermenigvuldigingsteken: <button>X</button>. Het ziet eruit als een kruisje en visueel interpreteert men het als een sluit-knop. Maar screenreadergebruikers horen de letterlijke betekenis en "knop X" of "knop maal" is niet betekenisvol.

In dit geval is de eenvoudigste techniek om de knop een aria-label te geven. De inhoud van dat aria-label (Sluiten) overschrijft de inhoud van de knop (X):

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

Een emoji kan je vervangen door onzichtbare tekst maar je kan ze ook overschrijven met aria-label. Dan moet je:

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

Gaan we met de 🚆 of met het ✈?

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

Via CSS ingevoegde karakters

Via de CSS property "content" kan je karakters invoegen met :before en :after. Deze karakters komen in de accessibility tree terecht (in tegenstelling tot via CSS ingevoegde afbeeldingen, zie hoger).

Decoratief karakter via CSS

De eenvoudigste techniek is om het karakter als decoratief te markeren in de CSS-code zelf. Voeg /"" toe, direct na het karakter. Voorbeeld: een groterdan-teken (dat visueel lijkt op een pijltje):

<a class="readmore" href="#">
Lees meer 
</a>

.readmore:after {
content: ">" / "";
}

Een alternatieve techniek is met aria-hidden="true", maar dit kan enkel als het karakter is ingevoegd via een aparte container:

<a href="#">
Lees meer 
<span class="readmore" aria-hidden="true"></span>
</a>

.readmore:after {
content: ">";
}

Informatief karakter via CSS

1. Verwijder het karakter uit de accessibility tree. Doe hetzelfde als bij decoratieve karakters.
2. En voeg een tekstalternatief toe. Dit zijn dezelfde technieken als bij informatieve CSS-afbeeldingen.

Met aria-label

Voorbeeld: een knop met enkel een vuilbak-icoon zonder zichtbare tekst:

<button class="trash" aria-label="Verwijder"></button>

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

Met verborgen tekst

<button class="messages">
<span class="visuallyhidden">Berichten: </span>
2
</button>

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

In dit geval kunnen we geen aria-label gebruiken, want dat zou het cijfer 2 overschrijven.

Samenvatting

alt=""

alt="Tekstalternatief"

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

<svg role="img">
  <title>Tekstalternatief</title>...
</svg>

content: url('image.png')
background: url('image.png')

<span class="visuallyhidden">
  Tekstalternatief
</span>

<span aria-hidden="true">
  karakter
</span>

<span aria-hidden="true">
  karakter
</span>
<span class="visuallyhidden">
  Tekstalternatief
</span>

<span role="img" 
aria-label="Tekstalternatief">
  Emoji
</span>

content: "karakter"

content: "karakter" / "";

content: "karakter" / "";

<span class="visuallyhidden">
  Tekstalternatief
</span>

* als het de enige inhoud is van een container met de rol link of knop, dan kan ook <a aria-label="Tekstalternatief"></a>