u bent hier

Om toegankelijk te zijn, moet elke afbeelding een volwaardig tekstalternatief hebben. Omdat er veel manieren zijn om grafische elementen in te voegen in een webpagina, zijn er ook verschillende technieken om tekstalternatieven te geven.

De afbeelding in de accessibility tree

Het doel van al die technieken is hetzelfde: een toegankelijke naam geven aan de afbeelding. Browsers geven de toegankelijke naam door aan hulpmiddelen via de accessibility tree. Bijvoorbeeld:

  • De toegankelijke naam wordt gelezen door een screenreader als hij een afbeelding tegenkomt.
  • 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. Bijvoorbeeld als we een logo AnySurfer in specteren in Chrome, selecteren we het tabblad 'Accessibility' dan zien we onder 'computed properties', Name: "AnySurfer - Accueil", en rol: img.

screenshot

Alt-attribuut

Het alt-attribuut kan je gebruiken binnen de de tags <img>, <input type="image"> en <area>.

Als de afbeelding informatie bevat of aanklikbaar is, moet het alt-attribuut aanwezig zijn en mag niet leeg zijn. bijvoorbeeld:

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

    <a href="https://www.anysurfer.be">
    <img src="logo.png" alt="AnySurfer" />
    </a>
  • Voor een zoekknop die eruitziet als een vergrootglas:

    <input type="image" alt="Zoeken">
  • Voor een aanklikbare provincie op een kaart van België

    <area shape=""coords="" href="http://www.province.luxembourg.be/" alt="Luxembourg">

Een decoratieve afbeelding moet een leeg alt-attribuut hebben, bijvoorbeeld:

<img src="fleur.png" alt="">

Verschil tussen leeg alt-attribuut en ontbrekend alt-attribuut

  • Een leeg alt-attribuut zorgt ervoor dat de afbeelding niet aanwezig is in de accessibility tree. Op die manier is ze onzichtbaar voor de hulpmiddelen. In het voorbeeld hieronder zien we dat het logo een leeg alt-attribuut heeft, en dat in de accesibility tree is aangegeven 'Accessibility node not exposed'

    screenshot van de accessibility tree voor logo met leeg alt-attribuut

  • Als het alt-attribuut ontbreekt, zal de afbeelding toch aanwezig zijn 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.

    screenshot van de accessibility tree voor logo zonder alt-attribuut

Verborgen tekst

Als de afbeelding niet is ingevoegd met een HTML-tag, maar via css (background, :before, :after, ...) of als inline SVG element, kunnen we geen alt-attribuut gebruiken. De verborgen tekst kan dus een oplossing zijn.

Het principe is in de HTML-code een vervangende tekst toe te voegen die niet getoond wordt op het scherm maar die zichtbaar is voor de hulpmiddelen. De voorkeurstechniek om dat resultaat te bereiken, is het gebruik van clip.

Bijvoorbeeld, als de zoekknop is getoond via een icon font

<button class="search">
<span class="sr-only">Zoeken</span>
</button>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

Aria-label en aria-labelledby

Het atribuut aria-label laat toe de toegankelijke naam van een element te wijzigen. In tegenstelling tot het alt-attribuut, kan je ze gebruiken op de meeste HTML-elementen, op voorwaarde dat ze een rol hebben. Je kan het dus bijvoorbeeld gebruiken om een naam te geven aan een grafische knop.

Als we het voorbeeld van hierboven hernemen, zouden we een aria-label kunnen gebruiken in plaats van verborgen tekst:

<button class="search" aria-label="Zoeken">
</button>

Opgelet, het gebruik van aria-label is gevaarlijker dan dat van een verborgen tekst. De verborgen tekst wordt toegevoegd aan de bestaande inhoud, maar aria-label vervangt de naam van een element. Als je een aria-label toevoegt aan de knop en daarin ook een verborgen tekst, dan wint het aria-label.

Het atribuut aria-labelledby heeft hetzelfde effect als aria-label. Maar in plaats van als waarde een tekst te nemen, neemt het als waarde een id. We kunnen het bijvoorbeeld gebruiken om een tekstalternatief te specifiëren voor een SVG-afbeelding:

<svg role="img" aria-labelledby="alt_tekst">
<title id="alt_tekst">chercher</title>
</svg>

Meer details over de toegankelijkheid van svg.


Reacties

Reageer als eerste