• Bör
• www.anvandbart.se/ab/entydig-meny

Formulera så långt det är möjligt menyns länkar så att de inte överlappar varandra – alltså så att det användaren söker efter inte kan finnas under två länkar samtidigt.

Bild 31. Meny från Blue1:s webbplats, där formuleringen av de tre menylänkarna gör det omöjligt att gissa vad som gömmer sig var. Observera att även ”menu” är en meny. (www.blue1.com)

• Skall
• www.anvandbart.se/ab/klickbar-meny

Gör det enklare för användaren att klicka på en menylänk genom att göra hela området runt den klickbart. Se www.anvandbart.se/ab/klickbar-meny för tips om hur detta görs.

Detta bör göras i kombination med Länken bör reagera när pekaren förs över den, sid 118, så att det blir uppenbart för användaren när hon kan klicka.

• Tips
• www.anvandbart.se/ab/langa-meny

Det är relativt lätt att hitta på korta namn för avdelningar som ligger högt upp i webbplatsen. Men ju längre ner man kommer, desto konkretare och mer specifikt blir ofta materialet – och detta brukar föra med sig längre etiketter. Speciellt menylänkar som går till sidor (inte till buntar), kan få problem med detta eftersom etiketten då brukar vara samma som rubriken.

Det är ett vanligt misstag att bara testa en menykonstruktion på de övre nivåerna. För att se om den fungerar måste man gräva ner sig till det verkliga innehållet.

Ibland kan det vara bättre att använda förteckningar (se sid 142) som navigering.

• Bör
• www.anvandbart.se/ab/test-meny

Använd HTML-text och formatmallar för att utforma menyer. Bilder kan användas, men är i allmänhet mycket bökigare att hantera. Med bilder är det inte heller möjligt att ge användaren ledtrådar om huruvida hon varit inne på sidan tidigare eller ej (se Använd inte blått eller lila som färg på text som inte är länkad , sid 119).

Fall inte för frestelsen att hantera platsbrist genom att bygga menyer med hjälp av bilder med minimala typsnitt. Även om bilderna har alt-text blir det oläsligt för de många användare som inte har skärmläsare men som ändå inte klarar av liten text.

Menyer skall om möjligt HTML-kodas som listor och sedan få sitt utseende med hjälp av formatmallar. På detta sätt blir det uppenbarare för skärmläsare och för användare med gamla webbläsare vad som är en meny och vad som inte är det.

Se även WCAG 3.1 (prioritet 2), sid 352.

• Skall
• www.anvandbart.se/ab/markera-meny

Eftersom besökaren orienterar sig i förhållande till den sida hon för ögonblicket befinner sig på, är det viktigt att det syns tydligt i menyn vilken sida det är.

Den aktuella sidan skall vara med i menyn och vara markerad, till exempel genom fetstil. Den skall inte vara länkad (eftersom ett klick på en sådan länk inte leder någonstans och kan vara förvirrande).

• Skall - undantag, se boken
• www.anvandbart.se/ab/klient-bildkarta

Det finns två sätt att hantera en bildkarta (image map) – antingen läggs den klientsides på användarens dator, eller serversides på webbservern.

Eftersom klientsides är mycket bättre ur tillgänglighetssynpunkt skall det alltid väljas när möjligt. Bildkartor på serversidan ger tillgång till litet friare former på de klickbara områdena, men praktiskt taget alla former går att skapa även i klientsides kartor.

Ett undantag är om varje bildpunkt är klickbar – som till exempel kan vara fallet om man låter användaren klicka för att zooma in på en exakt punkt, snarare än ett område, i en karta. En sådan navigation är dock ändå oanvändbar för den som inte kan se, och måste kompletteras med en plats- eller områdesbaserad geografisk navigation.

Se även WCAG 9.1 (prioritet 1), sid 362.

• Tips
• www.anvandbart.se/ab/lasmer-lank

Utöver de länkar som görs i den löpande texten kan det finnas ett värde i att ha en ”Se också…”, ”Läs mer…” eller ”Liknande produkter…”-rubrik på sidan där länkar till likartade ämnen (både på och utanför den egna webbplatsen) samlas.

Denna läggs ofta i anslutning till textens slut.

• Tips
• www.anvandbart.se/ab/foregaende-lank

På motsvarande sätt som 'nästa sida'-länken kan det även finnas en 'föregående sida'-länk. Det är inte lika viktigt, men kan underlätta användningen, speciellt om det inte finns någon given riktning i materialet.

Den bör placeras till vänster om 'nästa sida'-länkar.

• Tips
• www.anvandbart.se/ab/nasta-lank

Ofta är sidor tänkta att läsas en efter en, som kapitel i en bok. Då är det lämpligt att ha en länk så att användaren kan komma direkt vidare från sida till sida – utan att behöva hoppa upp till en innehållsförteckning för att sedan klicka ner på nästa.

Det behöver inte vara nära sammanhang mellan texterna för att detta skall vara till hjälp – det är till exempel lätt att tänka sig att någon vill läsa igenom alla pressmeddelanden eller se på flera olika produkter inom samma område.

Länktexten bör vara nästa sidas rubrik, inte ”Nästa”, ”Nästa sida” e.dyl. men när det är ont om utrymme kan även dessa varianter accepteras. Sätt i så fall nästa sidas rubrik som title till länken.

Ibland har sidan inte någon särskiljande rubrik, utan kan heta till exempel ”Beställning”. I de fallen bör länken antingen kompletteras så att den säger något, till exempel ”Beställning 23 aug 05” eller enbart ”23 aug 05”. Alternativt är ”Nästa” acceptabelt.

Både i över- och underkant

Det finns två typiska tillfällen när en användare klickar på 'nästa sida'-länken: när hon just kommit till sidan men den inte intresserar henne och hon snabbt vill vidare, och när hon läst klart sidan. Därför bör det helst finnas 'nästa sida'-länkar både nära över- och underkant av sidan. Om det av utrymmes- eller andra skäl bara går att ha dem på ett ställe brukar överkanten fungera bäst.

Det är lämpligt att placera 'nästa sida'-länken långt till höger på sidan, eftersom det förstärker känslan av att bläddra.

Tidsordnade sidor

När sidorna är sorterade i omvänd tidsordning finns extra anledning att se upp med orden. Låt inte ”Nästa” leda bakåt i tiden och ”Föregående” framåt, utan använd hellre ord som ”Nyare” och ”Äldre”.

Den mer använda länken bör placeras i ”bläddrapositionen” ute till höger. Det betyder att om man normalt börjar med att se den nyaste sidan för att därifrån bläddra sig mot äldre, är det ”Äldre”-länken som ligger till höger.

Nästa-sidor är utmärkta kandidater för Förladda sidor som användaren sannolikt går vidare till, sid 336. Den topologi som 'nästa sida'-länkarna skapar beskrivs i Bok , sid 198.

• Skall - undantag, se boken
• www.anvandbart.se/ab/hem-lank

Ingångssidan är webbplatsens fasta punkt och därifrån utgår vägar till alla andra sidor, så om läsaren är vilse eller vill ta itu med något nytt skall det vara enkelt för henne att ta sig tillbaka dit.

Många användare förväntar sig att komma till ingångssidan när de klickar på logotypen. Men detta är långt ifrån självklart för alla, så det måste också finnas en textlänk. Ofta är denna en del av den synliga sökvägen (se sid 152).

Det finns flera olika varianter på vad man kallar denna länk. Se Ingångs­sidan , sid 77.

På ingångssidan bör logotypen inte vara länkad (eftersom en sådan självreferens kan vara förvirrande, speciellt för dem som använder skärmläsare).

För formulär som är skyddade av en tunnel skall inte detta råd följas. Se Tunnel , sid 279.

Se även WCAG 13.4 (prioritet 2), sid 369.

• Tips
• www.anvandbart.se/ab/spara-kopia

Om det är viktigt att länkar inte dör, eller åtminstone att komma åt informationen de lett till, kan man spara de webbsidor man länkar till på egen server, så att de kan ses även om originalet försvinner.

Rättsläget för detta är oklart, eftersom det är fråga om kopiering och återpublicering och därmed på eller kanske över gränsen till intrång i upphovsrätten. Google gör det dock (åtkomlig via länken ”Cachad” vid sökresultatet), och har hittills klarat sig.

Respektera de regler webbplatsen ställt upp för kopiering i sin robot-fil och sina metataggar. Mer om detta via www.anvandbart.se/ab/spara-kopia.

• Tips - undantag, se boken
• www.anvandbart.se/ab/lank-knapp

Även om det är tekniskt möjligt att få en knapp att fungera som en länk och tvärtom, så signalerar de olika funktion till användaren.

Ett klick på en länk (eller något som ser ut som en) bör ta användaren till en ny sida. Ibland öppnas den nya sidan i ett nytt fönster. Något mer dramatiskt än så händer inte.

Ett klick på (det som ser ut som) en knapp får något annat att hända. Det kan vara att ett formulär man fyllt i skickas in eller att en sökning utförs. Nästan alltid är en del av händelsen att användaren kommer till en ny sida – men det måste hända mer än så.

Även under ytan bör man helst sträva efter att upprätthålla skillnaden mellan knappar och länkar, och undvika att använda de tekniska trick som finns för att få dem att byta utseende med varandra. Tänk på att alla användare inte ser webben på samma sätt utan att en del använder till exempel skärmläsare, och att de precis som seende användare får ledtrådar av skillnaden mellan länk och knapp.

Ibland görs dock undantag, främst i webbapplikationer. Eftersom användargränssnittet byggs med formulär blir det ofta knappklicken som för användaren från sida till sida. För att hålla konsekvensen händer det därför att även sidor utan formulär får knappar som navigation.

Se även Knapp , sid 259, Aktionsknapp , sid 264, och Använd HTML-element utifrån betydelse , sid 420.

• Bör
• www.anvandbart.se/ab/liten-lank

Gör det inte till en finmekanisk utmaning att ta sig fram på webbplatsen. Den yta länken täcker bör inte vara för liten. Personligen brukar jag betrakta tre bokstäver om det är text och 10 x 10 pixlar om det en bild eller annan yta, som ett absolut minimum. Den får gärna vara betydligt större.

Se även Gör hela området runt en menylänk klickbart, sid 133.