Rekommendationer för tillgängliga tabellerLänk hit

• Använd tabellrubriker såsom rad- och kolumnrubriker, och framhäv dem grafiskt.
• Använd vid behov abbr-attributet för att ge förkortningar av rad- och kolumnrubrikers innehåll.
• Koppla ihop rubrikceller med tillhörande dataceller. Detta gäller särskilt för komplexa datatabeller som har två eller flera logiska nivåer med rad- eller kolumnrubriker.

Använd tabellrubriker såsom rad- och kolumnrubriker och framhäv dem grafisktLänk hit

Formge alla typer av datatabeller så att det blir enkelt att tolka deras innehåll. Framhäv alla tabellrubriker, både rad- och kolumnrubriker grafiskt, så att användaren kan skilja dem från tabellens datauppgifter. Tabeller med många kolumner och rader blir lättare att läsa om de har tydliga kolumngränser och rader, till exempel med olika bakgrundsfärg för udda och jämna rader. Många tabeller blir också bättre i utskrift om de förses med thead, tbody och tfoot.

Förkorta långa rad- och kolumnrubrikerLänk hit

Sträva alltid efter att ha korta rad- och kolumnrubriker. När en skärmläsare läser upp en tabell, kan den läsa upp tillhörande rad- och kolumnrubriker före innehållet i varje datacell. Om rubrikerna är långa tar det tid att höra dem upprepas om och om igen. Om det inte är möjligt eller lämpligt att göra en kort rubrik, så använd abbr-attributet för att ange en förkortad version av långa rad- och kolumnrubriker, som skärmläsare kan använda.

Koppla ihop dataceller med rubrikcellerLänk hit

En explicit koppling mellan rubrikceller och dataceller gör att skärmläsare kan läsa upp den tillhörande rubriken före innehållet i varje datacell. På så sätt slipper användarna memorera tabellstrukturen. Detta är särskilt bra för tabeller med många kolumner, eller med flera rubriknivåer. Attributet scope på ett th-element anger för vilka dataceller rubriken gäller. Tillåtna värden är row, col, rowgroup och colgroup. Elementet colgroup märker upp kolumngrupper, medan tbody märker upp radgrupper. Ett alternativt sätt att uttrycka relationer mellan celler är att använda attributet id på th-elementen och attributet headers på td-elementen. Headers kan innehålla en eller flera identiteter för rubrikceller. Om du sätter flera så skilj dem åt med mellanslag.

ExempelLänk hit

Exempel på användning av abbr:

<th abbr="pris">Nettopris exklusive moms</th>

ReferenserLänk hit

Se även R83 Använd inte tabeller för layout

MätbarhetLänk hit

Stäng av CSS i webbläsaren och kontrollera att det är möjligt att se skillnad på rubrikceller och dataceller.