• Tips
• www.anvandbart.se/ab/variationstaligt-fargsprak

Skillnaden mellan olika datorskärmars färgåtergivning är dramatisk. Den färg som ser ut som en kulörstark mörkblå färg på en kan se svart ut på en annan.

Någon större precision i återgivningen är inte att räkna med. Var därför inte alltför sublim i ditt färgarbete. Små skillnader i färgnyanser som ger en utomordentligt estetisk effekt på en skärm kan gå helt förlorade på en annan. Speciellt gäller detta de ljusaste och de mörkaste tonerna.

När du bestämmer en färg bör du kontrollera den på flera olika skärmar.

Allmänt kan man säga att en PC återger mellantoner mörkare än en Macintosh. Samma sak gäller för LCD-skärmar (platta skärmar) jämfört med traditionella katodstråleskärmar.

Webbläsarskillnader

Även mellan webbläsare skiljer sig färgåtergivningen.

Inte heller går det att räkna med överensstämmelse mellan färger i bilder och färger som webbläsaren skapar. Om man i Photoshop gör en bild med en färg, och sedan använder precis samma färgkod för att skapa en färg i en formatmall, så kommer dessa ändå att med all sannolikhet se olika ut.

• Tips
• www.anvandbart.se/ab/textkontrast

Kontrast gör mycket för läsbarheten. Se därför till att det alltid är god kontrast mellan text och bakgrund. Detta blir viktigare ju mindre texten är. Undvik att lägga färgad text på färgad bakgrund.

Samma sak gäller naturligtvis även för annat än text när det är viktigt att användaren kan se skillnaden.

Via www.anvandbart.se/ab/textkontrast kan du hitta hjälpmedel för att se om kontrasten mellan två färger är tillräcklig.

Se även WCAG 2.2 (prioritet 2), sid 351.

• Tips
• www.anvandbart.se/ab/inte-luft

Webbformgivning har en tendens att bli mycket informationstätare än pappersformgivning. Detta har att göra med tre saker:

• Utrymmet på en normal skärm är ganska litet, i kombination med att upplösningen är dålig. En 15-tumsskärm är inte större än ett A4-papper – och pappret har dessutom över fem gånger så god förmåga att visa små detaljer.

• En trycksak formges ofta för att locka till läsning, medan formen för en webbsida snarare handlar om att snabbt ge användaren lön för mödan.

• På en webbsida är det ofta mycket som skall få plats. Utöver själva innehållet skall där till exempel nästan alltid in även en logotyp och navigation på varje sida.

Det är inte omöjligt att arbeta med stora bilder och mycket luft även när man formger webbsidor. Men man skall vara medveten om att det är betydligt svårare än när man formger trycksaker.

• Tips
• www.anvandbart.se/ab/anvand-tumnagel

Om du inte vill lägga in en bild direkt på sidan – antingen för att den skulle ladda för långsamt, eller för att den inte ryms i layouten – kan den istället representeras av en minibild, en så kallad tumnagel (på engelska thumbnail). När användaren klickar på denna kommer hon till originalbilden.

För att betona att tumnageln är klickbar kan man med fördel rama den (se Låt ramen runt klickbara bilder vara kvar, sid 126).

Olika sätt att visa originalbilden

Tumnageln kan vara länkad antingen direkt till bilden, eller till en webbsida med bilden.

Om länken går direkt till bilden är det inte säkert att denna visas i riktig storlek. Är bilden större än fönstret förminskas den i många webbläsare så att hela syns. Användaren kan dock förstora bilden – om hon vet hur man gör.

Om detta är en för- eller nackdel beror på om det är viktigast att användaren får se hela bilden, eller att hon får se bilden i korrekt storlek (till priset att hon tvingas rulla för att se alla delar av den).

Det andra alternativet är att lägga bilden på en webbsida.

En sådan sida behöver inte anstränga sig för att se ut som resten av webbplatsen, den kan till exempel vara utan logotyp och utan den navigation som finns på andra sidor.

En god idé kan vara att förse den med en kontroll för att hoppa mellan att se bilden i full storlek eller (om den är större än fönstret) anpassad till fönstrets storlek. Kontrollen för att byta storlek måste vara synlig direkt, utan att man behöver rulla. För att få bilden att anpassa sig till fönstret krävs javascript (se sid 426).

Samma eller eget fönster

Ytterligare ett val måste göras för originalbilden: skall den visas i samma fönster eller öppna ett eget. I det senare fallet, se Nytt fönster , sid 329.

Ögonblicklig förstoring

Ett helt annat angreppssätt är att använda javascript för att visa den större bilden i samma ögonblick som pekaren förs över tumnageln, och sluta visa den när pekaren förs utanför bilden. En ögonblicklig zoom-funktion som har fördelen att användaren slipper klicka sig fram och tillbaka mellan sidan och bilden. Kan vara ett bra alternativ här användarens huvudfokus ligger på sidan och hon bara tillfälligt behöver se bilden större, till exempel på en produktsida på en e-handelsplats. Passar inte om bilden i sig är viktig och användaren till exempel kan behöva skriva ut den.

Eftersom effekten i hög grad bygger på snabbhet är det en god idé att förladda den större bilden.

Låt fortfarande tumnageln vara klickbar, så fungerar den även för användare som inte har javascript.

• Tips
• www.anvandbart.se/ab/hjalp-title

Eftersom texten i title är dold, och användaren inte ens får en ledtråd om att den finns där, bör title bara användas för sådant som det inte är avgörande att användaren ser. Den kan till exempel vara lämplig för hjälptexter och för att förklara vart man kommer eller vad som kommer att hända när man klickar på en bild.

I princip är arbetsfördelningen att alt-texten beskriver bilden, medan title berättar vilken funktion bilden har. I praktiken kan man inte lita på att alla skärmläsare läser upp title. Att sätta funktionstipset i både alt och title ger visserligen en irriterande dubblering, men är tills vidare det säkraste alternativet.

Att lägga funktionstips bara i alt och inte ha något title-text alls (inte ens tom) fungerar bra för dem med skärmläsare, liksom för dem med Internet Explorer, men gör att tipset inte syns för användare med andra webbläsare.

• Skall - undantag, se boken
• www.anvandbart.se/ab/ej-alt-hjalptext

Det kan tyckas som en god idé att lägga in hjälptexter och annat som man vill att bara synskadade skall höra som alt-text till små genomskinliga bilder.

Problemet med detta är att många skärmläsare ignorerar sådana bilder – förmodligen ett arv sedan tiden före formatmallarna då layout i hög grad byggdes med hjälp av små genomskinliga bilder, osynliga för seende användare men ett meningslöst babbel för de blinda.

Hur stor en bild måste vara för att bli uppläst varierar från skärmläsare till skärmläsare. Chansen att alt-texten blir uppläst är betydligt större om bilden är länkad.

• Skall
• www.anvandbart.se/ab/alt

Den mest kända av bildens dolda texter är alt-texten. Den finns för att ge en kort beskrivning av bilden så att även den som inte kan se bilden får den väsentliga informationen från den.

alt-texten skall så långt möjligt vara ett likvärdigt alternativ till bilden. Den skall alltså inte i första hand beskriva bilden, den skall fylla samma funktion. Om bilden till exempel är en högerpil länkad till nästa sida, skall alt-texten vara ”Nästa sida”, inte ”Pil som pekar åt höger”.

Några tumregler för alt -texter:

• Tänk dig att du läser upp sidan för någon i telefon. Den beskrivning du då ger av en bild, är en bra startpunkt för att formulera alt -texten.

• Om bilden består av text, kan denna text ofta användas rakt av.

• Bädda inte in innehållet i formuleringar som ”Bild av…”, ”Länk till…” eller ”Klicka här för att gå till…”. Skärmläsare berättar ändå för sina användare vad som är en bild eller en länk, så de extra orden blir bara störande.

• Om det inte finns något vettigt att säga om bilden - var tyst. Bilder som enbart har en dekorativ funktion klarar sig ofta bra utan alt-text. Ge dem en tom alt-text, alt=””. (alt utan något värde, eller alt=” ” med mellanslag får inte användas.)

• Alla bilder skall ha alt – antingen med text eller tom. Att utelämna alt ställer till med problem eftersom många skärmläsare då istället läser upp bildens webbadress.

• Om bilden förekommer flera gånger på sidan, överväg om inte användbarheten blir bäst genom att bara sätta ut alt-texten en gång och låta de övriga kopiorna av bilden ha tomma alt-texter.

• Om bilden ligger nära en länk som säger samma sak och leder till samma mål, ge den en tom alt-text.

• Var kortfattad. Sträva efter att inte vara längre än 80 tecken (och var aldrig längre än 150 tecken, eftersom det för en del skärmläsare är gränsen för vad de klarar). Har du mer att säga, se longdesc nedan.

• Var inte alltför kortfattad. alt-texten bör vara minst 8 tecken lång (om den inte är tom).

• Tänk på läsordningen så att bilden hamnar på en vettig plats även för den som lyssnar på sidan. Finns bildtext bör alt-texten komma alldeles före denna.

• Eftersom alt-texten läses upp med annan text bör den ha normal interpunktion – till exempel avslutas med punkt.

• Om bilden är klickbar skall alt-texten vara begriplig även när den läses upp utanför sitt sammanhang. Se Gör det tydligt vart länken leder, sid 115.

• Ta inte hänsyn till att alt-texten syns när man för pekaren över bilden. Mer om detta under Title nedan.

• Många av råden om hur länkar formuleras i Länk , sid 115, är tillämpliga även för klickbara bilder.

Se även Ge områdena i en multiklickbar bild förklarande texter, sid 127, och WCAG 1.1 (prioritet 1), sid 349.

• Bör
• www.anvandbart.se/ab/skriv-bildtext

De flesta bilder tjänar på att kompletteras med en bildtext, som hjälper tolkningen och att foga in dem i sitt sammanhang.

Bildtexten är dessutom en av de mest lästa texttyperna och därför en utmärkt möjlighet att få användaren att börja läsa sidan.

Ett publiceringssystem bör ha bra stöd för att skriva och placera bildtexter, något som tyvärr många saknar.

• Skall - undantag, se boken
• www.anvandbart.se/ab/blockera-bildverktyg

Internet Explorer har infört ett litet bildverktyg som på ett irriterande sätt dyker upp när muspekaren förs över en bild. Om det inte uttryckligen är meningen att användaren skall kopiera bilder från webbplatsen, skall detta stängas av.

Det görs genom att sidan får metataggen <meta http-equiv=”imagetoolbar” content=”no” />. (Verktygslisten kan slås på för enskilda bilder genom att img-elementet får attributet galleryimg=”yes”. Se Standard­avvikel­ser , sid 422.)

• Bör
• www.anvandbart.se/ab/textrubrik

För rubrikerna som text gäller ungefär samma sak som för löpande text - det inte finns många typsnitt att välja mellan. Eftersom rubriker är större och därmed lättare att läsa är urvalet visserligen större, men fortfarande väldigt begränsat.

För de flesta webbplatser är detta ändå det bästa alternativet, av flera skäl:

• Rubriken kommer lika snabbt som resten av texten. (Görs den som bild är risken stor att den dyker upp en bra stund efter texten).

• Om inte publiceringssystemet automatiska producerar bildrubriker, är det ett betungande arbetsmoment att göra dessa.

• Det är tillgängligt. (Även bildrubriker kan göras på ett handikappvänligt sätt, men det kräver ganska mycket trixande.)

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

Bildrubriker

Trots textrubrikernas fördelar kan det vara frestande att göra rubrikerna som bilder. Främst för att det ger väldigt mycket större typografisk valfrihet, och en möjlighet att använda samma rubriktypografi för webben som för sina trycksaker.

Tyvärr är detta en dålig lösning, tillgänglighetsmässigt. Även om bildrubriken får en alt-text och HTML-kodas som rubrik (d.v.s. med <h…>-taggar) är det många skärmläsare ⁴ som inte klarar att tolka alt-texten som en rubrik.

Det har kommit en rad olika tekniker som påstås göra det möjligt att använda bilder som rubriker utan att offra tillgängligheten. Många av dessa har visat sig ha problem, andra verkar lovande men är fortfarande för oprövade för att få en rekommendation. Med tiden kommer förhoppningsvis någon att verkligen visa sig hålla. Se länkar via www.anvandbart.se/ab/rubriker.

• Skall - undantag, se boken
• www.anvandbart.se/ab/bara-vansterjustering

Centrerad text är svårläst, eftersom ögat inte får stöd av vänsterkanten. Samma sak med högerjusterad text (där högerkanten är rak och vänsterkanten ojämn). Långa texter måste alltid vänsterjusteras. Korta texter kan undantagsvis centreras eller högerjusteras.

• Skall
• www.anvandbart.se/ab/min-max-bredd

En variant i teknikens framkant är att använda formatmallar för att sätta minimal och maximal bredd för spalten. Mellan dessa mått ställer spalten in sig beroende på bredden på webbläsarfönstret.

För både mini och max gäller samma begränsningar som i föregående råd.

Nackdelen är att detta bara fungerar med nya webbläsare – och inte med Internet Explorer. Ett javascript för att komma runt denna begränsning finns via www.anvandbart.se/ab/min-max-bredd.

• www.anvandbart.se/ab/fri-bredd

Ett alternativ är att göra spaltbredden fri, så att den anpassar sig till fönsterstorleken. Det ger användaren frihet att själv välja hur mycket av sin datorskärm hon vill att webbfönstret skall ta upp.

Problemet med denna lösning är att om användaren har stor skärm och låter fönstret uppta hela skärmen så kan spalterna bli för breda för bekväm läsning. Textraderna blir väldigt långa och det är svårt att hitta från slutet av en rad till början av nästa. Denna lösning kan alltså tvinga användaren att anpassa sin fönsterstorlek så den passar för läsning på din webbplats – ett extra arbetsmoment, och en fönsterstorlek som kanske inte alls passar när hon går vidare till nästa webbplats.

Ett annat problem är rent hantverksmässigt. Det är svårt att koda sidor med flera spalter bredvid varandra så att dessa uppför sig på ett vettigt sätt oavsett om användaren har ett smalt eller ett brett fönster.

Å andra sidan kan den som behärskar hantverket bygga sidor som ändrar sin layout beroende på hur mycket bredd det finns.

• www.anvandbart.se/ab/storre-punktavstand

I punktlistor skall det vara större avstånd mellan punkterna än mellan raderna. Detta för att göra det lättare för ögat att se vad som är en ny punkt och vad som bara är texten till en punkt som råkat bli lång nog att delas på flera rader.