handicapmainstreaming: Undgå at bruge tabeller til layout

Undgå at bruge tabeller til layout

Brug ikke tabeller til layout af indhold!

Tabeller har traditionelt været brugt på to måder: til præsentation af data og til præsentation af indhold. I sidstnævnte tilfælde bruger man altså tabeller til at formatere og layoute indholdet. Det er dog en rigtig dårlig idé, da man risikerer, at brugere, der anvender en skærmlæser, får hjemmesiden præsenteret på en meget uhensigtsmæssig måde. I stedet bør man altid bruge CSS til layout og formatering af indholdet.

Sådan oplæser en skærmlæser en tabel

En skærmlæser oplæser en tabel lineært, dvs. den vil læse hver enkelt celle i tabellen fra venstre mod højre, linje for linje. I nogle tilfælde er siden måske layoutet så denne rækkefølge er logisk for en bruger med skærmlæser. Men ofte vil det indebære en tilfældig oplæsning af tekstblokke, der ikke giver nogen mening for brugeren.

Hvis man af én eller anden grund insisterer på at anvende tabeller til layout, kan man teste om tabellen giver mening, når den læses lineært ved hjælp af tekstbrowseren Lynx og det kan testes ved hjælp af Web Accessibility Toolbar.

Brug kun tabeller til præsentation af data!

Tabeller bør kun bruges til præsentation af data. En datatabel er en tabel, der præsenterer data, f.eks. præsentation af regnskab, statistik, køreplaner osv. Datatabeller kan være opbygget simpelt eller komplekst.

Eksempel på en simpel datatabel:

	Overskrift 1	Overskrift 2	Overskrift 3	Overskrift 4	Overskrift 5
Tekst 1	x	x	x	x	x
Tekst 2	x	x	x	x	x
Tekst 3	x	x	x	x	x

Eksempel på kompleks datatabel:

	Overskrift 1		Overskrift 2
Overskrift 3	Tekst A	Tekst B	Tekst C	Tekst D
Tekst 1	x	x	x	x
Tekst 2	x	x	x	x

Når man skal gøre datatabeller tilgængelige

Man skal være opmærksom på, at brugere, der kan se tabellen, danner sig et overblik over tabellen ved visuelt at skanne hen over indholdet, såvel som man læser indholdet i tabellen. Denne mulighed har en bruger, der benytter sig af en skærmlæser ikke.

For at en bruger med skærmlæser kan danne sig et overblik over en datatabel, skal den være designet og ’opmærket’ (dvs. identificeret) på en sådan måde, at oplæsningen af data virker logisk for brugeren. En skærmlæser vil normalt læse hver enkelt celle op i vandret rækkefølge. Man kan dog godt opmærke cellerne i en bestemt rækkefølge og dermed specifikt fortælle en skærmlæser i hvilken rækkefølge cellerne skal læses op.

Principperne for opmærkning af datatabeller

Princippet for opmærkningen af en tabel er, at man sammenknytter kolonner, rækker og celler til hinanden. Det indebærer, at tabellen får en logisk struktur, der kan aflæses af en skærmlæser. Og det betyder, at tabellens indhold bliver oplæst i en bestemt rækkefølge.

Opmærkningen er en forholdsvis enkel proces, når der er tale om en simpel datatabel. Hvis overskrifterne i en simpel datatabel begynder øverst i venstre hjørne (dvs. i første række, i første kolonne) behøver man slet ikke at opmærke tabellen, da skærmlæseren automatisk vil læse tabellen lineært fra ende til anden.

Opmærkningen bliver straks mere kompliceret, når der er tale om en kompleks datatabel. Her bliver man nødt til at tilknytte flere celler til hinanden, for at brugeren skal forstå sammenhængen mellem overskrifter og tal. Risikoen for at lave fejl er stor. Undgå derfor at bruge komplekse datatabeller, men vælg i stedet simple datatabeller, hvor det overhovedet er muligt.

Brug eventuelt forkortelser af overskrifter!

Det kan være en god idé at bruge forkortelser af overskrifter. Specielt i forbindelse med brugen af komplicerede datatabeller, hvor overskrifterne bliver læst op af skærmlæseren for hver enkelt celle. Det kan blive en langsommelig affære for brugeren at komme igennem en hel tabel, hvis overskrifterne er lange. Forkortelser kan skrives ind i tabellen ved hjælp attributen ’abbr’.

Ex. [th id=”header1” abbr=”Antal indbyggere”]Antal indbyggere i kommunen [/]

Skriv eventuelt en opsummering af indholdet

I forbindelse med komplicerede tabeller kan det for brugere med synsnedsættelse være en god service at skrive en kort opsummering (summary) af, hvad tabellen indeholder. Det sparer brugeren for tid og energi i forhold til at skulle danne sig overblik over tabellens indhold. Det kan gøres ved at bruge attributen ’summary’.

Du kan ligeledes bruge ’summary’ som en nødløsning, hvis du gerne vil præsentere en tabel men ikke har tilstrækkelig viden om, hvordan du opmærker en tabel, så den er tilgængelig. Det kan også gøres ved at skrive en beskrivende tekst nedenunder tabellen.

Brug relative størrelsesangivelser i tabeller!

Desuden skal man bruge relative størrelsesangivelser til at definere tabellen, således at brugeren kan forstørre skærmbilledet efter behov.

Hvis man bruger tabel til layout skal man ikke bruge opmærkning af cellerne, som man gør ved præsentation af data, da det blot vil forvirre en skærmlæser.

Øg læsbarheden via design!

Når du designer tabellen, er det også vigtigt at lave luft omkring rækker, kolonner og tekst. Det øger læsbarheden af tabellen.

Giv tabellen et navn!

Det er en god idé at give tabellen en -tekst eller titel tekst (title=”Navn på tabel”).

Giv brugeren mulighed for at springe tabellen over!

Det kan også være en god idé at give brugere mulighed for at spring tabellen over, hvis de ikke ønsker at lytte til indholdet. Dette gøres ved hjælp af ”skip tabel-link”.