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. Gör det enkelt för alla att upptäcka och använda dessa.
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.
Krav på klickbara ytor kan komma att öka
Denna webbriktlinje har sedan länge varit en rekommendation i Sverige, men i WCAG 2.1 har motsvarande kriterium nivå AAA, vilket innebär att det inte omfattas av DOS-lagen. I utkast till WCAG 2.2 finns dock ett snarlikt kriterium på nivå AA. Där är rekommendationen att klickbara ytor – med vissa viktiga undantag – ska ha åtminstone 24×24 CSS-pixlars storlek. Detta kan alltså komma att bli en del av WCAG-standarden och detta i sin tur kan så småningom eventuellt leda till att det blir lagkrav. Men oavsett hur det blir med standarder och lagar finns nyttiga rekommendationer i W3C:s förklaringar av det föreslagna kriteriet Target size (minimum).
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 (8)
[…] Webbriktlinjer för offentlig sektor. R34: http://www.webbriktlinjer.se/r/34-gor-lankar-och-klickbara-ytor-enkla-att-anvanda-for-alla/ […]
Exemplet ifrån Upplands Väsby ser inte ut att vara aktuellt längre.
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.
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?
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.
Hur ska man tänka vad gäller ikoner? Om man ex har länkat ett word, pdf, gjort en genväg el epost länk ska man ha en liten symbol för dem som indikerar vad det är för typ av dokument?
Det kan vara en bra service till användare att indikera länkar som inte leder till webbsidor, utan kan kräva extern programvara för att man ska kunna komma åt innehållet. Samma information bör förstås förmedlas även till hjälpmedel, till exempel via ARIA-attribut.
Hej!
Tycker att ni själva har missat detta med att tydligt markera klickbara ytor/länkar när man tittar på https://webbriktlinjer.se/riktlinjer/.
När man hovrar med musen över en av riktlinjerna så visas en ram runt hela den raden. Länken är markerad som sig bör med en understrykning, men eftersom ni markerar hela raden (prio, wcag, riktlinje) så ger detta sken av att det går att klicka var som helst på raden för att kunna navigera vidare till riktlinjen. I mina ögon skulle det vara betydligt bättre att utöka den klickbara ytan att innefatta hela området innanför ramen som visas vid hovring.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.