Links voor schermlezers
Silktide vindt linkelementen die op een manier verkeerd zijn opgebouwd waardoor ze niet werken met : links zonder leesbare tekst, links zonder bestemming en losse lege linktags die op de pagina zijn achtergebleven.
Om met ondersteunende technologie te werken, heeft een link zowel een bestemming (een
href-attribuut) als iets leesbaars nodig:
<!-- Werkt: bestemming en leesbare tekst -->
<a href="/about">Over ons</a>
<!-- Werkt: een afbeeldingslink met alternatieve tekst -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>
Waarom dit belangrijk is
Een kondigt elke link aan met de bijbehorende tekst. Een link met een bestemming maar zonder tekst wordt alleen aangekondigd als 'link' — de gebruiker kan de link activeren, maar weet niet waar deze naartoe leidt. Een link met tekst maar zonder bestemming lijkt klikbaar, maar leidt nergens naartoe. Beide patronen verbreken de basisafspraak waarmee mensen die ondersteunende technologie gebruiken door een pagina kunnen navigeren via de links.
Hoe je dit oplost
- Voor een link met een bestemming maar zonder leesbare tekst: voeg tekst toe binnen de link, of als deze alleen een afbeelding bevat.
- Voor een link met tekst maar zonder bestemming: voeg het ontbrekende
href-attribuut toe, of als het element echt een doel is waarnaar andere links moeten kunnen springen, verplaats deidnaar een niet-linkelement:
<!-- Verouderd doelanker, afgeraden in HTML5 -->
<a name="example"></a>
<!-- Voorkeur: een id op een normaal element -->
<div id="example">...</div>
- Voor lege
<a></a>-tags zonder attributen: verwijder ze, want ze hebben geen functie. Ze blijven vaak achter na gebruik van editors of scripts. - Als het element eigenlijk een knop is — het voert een actie uit in plaats van te navigeren — gebruik dan
een
<button>-element of voegrole="button"toe aan de bestaande tag.
Hoe Silktide dit controleert
- Zoek elk
<a>-element op de pagina en lees de tekst ervan (inclusief alternatieve tekst van afbeeldingen en tekst die door CSS is toegevoegd), hethref-attribuut en eventueleid- ofname-attributen. - Markeer drie probleempatronen:
- Een link met een
hrefmaar zonder leesbare tekst. - Een element met tekst en een
idofname, maar zonderhref— een doel dat zich voordoet als een link, of een link zonder bestemming. - Een volledig leeg anker zonder tekst,
href,idofname.
- Een link met een
- Twee patronen worden bewust niet gemarkeerd:
<a>met tekst maar zonderhref,idofname— HTML5 staat dit toe als een 'placeholderslink', die vaak later wordt ingevuld door .- Lege ankers met een
idofnamemaar zonderhref— dit zijn verouderde springdoelen, geen links.