Användbarhetsboken berättar hur man gör webbplatser tillgängliga och användbara. Läs den här, eller beställ från Bokus eller Adlibris.
24-timmarswebben
För svenska myndigheters webbplatser finns en webbprofil kallad 24-timmarswebben, som ges ut av E-nämnden.
Den påminner i mycket om Användbarhetsboken (vilket inte är så förvånande eftersom jag var med och tog initiativet till den) men är inriktad på myndigheters situation och behov.
Användbarhetsboken överensstämmer med 24-timmarswebben, och om man följer råden här följer man också den.
På några punkter finns dock skillnader, främst beroende på att myndighetswebbar har plikter som andra webbplatser slipper. 24-timmarswebben är också mer inriktad mot stora informationsintensiva webbplatser. Sådana skillnader pekas ut i råden, så att den som vill hålla sig till 24-timmarswebben kan göra det.
Den stora skillnaden ligger annars i att Användbarhetsboken på många områden går djupare. För att ta det mest utpräglade exemplet motsvaras 24-timmarswebbens regel ”4.1.3 Strukturera informationsinnehållet så logiskt som möjligt” av fyra kapitel här i boken.
Å andra sidan täcker 24-timmarswebben områden som Användbarhetsboken bara flyktigt eller inte alls går in på – till exempel vad en myndighetswebbplats bör innehålla, utvecklingsmetoder och vilka krav som skall ställas på ett publiceringssystem.
24-timmaswebbens regler graderas med skalan 1, 2, 3, vilket ungefär motsvarar bokens skall, bör, tips.
24-timmarswebbens regler
Nedan följer en översikt över 24-timmarswebben och dess motsvarigheter här i boken. Områden som inte Användbarhetsboken täcker (se ovan) är utelämnade, men hela kan hittas via
.
24-timmarswebben |
Användbarhetsboken |
1 På väg mot 24-timmarsmyndigheten |
24-timmarswebben har en egen utvecklingsmetod, utvald utifrån myndigheters behov. I mycket sammanfaller den dock med det arbetssätt som beskrivs i Användarorientering , sid 22 . |
2 Service, tjänster och medverkan |
Handlar delvis om det innehåll myndigheter skall ha på sin webbplats för att vara en 24-timmarsmyndighet. |
2.1 Information om verksamheten |
|
2.1.4 Använd funktionsbrevlådor (3) |
60.1.5 Ange vem som är ansvarig för sidan, sid 338 . |
2.1.5 Gör det lätt att hitta verksamhetens adress och telefonnummer (1) |
60.1.2 Gör det lätt att komma i kontakt med organisationen som står bakom webbplatsen , sid 337 . |
2.1.6 Skapa avdelningen [Om webbplatsen] med information om webbplatsens innehåll och funktion (1) |
45.2.1 Viktiga funktioner och sidor skall kunna nås med kortkommandon , sid 231 . |
2.1.7 Upplys på avdelningen [Om webbplatsen] hur personuppgiftsfrågor, identitet och cookies hanteras (1) |
54.4.9 Spara autentiseringen från session till session, sid 317 . 55.1.1 Berätta hur webbplatsen använder permanenta kakor, sid 326 . 55.1.2 Mjuklanda användare som inte tar emot kakor, sid 326 . 55.1.1 Berätta hur webbplatsen använder permanenta kakor, sid 326 . 63.1.1 Berätta vad uppgifter du ber om skall användas till, sid 343 . 63.1.2 Skydda användarens uppgifter – och berätta hur, sid 343 . |
2.1.8 Ange vem som är informationsansvarig (1) |
60.1.4 Ange vem som är ansvarig, sid 338 . |
2.1.9 Ange på alla sidor vilken organisation som är utgivare till webbplatsen (1) |
60.1.1 Det skall tydligt framgå vem som är utgivare till webbplatsen , sid 337 . |
2.1.10 Ange när informationen senast granskades eller uppdaterades (1) |
62.1.1 Ange hur aktuell sidan är, sid 342 . |
2.1.11 Ge en del information på lättläst (1) |
28.1.1 Skriv information och instruktioner på lättläst och gärna även på andra språk , sid 106 . |
2.1.12 Ge en del information på teckenspråk (2) |
28.1.1 Skriv information och instruktioner på lättläst och gärna även på andra språk , sid 106 . |
2.1.13 Ge en del information på vanliga invandrarspråk, engelska och de svenska minoritetsspråken (2) |
28.1.1 Skriv information och instruktioner på lättläst och gärna även på andra språk , sid 106 . 27.1.4 Översätt inte bara texten utan anpassa även innehållet, sid 105 . |
2.2 E-tjänster |
|
2.2.1 Använd i första hand XHTML eller HTML för att publicera publikationer på webbplatsen (1) |
78.1.1 Följ HTML-standarden, sid 418 . 83.1.1 Använd HTML, inte PDF eller andra dokumenttyper, sid 439 . 83.1.2 Använd PDF som en tillgängligare alternativform av HTML-sidor , sid 440 . 19.1.4 Använd multimedieformat som har fria läsprogram för olika sorters datorer , sid 73 . 44.1.1 Låt användarna prenumerera på webbplatsen, sid 227 . |
2.2.6 Gör det möjligt att prenumerera på information (2) |
44.1.1 Låt användarna prenumerera på webbplatsen, sid 227 . 63.1.3 Fråga bara efter det du behöver veta, sid 343 . |
2.2.10 Ge webbplatsens tjänster ett gränssnitt som gör det möjligt för andra datorer att utnyttja dem (3) |
|
3 Samverkan och standardisering |
|
3.1.1 Välj och tillämpa standarder såsom de är menade att användas (1) |
Handlar om 24-timmarswebbens utvecklingsmetod. För aktuella standarder, se nästa punkt. |
3.1.2 Utveckla webbplatsen enligt en standard snarare än för en webbläsare (2) |
78.1.1 Följ HTML-standarden, sid 418 . 79.1.3 Följ formatmallsstandarden, sid 424 . 80.2.7 Använd den standardiserade dokumentobjektmodellen, sid 432 . |
3.1.3 Använd i första hand XHTML eller HTML för att publicera information (1) |
83.1.1 Använd HTML, inte PDF eller andra dokumenttyper, sid 439 . |
3.1.4 Strukturera materialet korrekt utifrån den standard som valts (2) |
78.1.6 Gör HTML-koden så den fungerar även utan formatmallar, sid 421 . 78.1.5 Använd HTML-element utifrån betydelse, sid 420 . 79.1.2 Döp formatmallarna efter betydelse, inte efter utseende, sid 423 . |
4 Utformning och konstruering av webbplatsen |
|
4.1 Navigering, form och layout |
|
4.1.1 Var konsekvent i navigering, utformning och presentation (1) |
11.1.2 Låt formgivningen hålla samman webbplatsen , sid 46 . 16.1.2 Använd symboler på ett konsekvent sätt, sid 68 . 25.1.2 Var konsekvent i tilltalet, sid 90 . |
4.1.2 Hjälp användarna förstå var de är på webbplatsen (1) |
32.9.2 Markera i menyn vilken sida man befinner sig på, sid 129 . 32.20 Synlig sökväg , sid 152 . |
4.1.3 Strukturera informationsinnehållet så logiskt som möjligt (1) |
33 Navigationens tema, sid 156 . 35 Urval, sid 194 . 36 Topologi, sid 195 . |
4.1.4 Genomgångssidor bör guida användaren till innehållet (2) |
32.16 Index-sida och introduktion , sid 145 . |
4.1.5 Gör klickbara ytor enkla att använda för alla (2) |
12.1 Textstorlek , sid 46 . 32.3.13 Gör inte den klickbara ytan för liten, sid 119 . 32.9.8 Gör hela området runt en menylänk klickbart, sid 133 . |
4.1.6 Länkar bör (med vissa undantag) vara understrukna (2) |
32.3.9 Stryk under text som är länkad, sid 118 . |
4.1.7 Webbplatsen bör ha en innehållsöversikt (2) |
32.18.1 Gör en innehållsförteckning, sid 149 . |
4.1.8 Alla sidor ska ha länkar till startsidan och andra sidor som är viktiga för orienteringen (1) |
32.4 och andra fasta sidor |
4.1.9 Kalla startsidan för ”startsida” (1) |
20.2 Ingångssidan , sid 77 . (Observera att 24-timmarswebbens råd står i motsättning till Datatermgruppens.) |
4.1.10 Undvik introduktionssidor med lågt eller inget informationsinnehåll (2) |
11.1.1 Var relevant, undvik dekorationer, sid 45 . 19.1.1 Starta inte multimediepresentationer automatiskt, sid 72 . |
4.1.11 Ge begripliga felmeddelanden (1) |
56.1.1 Ge artiga och begripliga felmeddelanden, sid 327 . |
4.1.12 Använd inte tabeller för layout (1) |
51.1.7 Använd inte tabeller för layout , sid 249 . 82.1.1 Gör webbplatsen så att den är användbar med alla webbläsare, sid 435 . |
4.1.13 Viktiga egenskaper eller funktioner ska vara oberoende av användarnas förmåga att uppfatta en viss färg (2) |
15.1.1 Det får inte vara nödvändigt att kunna skilja mellan olika färger , sid 66 . |
4.1.14 Ge webbplatsen en typografi som underlättar läsningen (2) |
12.1 Textstorlek , sid 46 . 12.2 Typsnitt, sid 51 . |
4.1.15 Ge webbplatsen ett radavstånd som underlättar läsningen (2) |
12.3 Radavstånd , sid 53 . |
4.1.16 Ge webbplatsen en spaltbredd som underlättar läsningen (2) |
12.4 Spaltbredd , sid 53 . |
4.1.17 Använd tillräckliga kontraster (1) |
15.1.2 Gör kontrasten mellan text och bakgrund tydlig, sid 66 . 15.1.3 Gör kontrasten i bilder tydlig, sid 66 . |
4.1.18 Undvik i möjligaste mån rörelser i gränssnittet (1) |
18.1.2 Undvik animationer intill text, sid 71 . 18.1.3 Kör animationen en begränsad tid, sid 71 . 19.1.1 Starta inte multimediepresentationer automatiskt, sid 72 . 19.1.2 Ge användaren möjlighet att stoppa multimediepresentationer , sid 73 . |
4.1.19 Använd inte flimmer och blinkningar (1) |
18.1.1 Använd inte blinkningar som kan utlösa epileptiska anfall, sid 71 . 18.1.2 Undvik animationer intill text, sid 71 . |
4.2 Grundkonstruktion |
|
4.2.1 Bestäm skärmupplösning utifrån era användare (1) |
21.1.1 Gör inga antaganden om skärmens eller fönstrets storlek, sid 81 . 21.1.2 Gör inte sidorna bredare än 760 pixlar, sid 81 . |
4.2.2 Separera innehåll från design – använd stilmallar för att styra presentation och layout (1) |
79.1.1 Använd formatmallar , sid 423 . (”Formatmallar” är det ord som rekommenderas av Datatermgruppen.) |
4.2.3 Webbplatsen ska kunna användas även om stilmallarna inte kan tolkas (2) |
78.1.6 Gör HTML-koden så den fungerar även utan formatmallar, sid 421 . |
4.2.4 Ge möjlighet att göra personliga inställningar (2) |
66.1.1 Låt användaren anpassa webbplatsen till sina behov, sid 373 . 12.1 Textstorlek , sid 46 . 12.2 Typsnitt, sid 51 . 12.4.2 Gör spalten 50-70 tecken bred, sid 54 . |
4.2.5 Använd relativa mått (1) |
24-timmarswebbens metod räcker inte för att säkerställa att texten blir läslig. Se 12.1 Textstorlek , sid 46 , om hur detta kan lösas. 12.4.2 Gör spalten 50-70 tecken bred, sid 54 . |
4.2.6 Använd script bara om sidorna fungerar även utan script (2) |
80.1.1 Använd javascript, men gör information och funktion tillgängliga även på andra sätt , sid 427 . 80.1.2 Använd javascript endast till ickeväsentliga funktioner , sid 427 . 80.2 Tillgängligare javascript, sid 429 . |
4.2.7 Låt tillbakaknappen fungera (1) |
37 Bakåtknapp , sid 202 . |
4.2.8 Ge möjlighet att ångra sig (2) |
37.1.1 Låt bakåtknappen fungera, sid 202 . Om hur man ångrar sig i en guide: 24-timmarswebben , sid 290 53.2.3 Låt användaren avbryta, sid 291 . 53.2.4 Låt användaren gå tillbaka och ändra sina inmatningar, sid 292 . 53.7.2 Om användaren kan skapa något skall hon kunna kontrollera att det blev rätt och kunna ångra eller ändra det, sid 302 . 53.7.3 Be inte användare bekräfta sina handlingar utan gör det istället möjligt att ångra dem, sid 302 . 69.1.5 Gör det lätt att ändra antalet av en produkt eller ta bort den helt , sid 396 . |
4.2.9 Gör det lätt att ta sig vidare om sidan inte finns (1) |
56.1.3 Gör det lätt att ta sig vidare om sidan inte finns, sid 328 . |
4.2.10 Användandet av webbplatsen ska vara oberoende av inmatningsenhet (2) |
32.14.1 Valboxmenyer måste kunna användas utan mus, sid 141 . 80.2.2 Använd inte javascript som förutsätter att användaren har mus, sid 429 . |
4.2.11 Skapa snabbkommandon för viktiga funktioner (3) |
45.2 Kortkommandon , sid 231 . |
4.2.12 Skapa en logisk tabbordning (2) |
45.1.3 Gör tabbordningen logisk och förutsebar, sid 230 . |
4.2.13 Gruppera och skapa möjlighet att hoppa förbi delar på sidorna (3) |
45.3 Genvägar på sidan , sid 232 . |
4.2.14 Undvik långa och krångliga webbadresser (URL:er) (3) |
43.1.1 Webbadressen bör vara lätt att läsa och uttala, sid 223 . 43.1.3 Ge populära sidor en enklare webbadress, sid 224 . |
4.2.15 URL:er bör vara bokmärkningsbara i webbläsaren (2) |
43.1.6 Webbadressen bör inte innehålla sessionsidentitet, sid 225 . |
4.2.16 Gör sidorna enkla att skriva ut (1) |
23.1.1 Gör sidorna enkla att skriva ut, sid 86 . 23.1.2 Ge utskriften en egen layout och anpassa innehållet, sid 86 . |
4.2.17 Undvik att använda ramar (1) |
22.1.1 Undvik att använda ramar, sid 83 . |
4.2.18 Om ramar används ska varje ram ha en beskrivning (2) |
22.2.1 Döp ramarna , sid 84 . 22.2.3 Ge alternativ text för webbläsare som inte klarar ramar, sid 85 . |
4.2.19 Använd inte bokstavsbilder (1) |
78.1.7 Använd inte HTML-text som symboler, pilar eller bilder, sid 421 . |
4.3 Tabeller |
|
4.3.1 Förtydliga innebörden av en tabell i text (2) |
51.1.2 Ge datatabeller en etikett, sid 248 . 51.1.3 Ge datatabeller en sammanfattning , sid 248 . |
4.3.2 Framhäv rad och kolumnrubriker grafiskt (2) |
51.1.4 Gör tydliga rader och kolumner, sid 248 . |
4.3.3 Skilj på rad- och kolumnrubriker och dataceller (2) |
51.1.2 Ge datatabeller en etikett, sid 248 . 51.1.3 Ge datatabeller en sammanfattning , sid 248 . 51.1.4 Gör tydliga rader och kolumner, sid 248 . |
4.3.4 Koppla ihop dataceller med rubrikceller (2) |
51.1.5 Koppla datatabellens rader och kolumner till sina rubriker, sid 248 . |
4.4 Formulär |
|
4.4.1 Formulär ska ha en logisk uppställning och presentation (1) |
52.17 Grafisk design (av formulär), sid 272 . 52.21 Flersidiga formulär , sid 280 . |
4.4.2 Koppla ihop rubriker och inmatningsfält (1) |
52.16.1 Koppla samman etikett och kontroll, sid 268 . |
4.4.3 Förklara inmatningsfält med title-text (1) |
52.16.5 Koppla samman kontroll och instruktioner, sid 271 . |
4.4.4 Gruppera och namnge delar av formulär (1) |
52.17.4 Gruppera och namnge formulärets delar, sid 273 . |
4.4.5 Definiera grupper i select-elementet (1) |
52.4.5 Gruppera och etikettera alternativen, sid 256 . |
4.5 Automatiska händelser |
|
4.5.1 Ge möjlighet att undvika automatisk vidareskickning (1) |
54.3.1 Kom ihåg användaren länge, sid 309 . 69.1.7 Släng inte kundvagnen bara för att användaren tar en paus, sid 397 . 58.1.1 Låt användaren stänga av automatisk omladdning av sidor, sid 333 . |
4.5.2 Informera användare om automatiska uppdateringar (2) |
58.1.1 Låt användaren stänga av automatisk omladdning av sidor, sid 333 . |
4.6 Metadata |
|
4.6.1 Ge alla sidor en titel (1) |
|
4.6.2 Använd metadata på så många sidor som möjligt (2) |
41.2.1 Beskriv sidans relationer till andra sidor, sid 220 . |
4.6.3 Använd metadata för sökmotorinstruktioner (3) |
27.1.2 Koppla samman olika språkversioner i koden, sid 105 . 39.1.4 Styr söktjänsterna till att söka i innehållet, inte i navigationen , sid 216 . 41.1.1 Webbsidor bör innehålla metadata, sid 218 . |
4.7 Sök |
38 Sökning, sid 203 . |
4.7.1 Webbplatsen bör ha en sökfunktion (1) |
38.1.1 Webbplatsen bör ha sökning, sid 203 . |
4.7.2 Sökfunktionen bör finnas på eller vara tillgänglig från alla sidor (2) |
38.4.1 Gör sökningen åtkomlig från alla sidor, sid 207 . |
4.7.3 Ange i vilken källa sökningen görs (2) |
38.5.7 Visa bara väsentlig information i sökresultatet, sid 212 . 38.4.5 Gör det möjligt att söka på en avgränsad del av webbplatsen , sid 209 . |
4.7.4 Gör det möjligt att söka på de ord som användarna är vana vid (2) |
38.3.2 Sök även på synonymer , sid 205 . 38.3.7 Sökmotorn skall klara av de speciella skrivsätt som är vanliga inom området , sid 207 . |
4.7.5 Erbjud tydliga träffsidor (2) |
38.5 Presentera sökresultatet, sid 210 . |
4.7.6 Uppmärksamma söktjänsterna på att webbplatsen finns (2) |
39.1.1 Uppmärksamma söktjänsterna på att webbplatsen finns, sid 215 . |
4.8 Validering |
|
4.8.1 Validera koden (1) |
78.1.4 Validera HTML-koden , sid 420 . 79.1.4 Validera formatmallarna , sid 424 . |
5 INFORMATIONSPRODUKTION |
|
5.1 Textbehandling |
|
5.1.1 Skriv så enkelt och begripligt du kan (1) |
26.1.1 Skriv så enkelt som möjligt , sid 92 . |
5.1.2 Skriv det viktigaste först (1) |
26.1.2 Skriv det viktigaste först , sid 93 . |
5.1.3 Dela upp längre texter i stycken (2) |
26.1.1 Skriv så enkelt som möjligt , sid 92 . |
5.1.4 Undvik förkortningar (3) |
26.1.7 Förklara förkortningar , sid 94 . |
5.1.5 Använd rätt kod för rubriker (1) |
26.1.8 Formulera rubrikerna så att de är begripliga även när de läses fristående från den övriga texten, sid 95 . |
5.1.6 Gör tusentalsavskiljning med fast mellanslag (3) |
26.2.4 Låt inte förkortningar och eller tal avdelas , sid 97 . |
5.1.7 Markera citat i koden (3) |
78.1.5 Använd HTML-element utifrån betydelse, sid 420 . |
5.1.8 Ange webbplatsens eller webbsidans huvudsakliga språk (2) |
78.1.8 Markera i HTML-koden vilket språk som används, sid 422 . |
5.1.9 Det ska framgå om ett dokument är en del av ett större dokument (2) |
46.2.2 Gör det tydligt hur delar och helhet hänger samman, sid 234 . |
5.1.10 Ange datum enligt standard (1) |
26.2.6 Skriv datum i klartext, sid 98 . 26.2.7 Skriv datum med korrekt ordningsföljd, sid 99 . |
5.1.11 Beskriv samtliga meningsbärande grafiska objekt med alt-text (1) |
13.3.1 Bilder skall ha alt-text, sid 60 . 13.3.2 När alt-texten inte räcker, komplettera med longdesc, sid 61 . |
5.1.12 Text kan kompletteras med ljud, bilder och filmer för att underlätta förståelsen (3) |
19.1.5 Använd multimedia för att förklara, förmedla och roa, sid 74 . 19.2.1 Gör det möjligt för den som inte kan se att ändå ta del av innehåll, funktion och upplevelse i visuell multimedia, sid 74 . 19.3.1 Gör det möjligt för den som inte kan höra att ändå ta del av innehåll i ljud , sid 75 . |
5.1.13 Gör inte listor med hjälp av tabeller eller grafiska objekt (2) |
50.1.1 Använd listkod för att skapa listor, sid 242 . |
5.1.14 Använd inte serverbaserade imagemappar (3) |
32.8.1 Lägg bildkartan på användarens dator, inte på servern, sid 126 . 32.8.2 Ge områdena i en multiklickbar bild förklarande texter, sid 127 . |
5.2 Länkar |
|
5.2.1 Formulera tydliga länkar (1) |
32.3.1 Gör det tydligt vart länken leder, sid 115 . 32.3.2 Låt inte identiskt formulerade länkar leda olika, sid 116 . 32.3.3 Använd title för att ge mer information i länken, sid 116 . |
5.2.2 Ange title-text för otydliga länkar (1) |
32.3.2 Låt inte identiskt formulerade länkar leda olika, sid 116 . 32.3.3 Använd title för att ge mer information i länken, sid 116 . 32.3.4 Låt inte title duplicera länktexten, sid 116 . 32.17.3 Länken från puffen skall innehålla rubriken, sid 148 . |
5.2.3 Tala om när en länk öppnas i nytt fönster (1) |
57.1.3 Förvarna om att ett nytt fönster kommer att öppnas, och ge en tydlig väg tillbaka , sid 331 . |
5.2.4 Skilj länkar med minst ett tecken (2) |
WCAG 10.5, sid 364 |
5.2.5 Stryk aldrig under text som inte är länkad (2) |
32.3.8 Stryk aldrig under text som inte är länkad, sid 118 . |
5.2.6 Undvik att använda mellanslag i URL:er på webbplatsen (3) |
43.1.1 Webbadressen bör vara lätt att läsa och uttala, sid 223 . |
5.2.7 Skapa en kortlänk om en URL ska skrivas i tryckt material (2) |
43.1.3 Ge populära sidor en enklare webbadress, sid 224 . |
6 TEST OCH UTVÄRDERING |
Ingår i 24-timmarswebbens utvecklingsmetod. Motsvaras dock delvis av 7.3 Utvärdering, sid 30 , och 65.2 Tillgänglighetstester , sid 373 . |
7 FÖRVALTNING OCH UPPDATERING |
Handlar om hur arbetet med webbplatsens skall organiseras och ligger utanför bokens område. Några punkter har dock motsvarigheter, se nedan. |
7.1.3 Bara aktuell och gällande information ska finnas på webbplatsen (1) |
62.1.2 Bara giltig och relevant information skall finnas direkt tillgänglig på webbplatsen , sid 343 . |
7.1.4 Kontrollera regelbundet att innehåll och länkar stämmer och fungerar (1) |
61.1.1 Kontrollera regelbundet att innehållet stämmer och fungerar, sid 339 . 61.1.2 Kontrollera regelbundet att länkar fungerar, sid 340 . |
7.1.6 Kontrollera innehållet i webbdiskussioner regelbundet (1) |
61.1.4 Granska regelbundet innehåll som användarna skapar, sid 341 . |
8 PUBLICERINGSVERKTYG |
Hur publiceringsverktyget är utformat täcks inte. |
9 HJÄLPMEDEL OCH WEBBKONSTRUKTION |
64 Webbläsare för funktionshindrade, sid 346 . |