Tomma länkar

Silktide hittar länkar som inte innehåller någon text alls – varken något synligt eller något textalternativ. En person som använder en skärmläsare hör bara ”länk” och har inget sätt att veta vart den leder.

<!-- Tom: en ikonlänk utan textalternativ -->
<a href="/search"><svg>...</svg></a>

<!-- Åtgärdad: bildens alt-text anger destinationen -->
<a href="/"><img src="logo.png" alt="Example Corp startsida"></a>

<!-- Åtgärdad: ett aria-label anger destinationen -->
<a href="/search" aria-label="Sök"><svg>...</svg></a>

Varför detta är viktigt

Länkar är hur människor tar sig runt på din webbplats, och alla kan inte se dem. En meddelar varje länk utifrån dess text; när det inte finns någon text hör användaren bara ”länk” och måste gissa eller hoppa över den. Många blinda användare navigerar också genom att ta fram en lista över alla länkar på sidan – en lista med namnlösa poster är oanvändbar.

Tomma länkar uppstår vanligtvis av misstag: en ikon ersätter text, en bild förlorar sin , eller så lämnas en överbliven <a>-tagg kvar av en redaktör. Sökmotorer kan inte heller avgöra vart en tom länk leder.

Så här åtgärdar du det

Om länken ska ha synlig text, lägg till den.
Om länken är en bild ska du ge bilden en alt-text som anger destinationen, till exempel alt="Example Corp startsida" för en logotyp som länkar till startsidan – inte en beskrivning av bilden.
Om länken är en ikon ska du lägga till ett som anger destinationen, eller inkludera text som är visuellt dold men tillgänglig för skärmläsare.
Om länken är en överbliven länk utan innehåll och syfte ska du ta bort den.

Så testar Silktide detta

Hitta varje länk på varje sida, inklusive områden i bildkartor.
Hoppa över element som saknar en fungerande länkdestination.
Läs länkens text, inklusive alt-text och textalternativ som aria-label och title på länken samt allt som finns inuti den.
Rapportera länken om ingen text hittas alls.

Felsökning

Länken ser bra ut på sidan

En länk kan se bra ut men ändå vara tom, eftersom dess utseende kommer från en ikon eller en bakgrundsbild i – inget av detta ger länken ett namn. Kontrollera den underliggande efter ett textalternativ.

Ikonens betydelse är uppenbar

Bara för personer som kan se den. Ett förstoringsglas betyder ”sök” visuellt, men en skärmläsare kan inte beskriva bilder som saknar textalternativ – etiketten måste finnas i markupen.