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:

 

Senast uppdaterad: 2017-12-15

Kommentarer till denna riktlinje

Kommentarer (2)

Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)