Na het lezen van deze titel vraag je je waarschijnlijk af waar dit artikel over gaat. Nou, precies daarover! Op websites zie je vaak links staan met teksten als “Lees meer”, “Lees verder”, “klik hier” of iets dergelijks. Deze links kunnen problemen opleveren voor blinden en slechtzienden die voorleessoftware gebruiken. Ook voor sommige bezoekers met cognitieve problemen kunnen ze verwarrend zijn.
Voor sommige bezoekers is het onduidelijk waar dit soort links naartoe verwijzen. Dit probleem valt onder succescriterium 2.4.4 Linkdoel (in context) van de Web Content Accessibility Guidelines (WCAG). In dit artikel wordt dit probleem nader toegelicht en bespreken we ook hoe dit kan worden opgelost of voorkomen. Ook komen een aantal andere problemen aan bod die te maken hebben met de toegankelijkheid van links. Dus, lees meer…!
Wat is precies het “Lees meer”-probleem?
Je ziet “Lees meer” links vooral bij overzichtspagina’s met nieuwsartikelen of op de homepage. Bij ieder item staat dan een afbeelding, een kop met een korte toelichting en daaronder volgt dan de beruchte “Lees meer” link.
Visueel is meteen duidelijk wat het onderwerp is en waar deze link naartoe gaat. Omdat je de kop, de paragraaf en de afbeelding ziet, heb je meteen door wat het onderwerp is.
Bezoekers van je website die blind of slechtziend zijn, kunnen gebruik maken van voorleessoftware of een brailleleesregel. Deze hulpmiddelen lezen de tekst op de pagina voor. Met voorleessoftware kan je van link naar link navigeren op een pagina, de link wordt dan voorgelezen. Ook is het mogelijk om een lijst met links op te vragen die op de pagina staan.
Als een blinde bezoeker van de website met voorleessoftware langs dit soort links gaat, wordt soms alleen de tekst “Lees meer” of “Lees verder” voorgelezen. Het is dan onduidelijk waar de link naartoe gaat. Voor veel bezoekers is het daarom nodig dat het doel van elke link duidelijk is: software moet het linkdoel kunnen bepalen. Dit is waar succescriterium 2.4.4 over gaat.
Het anchor-element (a-element)
Voor links op een website kan het a-element worden gebruikt. Dit ziet er als volgt uit:
<a href=”URL”>Dit is de tekst van de link</a>
Tussen de begintag (<a>) en de eindtag (</a>) staat de tekst van de link. In de begintag <a> zie je href="URL" staan. In dit attribuut staat de URL van de pagina waar je naartoe gaat als je op de link klikt. Er kunnen ook andere manieren gebruikt worden om een link te maken, maar dit is het standaard HTML-element.
Hoe wordt het linkdoel bepaald?
De Nederlandse definitie van linkdoel is als volgt:
“aard van het resultaat dat verkregen wordt door activering van een hyperlink”.
Bron: w3.org
Met andere woorden: waar brengt deze link mij heen als ik deze volg?
Software moet dit linkdoel kunnen bepalen om deze informatie over te kunnen brengen aan bezoekers van de website. Hoe bepaalt software het linkdoel? Er wordt hierbij gekeken naar:
- De linktekst: dit is de tekst binnen het a-element:
<a href="URL">Linktekst</a>. - Het title-attribuut: dit kan op het a-element staan:
<a href="URL" title=”Toelichting”>Linktekst</a>. - De door software bepaalde linkcontext: een link kan op een paar manieren context hebben met andere tekst op de pagina. Dit wordt verderop in dit artikel toegelicht onder “Linkdoel uit de context”.
- Andere opties, bijvoorbeeld het gebruik van een aria-label op de link:
<a href="URL" aria-label=”Toelichting Linktekst”>Linktekst</a>. Hierbij moet je wel goed opletten, dit wordt ook verderop in dit artikel toegelicht onder “Gebruik van een WAI-ARIA attribuut”.
Deze opties hoeven dus niet allemaal gebruikt te worden! Als de linktekst zelf al goed beschrijft waar de link naartoe gaat, is dit bijvoorbeeld voldoende. Er zijn verschillende methoden om ervoor te zorgen dat software kan bepalen waar de link naartoe gaat. Hieronder volgen een aantal van deze methoden.
Maak van de kop een link
Vaak staat de “Lees meer” link onder een koptekst. Deze koptekst geeft dan vaak goed het onderwerp aan van de pagina waar de link naar toe verwijst. Er kan dus voor gekozen worden om van de kop een link te maken. Als deze door voorleessoftware wordt voorgelezen, is het meteen duidelijk waar deze link naartoe gaat.
Voor mensen die de muis gebruiken, is het vaak wel handig als er op het hele blok (van afbeelding, kop, paragraaf en link) geklikt kan worden, en niet alleen op de kop. Dit kan worden bereikt door het klikbare gebied uit te breiden met JavaScript of CSS. In dit geval wordt het linkdoel dus duidelijk uit de linktekst zelf.
Zorg voor een (verborgen) toelichting met meer informatie
Je kan er ook voor kiezen om de linktekst van de “Lees meer”-link uit te breiden, zodat deze meer toelichting geeft over het onderwerp. Denk dan aan een tekst als “Lees meer over de nieuwe WCAG 2.2 richtlijnen” of “Lees verder over het nieuwe album van ABBA”. Als deze link wordt voorgelezen door hulpsoftware, is het ook meteen duidelijk wat het linkdoel is.
Verberg linktekst met CSS
Deze toelichting mag ook visueel verborgen worden. Op de pagina is er dan alleen “Lees meer” te zien, maar in de code staat dan nog extra tekst die het linkdoel beschrijft. Deze kan bijvoorbeeld met een span-element binnen het a-element worden gezet, zodat het onderdeel is van de linktekst. Bijvoorbeeld:
<a href="URL">Lees meer <span class=”visually-hidden”>over digitale toegankelijkheid</span></a>Deze tekst kan dan visueel verborgen worden met CSS. Dit kan bijvoorbeeld met de “clip methode”. In bovenstaand voorbeeld van de code moet de CSS eigenschap “visually-hidden” er voor zorgen dat deze tekst visueel verborgen is, maar wel kan worden voorgelezen door hulpsoftware.
Belangrijk: verberg de tekst niet met CSS display:”none” of visibility:”hidden”. De tekst is dan namelijk ook verborgen voor hulpsoftware en zal niet worden voorgelezen.
Gebruik een title-attribuut
Om extra toelichting te geven over waar de link naartoe gaat, kan je ook een title-attribuut op het a-element plaatsen. Dit is alleen bedoeld voor aanvullende informatie. Voorleessoftware kan bij een link de linktekst en de waarde in het title-attribuut samen voorlezen. Uit deze combinatie kan dan duidelijk worden waar de link naartoe gaat.
Bijvoorbeeld in een situatie waar “Digitale toegankelijkheid” de kop is boven de “Lees meer” link:
<a href=”URL” title=”Digitale toegankelijkheid”>Lees meer</a>Er zitten ook nadelen aan het title-attribuut. Als je met de muisaanwijzer over een link met een title-attribuut gaat, wordt de tekst uit het title-attribuut zichtbaar in een tooltip. Dit is echter niet mogelijk met het toetsenbord. Zorg er dus voor dat dit title-attribuut alleen aanvullende informatie geeft, anders kunnen mensen die het toetsenbord gebruiken mogelijk informatie missen.
Linkdoel uit de context
Het linkdoel kan dus bepaald worden door de linktekst of het title-attribuut, maar kan ook uit de door software bepaalde linkcontext worden gehaald. Een link heeft echter niet zomaar context met tekst die erboven staat. Als een “Lees meer”-link onder een kop en een paragraaf staat, heeft de link niet automatisch context met die informatie.
Links kunnen maar op enkele manieren context krijgen van andere content. Het gaat erom dat een gebruiker van hulpsoftware de focus niet van de link af hoeft te halen en dat toch de nodige informatie over het linkdoel kan worden voorgelezen door hulpsoftware.
Dit kan door de toelichting bij de link te plaatsen in:
- dezelfde zin,
- dezelfde paragraaf,
- hetzelfde lijst-item,
- dezelfde tabelcel of in de tabelkop die bij de tabelcel hoort.
Belangrijk: hierbij wel de opmerking dat het voor gebruikers van voorleessoftware fijner is als het linkdoel meteen uit de linktekst te begrijpen is in plaats van uit de context. Omdat een gebruiker van link naar link kan “tabben”, is het handiger als dan meteen het linkdoel duidelijk wordt uit de linktekst zelf. Als je aan succescriterium 2.4.9 op niveau AAA wilt voldoen, dan mag de context zelfs niet meer gebruikt worden om het linkdoel te bepalen..
Hieronder worden deze methoden om het linkdoel uit de context te halen kort toegelicht. Meer informatie kan worden gevonden in de desbetreffende technieken, de links daarvan staan in onderaan het artikel.
Linkcontext door de zin
Als de link in een zin staat, dan kan de gehele zin voorgelezen worden, zodat het linkdoel duidelijk wordt. Bijvoorbeeld:
<a href="URL">Lees meer</a> over de Golden retriever.Hoewel dit voldoet, heeft het hier de voorkeur om van deze hele zin een link te maken. Dit heeft ook voordelen voor de vindbaarheid van je website (SEO).
<a href="URL">Lees meer over de Golden retriever.</a>Linkcontext door de paragraaf
Als de link in een paragraaf-element staat, kan het linkdoel uit de tekst in de paragraaf worden gehaald. De link moet dan in de HTML-code direct in het paragraaf-element staan en mag niet genest zijn in andere elementen (bijvoorbeeld extra div-elementen). Bijvoorbeeld:
<p>In de zomer van 2022 hopen wij het festival te organiseren. <a href="URL">Lees meer</a></p>Hoewel dit voldoet, heeft het hier wederom de voorkeur om van deze hele zin een link te maken.
Linkcontext door het lijstitem
Een lijstitem kan ook gebruikt worden als linkcontext. Bijvoorbeeld:
<ul>
<li>15 km <a href="URL">meer info</a></li>
<li>Halve marathon <a href="URL">meer info</a></li>
<li>Hele marathon <a href="URL">meer info</a></li>
</ul>Hoewel dit voldoet, heeft het hier wederom de voorkeur om van deze hele tekst een link te maken:
<li><a href="URL">Hele marathon meer info</a></li>Linkcontext door de tabelcel of tabelkop
In een tabel kan tekst in een tabelcel als context gebruikt worden. Dit is hetzelfde principe als hierboven aangegeven met p-elementen en li-elementen, maar hier dan met een td-element in een tabel.
<td>15 km <a href="URL">meer info</a></td>In een tabel kan ook de tabelkop die bij de tabelcel hoort gebruikt worden als context. De tabelkop kan namelijk worden voorgelezen als de focus op een tabelcel staat.
| 15 km | Halve marathon | Hele marathon |
|---|---|---|
| Startpunt “de Haven” | Startpunt Kerkstraat | Startpunt Kerkstraat |
| 13:00 | 12:00 | 9:00 |
| Download informatieblad (link) | Download informatieblad (link) | Download informatieblad (link) |
Als in deze tabel de kolomkoppen als “15 km: met th-elementen zijn opgemaakt, dan kunnen deze als context gelden voor de links “Download informatieblad” in de td-elementen.
Gebruik van een WAI-ARIA attribuut
Er zijn verschillende WAI-ARIA attributen die gebruikt kunnen worden. Met een aria-label op de link kan meer informatie gegeven worden over waar de link naar toe gaat.
Let op: dit aria-label overschrijft de originele linktekst! De originele linktekst is niet meer beschikbaar voor hulpsoftware en zal niet worden voorgelezen. Het is dus belangrijk om in een aria-label de originele linktekst te herhalen.
Voorbeeld waar het fout gaat:
<a href="URL" aria-label=”over deze koptelefoon”>Bekijk meer reviews</a>Hier zal hulpsoftware alleen “over deze koptelefoon” voorlezen. De tekst “Bekijk meer reviews” wordt overschreven. Het is dan niet meer duidelijk dat de link naar reviews gaat.
Voorbeeld waar het goed gaat:
<a href="URL" aria-label=”Bekijk meer reviews over deze koptelefoon”>Bekijk meer reviews</a>Hier zal hulpsoftware “Bekijk meer reviews over deze koptelefoon” voorlezen.
Zoals je ziet is het wat omslachtig om een aria-label toe te voegen en hierin de linktekst te herhalen. Dit is ook nogal foutgevoelig. Dit wordt dus niet als methode aangeraden. Hetzelfde geldt voor het gebruik van het aria-labelledby attribuut, want dit overschrijft ook de originele linktekst.
Het aria-describedby attribuut kan ook gebruikt worden om informatie aan de link te verbinden. Bij dit attribuut is de informatie aanvullend in plaats van overschrijvend. Dit is dus een betere optie als je gebruik wilt maken van WAI-ARIA.
Verbeter je link met een duidelijk linkdoel
Links met een duidelijke omschrijving zijn voor veel bezoekers prettiger en ze dragen ook bij aan de vindbaarheid van je website. Goede link-omschrijvingen zijn namelijk ook een ranking factor voor bijvoorbeeld Google.
In dit artikel hebben we diverse code-voorbeelden en tips omschreven waarmee je zelf betere links kunt maken. De meest eenvoudige oplossing is gewoon een goede linktekst maken.
In een volgend artikel geef ik je meer tips over het maken van goede links en vertel ik kort over andere toegankelijkheidsproblemen die we tegenkomen bij links.