Länkar för skärmläsare
Silktide hittar länkelement som är felaktigt utformade på sätt som gör att de inte fungerar för – länkar utan läsbar text, länkar utan mål samt överblivna tomma länktaggar som finns kvar på sidan.
För att en länk ska fungera med hjälpmedel behöver den både ett mål (ett
href-attribut) och något läsbart inuti sig:
<!-- Fungerar: mål och läsbar text -->
<a href="/about">Om oss</a>
<!-- Fungerar: en bildlänk med alternativtext -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>
Varför detta är viktigt
En läser upp varje länk utifrån dess text. En länk med ett mål men utan text läses bara upp som ”länk” – användaren kan aktivera den men har ingen aning om vart den leder. En länk med text men utan mål ser klickbar ut men leder ingenstans. Båda mönstren bryter mot det grundläggande villkor som gör det möjligt för personer som använder hjälpmedel att navigera på en sida via dess länkar.
Så åtgärdar du problemet
- För en länk med ett mål men utan läsbar text: lägg till text i länken, eller om den endast innehåller en bild.
- För en länk med text men utan mål: lägg till det saknade
href-attributet, eller flytta dessidtill ett element som inte är en länk om elementet i själva verket är ett mål som andra länkar ska hoppa till:
<!-- Äldre målankare, rekommenderas inte i HTML5 -->
<a name="example"></a>
<!-- Rekommenderat: ett id på ett vanligt element -->
<div id="example">...</div>
- För tomma
<a></a>-taggar utan några attribut alls: ta bort dem – de fyller ingen funktion. De lämnas ofta kvar av redigerare eller skript. - Om elementet i själva verket är en knapp – det utlöser en åtgärd i stället
för att navigera – använder du ett
<button>-element eller lägger tillrole="button"i den befintliga taggen.
Så testar Silktide detta
- Hitta varje
<a>-element på sidan och läs dess text (inklusive alt-text för bilder och text som läggs till med CSS), desshrefsamt eventuellaid- ellername-attribut. - Markera tre problemmönster:
- En länk med ett
hrefmen utan läsbar text. - Ett element med text och ett
idellernamemen utanhref– ett mål som utger sig för att vara en länk, eller en länk som saknar sitt mål. - Ett helt tomt ankare utan text,
href,idellername.
- En länk med ett
- Två mönster markeras medvetet inte:
<a>med text men utanhref,idellername– HTML5 tillåter detta som en ”platshållarlänk”, som vanligtvis fylls i senare med .- Tomma ankare med ett
idellernamemen utanhref– dessa är äldre hopplänksmål, inte länkar.