Overbodige redundante links verwijderen voor toegankelijkheid

Overbodige hyperlinks zijn een algemeen toegankelijkheidsprobleem. Ze zijn ook een mogelijke schending van de Wet voor personen met een handicap (ADA): In de rechtszaak Robles v. Dominos Pizza noemde de eiser overbodige links als een van de toegankelijkheidsbarrières die hij op de website van de pizzaketen zou hebben aangetroffen. Hoewel wij geen ADA-rechtszaken kennen waarin overbodige links het enige probleem waren, zijn ze niet goed voor de gebruikerservaring.

Een link is overbodig als hij naast een andere hyperlink staat die naar hetzelfde adres leidt. Dit gebeurt vaak wanneer websites afbeeldingen gebruiken die als hyperlink fungeren naast tekst die ook als hyperlink fungeert.

Gelukkig is dit probleem gemakkelijk op te sporen, en in de meeste gevallen is het eenvoudig te verhelpen. Dit is wat u moet weten.

Een voorbeeld van een overbodige link (en hoe deze op te lossen)

Stel dat uw website een winkelwagenpictogram heeft dat naast deze tekst verschijnt: “Winkel hier”. Beide elementen hebben hyperlinks die leiden naar uw winkelportaal – visueel voorziet u gebruikers van één enkele link. De code zou er zo uit kunnen zien:

<a href='handleiding-door-cursuswp-punt-com.html'>
   <img src='winkelwagen.gif' alt='shop here'>
</a>
<a href='handleiding-door-cursuswp-punt-com.html'>
   Ga naar winkel
 </a>  

Waarom is dit een probleem? Mensen die met een toetsenbord navigeren, moeten door beide elementen navigeren om voorbij de hyperlink te komen. Gebruikers van schermlezers horen de hyperlink mogelijk twee keer aangekondigd worden (één keer voor de hyperlink met pictogram en een tweede keer voor de tekst).

We kunnen dit probleem in HTML oplossen met twee basistechnieken:

• Wikkel beide elementen in dezelfde link (of een element).
• Geef een nul-tekst alternatief voor de afbeelding, samen met nauwkeurige linktekst.

Hier ziet u hoe dat er in de praktijk uit zou zien:

<a href='handleiding-door-cursuswp-punt-com.html'>
   <img src='winkelwagen.gif' alt=''>
Ga naar winkel

 </a>    

Je zou ook een alt-tag voor de afbeelding kunnen voorzien die snel het pictogram beschrijft, op voorwaarde dat de beschrijving van de afbeelding verschilt van de linktekst. Het beschrijven van de afbeelding kan beter zijn voor de toegankelijkheid als de beschrijving de linktekst aanvult. Bijvoorbeeld:

<a href='handleiding-door-cursuswp-punt-com.html'>
   <img src='winkelwagen.gif' alt="winkelwagen icon'>
Ga naar winkel
 </a>     

Nog een belangrijke opmerking: veel websites gebruiken HTML-tabellen voor de opmaak, wat kan leiden tot overbodige links en andere bruikbaarheidsproblemen. Waar mogelijk is het beter om CSS-tabellen te gebruiken – zo voorkomt u overbodige links en biedt u gebruikers van ondersteunende technologie een duidelijke sitestructuur.

Schrijf beknopte, beschrijvende linktekst

Als gebruikers het doel van de link kunnen begrijpen wanneer deze aandacht krijgt, hebt u het probleem opgelost. U wilt de gebruiker niet overladen met onnodige informatie.

In dit voorbeeld zijn de gelinkte afbeelding en de tekst van de hyperlink onnodig lang. Een schermlezer zal beide linkbeschrijvingen aankondigen – wat geen goede ervaring zou zijn voor gebruikers.

<a href='handleiding-door-cursuswp-punt-com.html'>

   <img src='winkelwagen.gif' alt='winkelwagenpictogram dat verwijst naar onze winkel'>
  Om te beginnen met winkelen in onze estore, klik hier en log in
 </a> 

Moet ik overbodige links repareren om aan WCAG eisen te voldoen?

Het World Wide Web Consortium (W3C) publiceert de Web Content Accessibility Guidelines (WCAG), de internationale norm voor digitale toegankelijkheid. Hoewel het W3C sterk aanbeveelt naast elkaar liggende beeld- en tekstlinks voor dezelfde bron te combineren, bevat WCAG geen specifiek succescriterium voor overbodige links.

Alle hyperlinks moeten echter accurate tekstalternatieven hebben om te voldoen aan WCAG 2.1 Succescriterium 2.4.4, “Link Doel (In Context):”.

Het doel van elke link kan worden bepaald aan de hand van de linktekst alleen of van de linktekst samen met de programmatisch bepaalde linkcontext, behalve wanneer het doel van de link dubbelzinnig zou zijn voor gebruikers in het algemeen.

Als uw website een afbeelding met hyperlink bevat die geen betekenisvolle alt-tekst heeft, voldoet u niet aan deze richtlijn – zelfs als u een teksthyperlink naast de afbeelding opneemt.

En aangezien overbodige links frustrerend zijn voor gebruikers, is de beste praktijk om uw inhoud te repareren door beide elementen in dezelfde hyperlink te combineren. Vergeet niet dat de gebruikerservaring uw belangrijkste prioriteit is.

Om een langetermijnplan voor toegankelijkheid op te stellen, begint u met een gratis WCAG 2.1 Niveau AA nalevingsoverzicht van uw website. Voor meer advies over hyperlinks kunt u ons een rechtstreeks bericht sturen om in contact te komen met een deskundige op het gebied van webtoegankelijkheid.