Gör länkar, klickbara ytor och menyer användbara för alla

Klickbara ytor, till exempel textlänkar, bildobjekt och knappar, spelar en viktig roll på webben. Användarna behöver lätt kunna förstå vad som är klickbart. Se därför till att markera samma typ av länkar på samma sätt över hela webbplatsen.


Rekommendationer för länkar och klickbara ytorLänk hit


Gör de klickbara ytorna tillräckligt storaLänk hit

Det är alltid lättare att träffa en stor yta med en muspekare än en liten. Det är dessutom extra viktigt för användare med sämre precision och finmotorik att klickbara ytor (knappar, ikoner, länkar med mera) är tillräckligt stora. Även de som surfar på mobiltelefoner är hjälpta av att de klickbara ytorna är stora. Fingrarnas storlek gör det svårt att träffa en liten yta med ett finger. Tänk på detta:

  • Placera inte länkar för nära varandra.
  • Förstora den klickbara ytan genom att inkludera ett område runt det som är länkat.
  • Gör en enda länk (ett A-element) av ikon och text i en sammansatt länk.
  • Gör ikoner som är en del av navigeringen klickbara. När du kombinerar text och bildelement i till exempel menyalternativ bör både texten och bilden vara klickbar.

Framhäv länkarna grafisktLänk hit

Användarna måste enkelt kunna skilja en textlänk från text som inte är länkad. Se därför till att länkar skiljer sig grafiskt från övrig text, till exempel genom understrykning, placering, färg eller storlek.
Aktiva länkar kan göras tydligare till exempel genom ändrad bakgrundsfärg. Det hjälper alla användare men framför allt personer som navigerar med tangentbordet.

Oavsett vilket sätt ni väljer för att lyfta länkar grafiskt, tänk på detta:

  • Ge textlänkar samma färg på hela webbplatsen.
  • Skapa god kontrast mellan länktext och bakgrundsfärg.
  • Använd olika färger för besökta och icke-besökta länkar.

Länkar i listor behöver inte vara understrukna, eftersom det kan göra det svåra att läsa.

Undantag för länkar i menyer

Länkar i menyer behöver inte vara understrukna, så länge användarna förstår att de är klickbara. Det är inte heller nödvändigt att skilja på besökta och icke-besökta länkar i menyer.
Användarna ska kunna ändra textstorleken i menyer och andra delar av navigeringen med hjälp av webbläsarens inbyggda funktioner.


ExempelLänk hit

 

Fagersta kommun markerar vad som är klickbart i sin huvudnavigering genom att den färgade plattan ändrar nyans när användaren för muspekaren över. Hela plattan är dessutom klickbar, vilket skapar en stor klickbar yta.


MätbarhetLänk hit

  • Gör en expertgranskning eller användningstester för att säkerställa att riktlinjen uppfylls.
  • Kontrollera att endast text som är länkad är understruken.

Kommentarer till denna riktlinje

Kommentarer (5)

    • Besökare skriver:

      Exemplet ifrån Upplands Väsby ser inte ut att vara aktuellt längre.

      • Pär Lannerö skriver:

        Skärmdumpen är i och för sig inte längre aktuell, men Upplands Väsby kommun har fortfarande föredömligt stora klickbara ytor. Tekniskt har de på flera ställen löst detta genom att länk-elementet a omsluter div:ar för både ikon, rubrik och kort introtext. Därmed blir hela det rektangulära området runt länken klickbart. I utkast till WCAG 2.1 finns rekommendation om att klickbara ytor ska vara minst 44×44 pixlar stort (AAA-kriterium). Upplandsvasby.se uppnår detta med god marginal på de flesta länkar, även om det finns enstaka undantag.

  • Linda Eriksson skriver:

    Hej! Jag blir osäker av texten ovan. Först står det att understrykning är ett exempel på hur länkar kan framhävas grafiskt, men sedan står det att länkar i listor och menyer är undantagna och inte behöver vara understrukna. Betyder det att understykning annars är ett krav?

    • Tommy Olsson skriver:

      Understrykning är inte krav, men det måste finnas något sätt utöver textfärgen att visuellt särskilja länkar från omgivande text. Understrykning är troligen det bästa sättet i många situationer, då de allra flesta användare känner till konventionen att understruken text är länkad. Du kan dock använda andra sätt, till exempel pilar eller ikoner.

      I en meny, länklista eller liknande där all text är länkad blir understrykning ofta visuellt rörig. Det finns då ingen omgivande text som länkarna behöver särskiljas ifrån.


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)