• Bör. 24-timmarswebben: Skall
• www.anvandbart.se/ab/valbox-gruppera

Om det finns många alternativ i valboxen, bör dessa grupperas och grupperna gärna också få etiketter – ”mellanrubriker” – över sig.

Gruppering görs med HTML-elementet <optgroup>. Länkar till kodningsråd och knep för att få optgroup att fungera även med äldre webb­läsare finns via www.anvandbart.se/ab/valbox-gruppera.

Se även WCAG 12.3 (prioritet 2), sid 367. Samt Navi­ga­ti­on­ens tema, sid 156, där det finns teman som även kan användas för att strukturera en valbox.

• Bör
• www.anvandbart.se/ab/valbox-flerval

Även om det tekniskt är möjligt att låta användaren välja flera alternativ i en valbox samtidigt så är detta ingenting som användarna känner till eller som det är lätt att förklara för dem. Detta skall därför undvikas. I Välj rätt flervalskontroll, sid 283 , finns andra alternativ för detta.

• Bör
• www.anvandbart.se/ab/valbox-alternativ

En valbox kräver av användaren att hon skaffar sig överblick och sedan väljer det alternativ som passar bäst. För att underlätta detta bör de olika alternativen vara korta och skilja sig tydligt från varandra. Det är en fördel om de kan formuleras så att de inleds med den mest betydelsebärande delen (speciellt om listan är ordnad i bokstavsordning). Se Sortera det som är relevant, sid 189 .

• Skall
• www.anvandbart.se/ab/radioknapp-tydlig

Layouten måste göra det uppenbart vilka radioknappar som hänger samman.

Ofta är detta tydligare när radioknapparna sitter över varandra än när de läggs horisontellt.

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

Eftersom en del webbläsare använder grå bakgrundsfärg på kontroller för att markera att de inte är aktiva (till exempel på kryssrutor, valboxar och textfält), bör grått inte användas för dekorativa syften i kontroller.

• Bör. 24-timmarswebben: Skall
• www.anvandbart.se/ab/layouttabeller

HTML-elementet <table> skall användas för att skapa traditionella tabeller, inte för att layouta webbsidor. Att styra sidans utformning skall istället göras med formatmallar.

Så långt principen. I praktiken är det dock kvistigare. Formatmallarna kan vara ganska buggiga, speciellt när flera spalter läggs bredvid varandra. Det går definitivt att använda dem, men det kan kräva mycket jobb och omfattande testning med olika webbläsare. Att bygga den grundläggande layouten – till exempel uppdelningen av sidan i spalter – med hjälp av <table> är både enklare och robustare.

Själv har jag begått detta brott mot standarden många gånger, och kommer säkert att fortsätta göra det till dess formatmallstekniken mognat och blivit rimligt enkel att få rätt. Andra webbmakare är betydligt renlärigare, jobbar hårt och gör utomordentliga och pålitliga formatmallsbaserade layouter.

24-timmarswebben tillåter inte tabeller för layout.

Se även Gör webbplatsen så att den är användbar med alla webbläsare, sid 435 .

Om tabeller används för layout är det viktigt att det görs på ett genomtänkt sätt, så att de klarar att omvandlas till löpande text av skärmläsaren.

Det är olämpligt och ibland direkt förvirrande att i tabeller för layout använda den kodnings som är avsedd att göra datatabeller tillgängligare, t.ex. <th>, <caption> och scope.

Se även WCAG 3.3 (prioritet 2), sid 353 , 5.3 (prioritet 2), sid 356 , och 5.4 (prioritet 2), sid 356 .

• Skall
• www.anvandbart.se/ab/tabeller-kolumnkoppling

För seende är sambandet mellan kolumnrubriken och data längre ner i kolumnen uppenbar, men för den som hör tabellen uppläst som löpande text går den kopplingen förlorad. Därför måste rad- och kolumnrubriker kodas så att skärmläsaren kan hjälpa användaren.

För enkla tabeller görs detta med HTML-elementet <th>. För mer komplexa tabeller finns flera tekniker, beroende på hur tabellen ser ut. Se tabeller.

Eftersom skärmläsaren läser upp rad- och kolumnrubriker upprepade gånger under färden genom en tabell, kan det vara en god idé att använda abbr-attributet. Observera att detta inte är detsamma som <abbr>-elementet, utan används för att ge skärmläsaren en kortversion av texten.

Ofta är det ont om plats i tabeller och behov av att förkorta rad- och kolumnrubrikerna för alla användare, inte bara de synskadade. Använd <abbr> för detta. Se Förklara förkortningar, sid 94 .

Se även WCAG 5.1 (prioritet 1), sid 355 , 5.2 (prioritet 1), sid 356 , och 5.6 (prioritet 3), sid 357 .

• Bör
• www.anvandbart.se/ab/tabeller-summary

En tabell kan också ha ett summary-attribut, där man på ett litet utförligare sätt kan berätta om tabellen och till exempel vilka slutsatser som kan dras av den. summary kan dock inte vara längre än ett stycke.

Det som står i summary hörs bara av dem som har skärmläsare, det är inte synligt i vanliga webbläsare.

Se även WCAG 5.5 (prioritet 3), sid 357 .

• Skall
• www.anvandbart.se/ab/tabeller-lopande

För en synskadad användare ser inte tabeller ut alls på samma sätt som för en seende. Skärmläsare läser upp dem som löpande text, tabellrad för tabellrad. Det behövs inte mycket fantasi för att förstå hur svårt det kan vara att överblicka en datatabell man hör på det sättet.

För att göra datatabeller tillgängliga har skärmläsare ett antal specialfunktioner, så att den till exempel kan läsa upp kolumnrubriken varje gång man byter kolumn. För att dessa skall göra någon nytta måste kodningen göras på rätt sätt.

För layouttabeller är läget enklare. Där är kravet bara att de skall vara vettiga när de omvandlas löpande text.

Undvika att lägga tabeller inuti tabeller, eftersom komplexa tabellkonstruktioner ofta blir röriga som löpande text.

Se även WCAG 5.3 (prioritet 2), sid 356 .

• Skall
• www.anvandbart.se/ab/presentation-tomma-listor

När listor plockas fram ur databaser, händer det ibland att de är tomma. Det kan vara en sökning som inte gett något resultat eller omständigheter som förändrats sedan listan infördes.

Databasgenererade listor måste ha regler för hur de skall hanteras om de är tomma. Att visa dem med samma form som vanligt men utan innehåll ger ofta ett löjligt och ibland förvirrande intryck. Ofta är det bättre att ersätta dem med en text som förklarar att inget för närvarande finns.

Även listor med enbart en rad kan ibland se märkliga ut och vara i behov av en speciell utformning.

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

När en lista är lång, skall det finnas en möjlighet att gå direkt till en specifik del av listan. I synnerhet gäller detta om listan är så lång att den delats upp över flera sidor.

För att vara användbar måste navigationen visa var i listan man hamnar. Att bara ange sidnummer, typ 1 2 3 4 5 6 7 är inte till mycket nytta, eftersom användaren inte kan veta om det hon söker finns under 3 eller 5. En sådan navigation är endast acceptabel när listan sorteras efter rang, eftersom användaren sällan har något intresse av att hoppa i sådana listor utan vanligen bara läser från början tills hon tröttnar. Ett typiskt exempel är sökresultat när listan sorterats efter relevans.

Bokstavsordning

För listor sorterade i bokstavsordning kan navigationen göras genom att ovanför varje bokstavsgrupp sätta ut följande rad:

Bokstaven för den aktuella gruppen görs visuellt framträdande och är inte länkad.

Endast bokstäver där det finns innehåll är med i raden.

Denna navigering kan användas oavsett om listan är på en sida eller uppdelad över flera. Navigationen bör även sättas ut längst ner på sidan, men då utan någon bokstav särskilt markerad.

Bokstavsgrupperna kan också göras större, till exempel så här:

eller så här:

Nummerordning

Även andra sorters sorteringar kan använda denna typ av navigation, till exempel numerisk:

eller

Sträva efter att dela listan så att grupperna kan starta på ett jämnt tiotal (eller hundratal, tusental, etc.). Detta är viktigare än att hålla grupperna jämnstora.

Tidsordning

Datum bör om möjligt delas upp enligt något lättöverskådligt mönster, till exempel månader:

eller när det är fråga om längre tid år eller en kombination av månader och år:

Veckolånga tidsperioder är knepigt. Inom vissa yrkesområden fungerar veckonummer men för de flesta människor säger de ingenting. Vanliga datum blir lätt röriga och bör om möjligt undvikas. Om detta inte är möjligt, sträva efter att få till hela veckor och börja dem på måndagar:

Dagsnavigation kan relatera till månaden (och gärna även litet diskret till veckorna). Till exempel så här:

Se även Skriv datum i klartext, sid 98 .

Utformning

Försök alltid hitta en lösning där navigationen får plats på en rad (så länge webbläsaren är inställd på normalstor text).

För att markera från…till används tankstreck (HTML-kod &#8211;), inte bindestreck eftersom det är för kort. När tankestrecket bara markerar från och därför står framför ett mellanslag, skall det inte vara understruket.