Hoe geef je een link op een logo in de header een goede toegankelijke naam? We geven twee opties voor het toevoegen van de toegankelijke naam: via het alt-attribuut van een afbeelding of via een aria-label op de link. Welke optie je kiest is afhankelijk van het framework, CMS, of Design System dat je gebruikt.
Het is een veelvoorkomend patroon om een logo in de header te gebruiken als een link naar de homepage. Maar wat moet de toegankelijke naam van de link zijn? "Gemeente Voorbeeld", "homepage" of "Logo gemeente Voorbeeld"? Maakt het überhaupt uit?
De toegankelijke naam wordt voorgelezen door screenreaders zodat blinde en slechtziende bezoekers ook weten waar de link naartoe gaat.
Het probleem met het linken van een logo is dat het twee doelen dient:
- een logo, dat aangeeft welke site je bezoekt;
- een link, die naar de homepage leidt.
Leg dus uit dat dit een logo is en waar de link naartoe leidt: "Sitenaam logo, naar de homepage." Je kunt er ook voor kiezen 'homepage' te wijzigen in 'voorpagina'.
Let op: Begin de toegankelijke naam altijd met de zichtbare tekst, zodat de link gemakkelijker te selecteren is voor mensen die spraakherkenningssoftware gebruiken.
Optie 1: De toegankelijke naam in het alt-attribuut van een afbeelding
Gebruik je een afbeelding zoals een .gif, .png, .jpg of .svg, dan kun je het alt-attribuut gebruiken om de link een toegankelijke naam te geven. De inhoud van het alt-attribuut, de alt-tekst van een afbeelding binnen een link, wordt dan toegevoegd aan de linktekst.
Laten we NL Design System als voorbeeld nemen.
In de code (vereenvoudigd):
codevoorbeeld<a href="https://nldesignsystem.nl/">
<img alt="NL Design System logo, naar de homepage" src="logo-nlds.svg" />
</a>
Gegenereerde HTML:
Hoe lezen screenreaders dit voor?
- VoiceOver in Safari: 'Link, afbeelding, NL Design System logo, naar de homepage'.
- NVDA in Firefox : 'NL Design System logo, naar de homepage, afbeelding, link'.
Alle informatie is aanwezig.
Er is een voordeel van het gebruik van het alt-attribuut in plaats van een aria-label oplossing. Wanneer de verbinding traag is, zal de alt-tekst al verschijnen voordat de afbeelding wordt geladen en informeert het alle gebruikers al over de naam van de site en het linkdoel. Het is behoorlijk robuust.
Optie 2: De toegankelijke naam in een aria-label bij de link.
Bij een afbeelding
Wanneer de toegankelijke naam met een aria-label in het <a>-element staat, overschrijft dit alle inhoud binnen de link, dus de inhoud van het alt-attribuut van de afbeelding wordt ook niet voorgelezen. Geef de afbeelding zelf wel een goede alt-tekst mee, zeker als je de afbeelding vaak hergebruikt op de website.
In de code (vereenvoudigd):
codevoorbeeld<a aria-label="NL Design System logo, naar de homepage" href="https://nldesignsystem.nl/">
<img alt="NL Design System logo" src="logo-nlds.svg" />
</a>
Bij een inline SVG
Het voordeel van een aria-label bij de SVG gebruiken in plaats van <title> en aria-labelledby, is dat er geen tooltip verschijnt als je over het logo hovert met de muis.
Ook hier: logo moet op zichzelf kunnen staan als het herbruikbaar is en krijgt daarom een role="img" mee en aria-label="NL Design System logo" als toegankelijke naam. Begin hier weer met de zichtbare tekst.
In de code (vereenvoudigd):
codevoorbeeld<a aria-label="NL Design System logo, naar de homepage" href="https://nldesignsystem.nl/">
<svg aria-label="NL Design System logo" role="img">[...]</svg>
</a>
Gegenereerde HTML:
Hoe lezen screenreaders dit voor?
- VoiceOver in Safari: 'Link, afbeelding, NL Design System logo, naar de homepage'.
- NVDA in Firefox : 'NL Design System logo, naar de homepage, link'.
Discussie
Disclaimer: Dit artikel gaat alleen over het toekennen van de toegankelijke naam. Bij de implementatie op een website komt meer kijken, zoals het kleurcontrast van het logo, de weergave van de focus-stijl, de exacte locatie en het toekennen van aria-current="page" of het verwijderen van de link op de voorpagina.
Heb ik het woord 'logo' nodig? Is dat niet overbodig, zoals het woord 'afbeelding' of 'foto'?
Ja, in dit geval geeft het feit dat dit een logo is belangrijke informatie.
Niet alleen voor blinde gebruikers, maar voor alle screenreadergebruikers. Als je visueel beperkt bent, maar niet volledig blind, kun je de afbeelding vaag zien. Door het woord 'logo' toe te voegen, weet je ook wat de afbeelding is. Een logo is een beeldmerk, en dat voegt legitimiteit toe aan een site.
De naam van de site is vereist, maar het woord logo biedt extra context.
Is dit geen overtreding van 2.5.3 Label in naam?
Het WCAG-succescriterium 2.5.3 Label in naam stelt: Voor bedieningselementen met een zichtbaar label, moet de zichtbare labeltekst aanwezig zijn in of overeenkomen met de toegankelijke naam.
Dus nee, deze constructie is geen overtreding. De zichtbare naam staat in de alt-tekst of in het aria-label, die de toegankelijke naam van de link wordt. Het toevoegen van extra context aan de link is gebruikelijk.
Vergelijk dit met de beruchte "Lees meer"-link. Een veelvoorkomend patroon is om een sr-only CSS-class (of gelijkwaardig) te gebruiken met extra tekst:
codevoorbeeld<a href="url">
Lees meer
<span class="sr-only"> over de eikenprocessierups</span> </a
>.
- Je ziet "Lees meer".
- Je hoort "Lees meer over de eikenprocessierups".
In ons geval:
- Je ziet de naam van de site en het logo; de visuele positie geeft het linkdoel aan.
- Je hoort de naam van de site, het feit dat het een logo is, en het linkdoel.
De hele zichtbare tekst moet in de toegankelijke naam staan, maar extra informatie, zoals de betekenis van de afbeelding en het linkdoel, kan voor context worden toegevoegd. Zo wordt het doel van de link uitgelegd.
Note: Deze blogpost bevat een groot deel van de inhoud van het Engelstalige artikel A link on a logo in the header, what should the alt-text be? en is overgenomen met toestemming van de auteur.