Webbsidor använder länkar för att skicka besökare till nytt eller ytterligare innehåll. Länkar kan vara text och bilder. Länkar är kraftfulla navigeringsverktyg och måste vara ordentligt strukturerade för bästa möjliga upplevelse.

WCAG (Web Content Accessibility Guidelines) är specifika definierade krav som säkerställer att innehållet är tillgängligt för alla. Enligt riktlinjerna WCAG 2.1 AA måste länkar ange syftet med länken så att besökare kan bestämma om de vill följa den. Länkar behöver urskiljbar text som talar om för besökare var de hämnar om de klickar på dem.

Vad innebär urskiljbar text?

Länkar har i allmänhet två informationsdelar:

  • URL: Webbadressen som länken skickar besökare till när de klickar på den
  • Visningstext: Synlig text som talar om för besökare var de kan förvänta sig att hamna om de klickar på länken

Vi kan titta på den här länken som ett exempel: Tips för länkar. Länken ”Tips för länkar” ser ut så här i HTML-källkoden:<a href="#best-practices">Best practices for links</a>

Om visningstexten eller texten mellan taggarna <a> saknas så saknar länken urskiljbar text. ”Urskiljbar text” är texten som talar om syftet med länken för dina besökare.

Det är ett mindre problem när länkar inte har urskiljbar text. Åtgärda mindre problem för att skapa en bättre upplevelse. Länkar som saknar eller har vag text kan göra navigeringen förvirrande och vara en källa till frustration för personer med funktionshinder.

Så här använder personer med funktionshinder länkar länk till slutet av sidan

Ally hjälper dig att identifiera vilka länkar som saknar text och hur du åtgärdar detta. Ally går igenom dessa kontroller:

  • Finns det text mellan hyperlänktaggarna <a>?
  • Är texten mellan taggarna <a> dold?
  • Har bilder som används som länkar alternativa beskrivningar?

Om länken misslyckas på någon av dessa punkter så markerar Ally länken som ett problem.

Använd Ally för att hitta länkar som saknar text

Använd Allys tillgänglighetsrapport för att upptäcka och åtgärda tillgänglighetsproblem på din webbplats. Använd länken som anges för rapporten och logga in. Öppna rapporten och titta på listan över problem i tabellen Tillgänglighetsproblem.

Tabellen tillgänglighetsproblem finns både på fliken Översikt och fliken Domän. Starta på fliken Domän för att se problem som är specifika för en domän.

Länkar som saknar urskiljbar text flaggas som ett mindre problem. Använd fliken Mindre i tabellen Tillgänglighetsproblem för att se på listan över mindre problem. Välj problem med länkar utan urskiljbar text.

Om du börjar i fliken Översikt markerar du problemet och sedan domänen med problemet.

Från listan med problem i domänen ska du välja poängindikatorn bredvid ett objekt med problemet. Innehållsredigerarens återkopplingspanel öppnas.

Förhandsgranska länkarna som saknar text

Allys återkopplingspanel visar en förhandsgranskning av innehållet samt detaljerad återkoppling och stöd för att hjälpa dig fixa dina tillgänglighetsproblem. Använd förhandsgranskningen för att se länkarna som saknar text.

Förhandsgranskningen visar var specifika tillgänglighetsproblem finns i dokumentet. Markeringar visar varje förekomst av en problemtyp i taget. För problemet med länkar som saknar text, till exempel, markeras varje förekoms av det specifika problemet.

Förhandsgranskningsverktyg

Använd förhandsvisningsverktygen för att utforska problemen i ditt dokument.

  • Gå igenom förhandsvisningen sida för sida.
  • Se hur många gånger ett enskilt problem förekommer.
  • Hoppa mellan problemmarkeringar.
  • Dölj eller visa markeringarna.
  • Zooma in eller ut på förhandsvisningsinnehållet.
  • Om problemet finns i ett bifogat dokument ska du ladda ner originalfilen.

Följ Allys instruktioner för att lägga till länktext

Ally utgår från att du har grundläggande kunskaper om HTML och hur du använder ditt innehållshanteringssystem (CMS). För att följa instruktionerna behöver du veta hur man redigerar en webbsida i HTML-kod eller källkoden i ditt CMS.

Tillsammans med förhandsgranskningen ger Ally dig stegvisa instruktioner om hur du åtgärdar problemet. Ally strukturerar denna återkoppling i ett beslutsträd. Läs anvisningarna och svara på uppmaningarna. Lär dig vad problemet är, varför det spelar roll och hur man korrigerar det korrekt.

Klicka på Så här åtgärdar du länktext för att följa instruktionerna.

Olika sätt att lägga till text i länkar

Det finns mer än ett sätt att åtgärda länktexten på dina webbsidor.

  • HTML: Allys instruktioner förklarar hur du hittar och åtgärdar länktext i HTML. Leta helt enkelt upp webbsidan med länken. Redigera sidan. Lägg till text mellan taggarna <a> i HTML-koden. Spara sidan.
  • RTE: Vissa innehållshanteringssystem (CMS) har en Rich Text Editor (RTE) som kan vara ett användarvänligt sätt att fixa länkar. Hitta länken på webbsidan. Klicka på länken och använd CMS-verktygen för att lägga till text. Spara sidan.

Gå till w3schools för att få reda på mer om HTML och CSS

Tips för länkar

  • Länktexten ska vara beskrivande. Berätta för dina besökare vart de är på väg. Beskriv vad användaren kan förvänta sig att se när de klickar på länken.
    • Undvik text som ”klicka här” och ”se mer”. De här fraserna talar inte om för besökare vad de kan förvänta sig när de klickar på länken. En del tekniska hjälpmedel har ett verktyg som skapar en lista över länkarna på sidan. Fraser som dessa har ingen betydelse när de tas ur sitt sammanhang och visas i en lista.
    • Undvik webbadresser som synlig länktext. En webbadress är inte alltid beskrivande. Skärmläsare läser också varje enskild bokstav i en webbadress, vilket kan vara frustrerande för besökare som använder dessa.
  • Länktexten ska vara unik. Varje länk bör vara olik de andra länkarna på sidan. Upprepande länktext kan vara förvirrande när den tas ur sitt sammanhang och visas i länklistverktyget.
  • Länkarna ska skilja sig från resten av texten visuellt. Det bör vara tydligt att det är en länk. Om du inte tycker om länkens format kan du uppdatera mallen.
    • Se till att det inte bara är färgen som gör att länken skiljer sig från resten av texten. WCAG 2.1 - 1.4.1

      Länkens utseende definieras ofta i webbplatsens stilguide och kan ha med varumärket att göra. Innan du gör några ändringar bör du kontrollera stilguiden för din webbplats och kontakta din webbplatsadministratör.

  • Meddela användarna om länken öppnas i ett nytt fönster. Att öppna länkar i ett nytt fönster kan vara förvirrande. Berätta för användarna när du skickar dem till ett nytt fönster eller en ny flik.
  • Använd inte en bild för att representera något som du kan skapa i HTML. Använd till exempel inte en bild av en knapp istället för en faktisk knapp. Använd inte en bild av en tabell i stället för en tabell som skapats i HTML-källkoden.

Så här använder personer med funktionshinder länkar

Korrekta länkar som innehåller en länk och beskrivande länktext skapar en mycket bättre upplevelse för alla. Korrekt utformade länkar är kraftfulla navigeringsverktyg och gör det tydligt vad man kan förvänta sig. Men för besökare med nedsatt syn är det extra viktigt att länkarna är korrekta.

Länkar med unik och beskrivande text kan innebära snabb navigering för många användare.

  • Skärmläsaranvändare behöver inte lyssna på hela sidan. De kan istället välja att lyssna på och interagera med en lista över länkar.
  • Användare av taligenkänning interagerar med länkar genom att säga vilken länk de vill välja.

Länkar som är korrekt utformade kan vara lättare för många användare att se och interagera med.

  • Användare som endast använder tangentbord och som kanske inte kan använda musen kan använda tangentbordet för att navigera till element på sidan, så som länkar.
  • Användare med färgblindhet kanske inte ser färgvariationen, men kan se en understruken länk.