3.1.9 Gör länkar och klickbara ytor enkla att använda för alla

En webbsida innehåller ofta ytor som är klickbara, exempelvis textlänkar, bildobjekt, och knappar. Ibland kan det vara svårt för användaren att förstå vad som är klickbart. Det gäller särskilt bilder som också är länkar och textlänkar som inte är understrukna.

Det kan också vara svårt att klicka på vissa element om den klickbara ytan är liten – alla användare har inte god precision och finmotorik. Undvik också att placera länkar för nära varandra.

Länkar bör (med vissa undantag) vara understrukna

Att länkar är understrukna är en stark konvention på webben. Om de inte är det tvingas användarna stanna upp och lista ut hur länkar är markerade innan de kan använda webbplatsen. Färgen på länkar ska tydligt skilja sig från färgen på icke-länkad text. Länkar i löpande text ska vara understrukna och gärna blå.

Undantag kan göras för länkar i menyer och liknande, om det tydligt framgår vad som är klickbart och understrykningen medför att läsbarheten försämras. Vad som är klickbart kan du tydliggöra genom den grafiska formgivningen. Bilden nedan visar ett exempel från sverige.se (numera nedlagd) där länkarna i en lista inte är understrukna. Länkarna i listan är blå och har en ikon som förtydligar att texten är klickbar.

Använd olika färger för besökta och icke-besökta länkar

För datorovana användare och användare med vissa typer av kognitiva funktionshinder kan det vara mycket värdefullt att se om en länk leder till en sida man redan besökt. De två färgerna bör vara olika varianter eller nyanser av samma färg. Icke-besökta länkar bör vara starkare och mer klara i färgen än besökta länkar.

I menyer är det inte nödvändigt att skilja på besökta och icke-besökta länkar.

Visa tydligt vilken länk som är aktiv

Aktiva länkar kan markeras tydligare genom till exempel ändrad bakgrundsfärg. Detta hjälper personer som navigerar med tangentbordet. En länk är aktiv när den får fokus när man tabbar och i det ögonblick man klickar på den. Ange en bakgrundsfärg till aktiva länkar i stilmallen med hjälp av: focus (:active för Internet Explorer). Kom ihåg att skapa god kontrast mellan länktext och bakgrundsfärg. Läs mer om kontraster i 3.2.2.

Exempel

Kodexempel på aktiva länkar med bakgrundsfärg.

Formulering av bra länktexter, se avsnitt 5.7 Länkar och dokument.

Utvidga storleken på klickbara ytor

• Inkludera innermarginaler (padding) runt länkelement i den klickbara ytan. På detta sätt kan användare med nedsatt finmotorik enklare aktivera länken.
• Gör ikoner i navigationselement klickbara. Om du kombinerar text och bildelement i till exempel menyalternativ bör du säkerställa att både texten och bilden går att klicka på. Undvik dock att göra separata länkar för ikon och text.

Textstorlek i menyer och andra navigationsområden ska kunna ändras av användaren med hjälp av webbläsarens inbyggda funktioner.

Exempel

I menyalternativet nedan kan man klicka inom hela den inramade ytan.

 
Genom att använda innermarginal på länkelementet i kombination med en bakgrundsbild täcker länken hela ytan inklusive pilikonen. Pilikonen förtydligar att detta element går att klicka på.

Exempel på en stilmall för menyelement.

Mätbarhet

Detta kräver granskning och eventuellt användningstester. Kontrollera att understrykningar endast förekommer på text som är länkad.

Testa klickbara ytor med utvidgad storlek genom att:

• Testa att klicka på ikonen och säkerställ att länken aktiveras.
• Testa att klicka strax utanför själva länktexten och säkerställ att länken aktiveras.
• Justera textstorleken i Internet Explorer 6 och säkerställ att text i menyalternativet förstoras.

Senast uppdaterad 2010-01-04