Eerder schreef ik al over hoe een duidelijke linktekst helpt om het doel van de link te bepalen. Met links kunnen nog een aantal andere toegankelijkheidsproblemen voorkomen. Hier lichten we enkele problemen toe.
Links met alleen cijfers
Soms worden alleen cijfers gebruikt als linktekst. Dit kan bijvoorbeeld gebeuren bij links naar pagina’s. Als hulpsoftware alleen “3” voorleest, is het niet duidelijk waar dit over gaat. Je kunt dan een aanvullende linktekst toevoegen als “Ga naar pagina”. Dit kan dan in combinatie met het cijfer worden voorgelezen.
Afbeelding die als link werkt
Als een afbeelding als link werkt, moet het linkdoel natuurlijk ook kunnen worden bepaald. Visueel is het duidelijk; wat op de afbeelding te zien is, geeft (meestal) aan waar de link naartoe gaat. Voor mensen die voorleessoftware gebruiken en het niet visueel zien, moet het linkdoel echter ook duidelijk zijn.
Dit kan op meerdere manieren:
- door de afbeelding die in de link staat een alternatieve tekst te geven, bijvoorbeeld door middel van een alt-attribuut in een img-element. Dit kan dan worden voorgelezen door hulpsoftware.
- door een (verborgen) linktekst toe te voegen in de link. Als de afbeelding bij deze tekst in de link staat, dan kan de alternatieve tekst van de afbeelding leeg gelaten worden
- Door het title-attribuut op de link (het a-element) te gebruiken om het linkdoel te omschrijven.
Je ziet soms dat de afbeelding geen alternatieve tekst heeft en dat er ook geen andere linktekst aanwezig is. Hulpsoftware leest dan niets voor. Dit zal dan ook afgekeurd worden onder succescriterium 1.1.1, omdat een alternatieve tekst ontbreekt voor de afbeelding en onder succescriterium 4.1.2, omdat software de naam van de link niet kan bepalen.
Vaak staat linksboven een logo van de website. Als alternatieve tekst voor de afbeelding wordt dan het logo beschreven en dat is goed. Vaak werkt het logo ook als link naar de homepage. Er kan dan naast een alternatieve tekst die het logo beschrijft bijvoorbeeld een title-attribuut toegevoegd worden met de waarde “Naar de homepage”. Dan wordt zowel de afbeelding als het doel van de afbeelding beschreven:
<a href="URL" title=”Naar de homepage”><img src="Logo.svg" alt="Logo Zwembad de Waterman"></a>
Soms komt het voor dat er een bepaald logo in de header staat, maar dat dit niet het logo is van de afzender van de website. Denk bijvoorbeeld aan een website van een ministerie waar in de header een logo van de Rijksoverheid te zien is die werkt als link naar de homepage van dat ministerie. Dan moet het logo beschreven worden voor succescriterium 1.1.1 (“Logo Rijksoverheid”) en het moet voor succescriterium 2.4.4 ook duidelijk worden waar de link naartoe gaat (“Homepage Ministerie van … “).
Als er als link naar de Facebook-pagina van de organisatie alleen het icoontje van Facebook wordt gebruikt (de letter “f”), dan is het niet voldoende om als alternatieve tekst de letter “f” te gebruiken. De alternatieve tekst moet dan “Facebook” bevatten, zodat het linkdoel duidelijk is.
Tip: Vermeld niet alleen de naam van het social medium, maar ook je eigen naam, bijvoorbeeld “Facebook-pagina van DDAI”.
Link opent in nieuw tabblad
Het is een best practice om links in hetzelfde tabblad te openen. Het kan namelijk verwarrend zijn voor sommige bezoekers als de pagina in een nieuw tabblad opent. Als er wel voor wordt gekozen om dit te doen (bijvoorbeeld met target="_blank"), is het goed om dit aan te geven. Er kan dan bijvoorbeeld een verborgen linktekst worden gebruikt als “opent in nieuw tabblad”.
Als er een icoontje wordt getoond dat aangeeft dat de link in een nieuw venster opent, dan is het verplicht om dit icoontje een alternatieve tekst te geven die dit beschrijft. Zet deze informatie dan het liefst ná de linktekst, zodat de unieke linktekst eerst wordt voorgelezen. Soms wordt dit icoon gebruikt om aan te geven dat iets een externe link is, dan kan er met een verborgen tekst in de link worden aangegeven dat het een externe link is.
Link alleen te herkennen door kleur
Links in een lopende tekst hebben vaak een andere kleur. Als de links alleen door kleur te onderscheiden zijn, dan kan dit een probleem zijn voor slechtzienden en kleurenblinden. Zij kunnen misschien de link niet onderscheiden van de tekst er omheen en hierdoor niet doorhebben dat dit een link is. Er zijn meerdere oplossingen mogelijk. De beste oplossing is om links in de lopende tekst altijd te onderstrepen. Dan is het meteen visueel duidelijk dat dit een link is.
Er is ook een andere optie, namelijk door het contrastverschil van de link met de omringende tekst groter te maken dan 3,0:1. Als tweede voorwaarde moet er dan een visuele aanwijzing zijn als de muisaanwijzer op de link staat, bijvoorbeeld door dan een streep onder de link te tonen. Dit geeft namelijk aan dat het een interactief item is.
Fout: Link heeft alleen een andere kleur
Onderstaande afbeelding toont een tekst waarin de link alleen een andere kleur heeft:
In dit voorbeeld is de lopende tekst zwart (#000000). De tekst “andere kleur” is blauw (#004586). Het contrastverschil tussen deze kleuren is 2,2:1. Kleurenblinden en slechtzienden kunnen moeite hebben om deze tekst te onderscheiden van de rest van de tekst.
Goed: Link is ook onderstreept
In dit voorbeeld zijn de kleuren gelijk als in het eerste voorbeeld. Door de link te onderstrepen is het echter direct duidelijk dat deze tekst anders is en als link werkt.
Link heeft onvoldoende contrast
De link moet natuurlijk voldoende contrast hebben ten opzichte van de achtergrond. Als het contrast van de tekst te laag is, kunnen slechtzienden moeite hebben om de tekst te lezen. Soms zie je dat de kleur van een link verandert als de link gevolgd is (deze wordt dan bijvoorbeeld paars). Ook dan moet de tekst nog voldoende contrast hebben ten opzichte van de achtergrond.
Voorbeeld van een link met te laag contrast. De lichtgrijze tekst heeft een contrast van 1,4:1 met de witte achtergrond:
Soms verandert de kleur van de link ook als de toetsenbordfocus erop staat of als er met de muisaanwijzer overheen wordt gegaan (hover). Het is een best practice om er ook dan voor te zorgen dat de tekst voldoende contrast heeft.
Link kan niet bediend worden met het toetsenbord
De links moeten natuurlijk niet alleen met de muis te bedienen zijn, maar ook met het toetsenbord. De links moeten toetsenbordfocus kunnen ontvangen en vervolgens bedienbaar zijn met Enter. Bij standaard HTML-elementen, zoals als het a-element, is dit automatisch ingebouwd. Dit kan echter fout gaan, bijvoorbeeld als er geen href-attribuut is gebruikt binnen het a-element. De link ontvangt dan geen focus. Dit kan ook fout gaan als er geen standaard HTML-elementen zijn gebruikt.
De toetsenbordfocus is niet zichtbaar op links
Dit is van belang voor bezoekers die wel kunnen zien, maar niet de muis kunnen bedienen. Als zij met het toetsenbord over de website navigeren, moet het zichtbaar zijn waar de focus zich bevindt. Dit kan door de standaard focusindicator van de browser te gebruiken. Er kan ook een eigen focusindicator worden gebruikt, maar let op: deze moet dan wel voldoende contrast hebben voor succescriterium 1.4.11 (een contrast van 3,0:1 met de achtergrond).
Spraakbediening niet mogelijk door aria-label
Een aria-label op een link overschrijft de originele linktekst. Dit kan ook problemen geven onder succescriterium 2.5.3. In dit succescriterium moet een gebruiker van spraakbedieningssoftware de zichtbare tekst kunnen inspreken om een link te bedienen. Als de zichtbare tekst wordt overschreven door het aria-label, is dit niet mogelijk.
Link heeft geen naam of rol
Als er geen linktekst beschikbaar is, dan kan software de naam van de link niet bepalen. Er kan dan niets worden voorgelezen.
Als er in het a-element een href-attribuut ontbreekt, dan kan software de rol van de link niet bepalen. Ook kan de link dan vaak niet bediend worden met het toetsenbord.
Als er geen a-element wordt gebruikt voor de link, kan software niet bepalen dat het een link is. Als er dus een aangepaste link wordt gebruikt, moet software wel kunnen bepalen dat het een link is. Dit kan bijvoorbeeld door role=”link” te gebruiken. Dit wordt echter niet aangeraden, want het gebruik van standaard HTML-elementen zoals het a-element heeft altijd de voorkeur.
Nog een aantal adviezen voor betere links
Gebruik geen dubbele links
Soms zie je dat er meerdere links zijn die naar dezelfde pagina verwijzen, bijvoorbeeld een afbeelding, een kop en een “Lees meer” link. Als je de pagina met de muis bedient, zal je hier niet veel van merken. Als je de pagina echter met het toetsenbord bedient, dan moet je steeds langs dubbele links navigeren en dat kan hinderlijk zijn. Dit voldoet wel, maar het is beter om geen dubbele links te gebruiken.
Zet niet het woord “Link” in de linktekst
Software kan al bepalen dat iets een link is als er een a-element met href-attribuut is gebruikt. Hulpsoftware zal dan ook voorlezen “Link” en dan de linktekst. Je hoeft dus niet zelf aan te geven dat iets een link is, want dan wordt dit dubbel voorgelezen.
Gebruik geen title die gelijk is aan de linktekst
Soms zie je dat de waarde van het title-attribuut gelijk is aan de linktekst. Dan wordt deze informatie twee keer voorgelezen. Gebruik het title-attribuut daarom alleen voor aanvullende informatie.
Geef links met dezelfde bestemming ook dezelfde linktekst (en andersom)
Het is een best practice om links die naar dezelfde pagina verwijzen ook dezelfde linktekst te geven. Gebruikers kunnen dan snel deze link herkennen op een pagina en weten waar deze naartoe gaat. Andersom is het ook een best practice om links die naar verschillende pagina’s gaan ook verschillende linkteksten te geven.
Knoppen versus links
In sommige situaties kan het logischer zijn om knoppen te gebruiken in plaats van links. Wat wordt wanneer gebruikt?
- link: om te navigeren naar een andere pagina of een andere plek op de pagina.
- knop: om een actie uit te voeren. Hierbij kan wel een nieuwe pagina geladen worden, maar dat is niet het primaire doel. Denk bijvoorbeeld aan een knop om een formulier te versturen.
Denk bijvoorbeeld aan een pagina waarop een aantal items staan en bij elk item staat de link “Verwijder”. Het gaat bij deze verwijder-functies om het uitvoeren van een actie. Deze links hebben hier niet als doel om naar een andere pagina te gaan. Hier zijn knoppen dus meer passend dan links. Je kunt hiervoor dan het button-element gebruiken.
Als hier wel links gebruikt worden, dan moet bij elke “Verwijder” link bepaald kunnen welk item verwijderd gaat worden, anders is het linkdoel niet duidelijk genoeg. Knoppen hebben andere eisen dan links, deze vallen niet onder succescriterium 2.4.4.
Lees meer… over links
In dit artikel zijn allerlei problemen met links besproken. Hier valt natuurlijk nog veel meer over te lezen! Hopelijk heb je door dit artikel een inzicht gekregen in hoe je links zo toegankelijk mogelijk maakt. In de volgende bronnen kun je nog meer informatie vinden, dus lees meer!
Links over links
De volgende pagina’s zijn Engelstalig.
- Technieken voor SC 2.4.4 (Engelse pagina’s):
- Techniek G53: gebruik de context van de zin voor het linkdoel
- Techniek H77: gebruik de context van het lijstitem voor het linkdoel
- Techniek H78: gebruik de context van de paragraaf voor het linkdoel
- Techniek H79: gebruik de context van de tabelcel of tabelkop voor het linkdoel
- Techniek C7: gebruik CSS om een deel van de tekst te verbergen
- Techniek G183: gebruik voldoende contrastverschil en visuele hints als een link alleen door kleur te onderscheiden is
- Techniek H2: Combineer een afbeelding en tekstlink die naast elkaar staan in één link
- Artikel over het anchor element van freeCodeCamp
- Artikel met meer tips over toegankelijke links van WebAIM
- Artikel over het title-attribuut op links van Nielsen Norman Group
- Artikel met veel meer tips om de toegankelijkheid van links te verbeteren op Sitepoint
- Nog een artikel met tips voor toegankelijke links van Yale Universit
- En tot slot nog een artikel over toegankelijke links van de University of Minnesota