En enkel datatabell, med en enda rad med kolumnrubriker överst, är relativt enkel att göra tillgänglig. Den verkliga smärtan börjar med komplexa tabeller - sådana med rubriker i både kolumner och rader, sammanslagna celler eller sammanfattningsrader. Den här artikeln förklarar hur man taggar tabellrubriker så att en skärmläsare "förstår" för varje cell vilka rubriker som gäller för den, utan att förlora sitt sammanhang.
Kort sagt – vad den här guiden täcker
Varför skiljer sig TH från TD
I en HTML-tabell eller en taggad PDF har varje cell en av två rolltyper: TH (tabellhuvud) eller TD (tabelldata – en vanlig datacell). Skillnaden är inte nödvändigtvis visuell - en rubrikcell och en datacell kan se identiskt utformade ut - den är semantisk: TH säger till skärmläsaren "detta är en rubrik som förklarar vad data nedanför eller bredvid den betyder." Utan korrekt taggning rör sig en skärmläsare genom tabellen rad för rad som om varje cell vore lika, och det är lätt att helt tappa koll på vilken data som hör till vilken kategori.
När omfattningen är tillräcklig och när du behöver mer
För de flesta tabeller lägger du till enomfattningattribut till varje TH-cell för att indikera om det är en kolumnrubrik (scope="col") eller en radrubrik (scope="row"). När en skärmläsare når en datacell meddelar den automatiskt både den relevanta kolumnrubriken och radrubriken – så att användaren till exempel hör "1 200 — Försäljning, Q1" istället för bara ett isolerat "1 200".
För särskilt komplexa tabeller, med fler än två nivåer av rubriker (till exempel en super-header som grupperar flera underkolumner), räcker det inte alltid med enbart omfattning. I dessa fall, använd attributparet id och rubriker : ge varje rubrikcell ett unikt id, och i varje datacelllista, i attributet rubriker, alla rubrik-ID som är relevanta för den. Denna metod är mer flexibel men också mer komplex och felbenägen - reservera den för fall som verkligen behöver det.
scope="col", och radrubrikerna ("Q1", "Q2", "Q3") medscope="row"— så varje datacell är länkad till de två rubrikerna som är relevanta för den.Sammanfattningsrader och flera rubriker
En sammanfattningsrad längst ner i en tabell ("Total", "Average") är i sig en slags rubrik — det är vanligtvis lämpligt att tagga själva den totala cellen som TH med scope="row", så en skärmläsare skiljer den från en vanlig datarad. På liknande sätt kräver en tabell med en superrubrik som grupperar flera kolumner (till exempel "2026 Sales" som spänner över "Q1", "Q2") korrekt användning avcolspanattribut tillsammans med scope, så den hierarkiska grupperingen bevaras även när den läses upp.
💡 Praktiskt tips
Om en tabell känns för komplicerad för att tagga korrekt (mer än två nivåer av rubriker, flera sammanslagningar), ibland är den enklaste och mest lättillgängliga lösningen att dela upp den i flera enklare tabeller, eller lägga till en sammanfattning i vanlig text bredvid den.
Hur det ser ut i praktiken i Word och PDF
I Word skapas den korrekta grunden genom att använda standardverktyget "Infoga ▸ Tabell" och markera "Rubrikrad" i Tabelldesign, som i de flesta fall exporteras till PDF som TH automatiskt. I Acrobat, efter att ha exporterat från Word och kört en tillgänglighetskontroll, är det värt att öppna taggträdet och bekräfta att rubrikcellerna verkligen var markerade som TH och inte som en vanlig TD – detta är ett vanligt exportmisstag som är lätt att missa.
Har datatabeller i dokument som aldrig har testats?
Vårt verktyg identifierar tabeller med saknade eller felaktiga rubriker i alla PDF-filer på din webbplats.
Skanna din webbplats gratis ←