Riktlinje nr 34 Prio 1

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 stora. Det underlättar för användarna.
  • Framhäv länkarna grafiskt så att användarna förstår vad som är länkad text.

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.

Se även R5. Skriv tydliga länkar.

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

Huvudmeny på www.upplandsvasby.se med 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.


FördjupningLänk hit

Vid navigering (tabbning) mellan länkar och andra element med tangentbord bör aktuellt fokus visas tydligt. Se WCAG2.0 2.4.7.



Kommetarer (1)