Använd inte tabeller för layout
Formge inte er webbplats med hjälp av tabeller. Det finns nämligen en risk att användare som använder läshjälpmedel får informationen i tabellerna i fel ordning eller inte alls, beroende på hur komplexa tabellstrukturer som används. Även om tabellstrukturen fungerar så kommer vissa hjälpmedel att läsa upp information om tabellerna, vilket gör det svårare för användarna att förstå innehållet.
Rekommendationer för tabeller och layoutLänk hit
- Använd inte tabeller för layout. Det finns i regel ingen anledning att använda tabeller för webbplatsens grundkonstruktion.
- Använd istället stilmallar (CSS:er) för att styra presentation och layout.
Tips för att komma igångLänk hit
För äldre och redan felkonstruerade webbplatser kan det vara svårt att helt komma ifrån tabeller. Då kan ni som första steg förenkla tabellstrukturen och undvika tabeller i tabeller. Om en webbplats byggs om helt från grunden, ta bort samtliga layouttabeller. Istället för tabeller, använd stilmallar för att styra presentation och layout, se R82. Använd stilmallar för att separera presentationen från innehållet.
Vill du komma igång och göra layout utan tabeller finns mycket hjälp att få från andra webbplatser. Flera av dessa har dessutom färdiga paket med typkonfigurationer för olika layouter som man kan utgå från. Se till exempel:
Det finns även layoutverktyg som skapar en komplett uppsättning HTML och CSS på det sätt du anger:
Tabeller i html-baserad e-postLänk hit
I e-post som formges med html kan tabeller fortfarande ibland vara den enda möjligheten att kontrollera layout (på grund av begränsningar i vissa e-postklienter).
Använd i så fall aria-attributet role=”presentation”
på tabeller som används för layout. Då försvinner den semantik som i vanliga fall följer med elementet table
vilket bland annat minskar problem som annars uppstår exempelvis när informationen läses upp som tabell av skärmläsare.
MätbarhetLänk hit
Om tabeller har använts för layout behöver ni analysera koden och granska webbplatsen för att vara säkra på att den fungerar. Var noga med att webbplatsen presenterar informationen logiskt även för användare som använder hjälpmedel. Granskningen kan ni till exempel göra med:
- Web Developer Extension för Firefox
- Web Accessibilty Toolbar för Internet Explorer. Finns i svensk version.
- HTML Validator för Firefox. W3C:s valideringsverktyg i en lokal installation.
Kommentarer till denna riktlinje
Kommentarer (2)
Fler bra alternativ för att skapa struktur och layout
http://twitter.github.com/bootstrap/ http://foundation.zurb.com/
Mycket bra tillägg Johan! Fler som vill tipsa om bra CSS-ramverk?
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.