Stikkord: role="columnheader" , role="rowheader" , role=cell , role=row , role=rowgroup , role=table , tabell
Hovedrådet er å bruke tabeller når noe vises som tabeller. Spesielt for skjermlesere fungerer datatabeller ofte mye bedre enn div-tag’er som stiles for å presenteres visuelt som en tabell.
Grunnen til å bruke div’er er ofte knyttet til responsivt design. WAI-ARIA har roller for å fortelle skjermlesere (evt. annen hjelpeteknologi) at div’ene skal tolkes som en tabell.
I videoen nedenfor demonstreres tabellen med og uten WAI-ARIA koding med skjermleseren Jaws:
div-tabell (CSS) uten WAI-ARIA
Vis kode
<div style="display:table; width:auto; background-color:#eee; border:1px solid #666666; border-spacing:0px; border-collapse:separate;">
<div style="display: table-header-group;">
<div style="display: table-row; width: auto; clear: both;">
<div style="display: table-row; width: auto; clear: both;">
Donald McDonald
The city, Norway
1234
Mikke Rat
On top of the mountain, Bhutan
40
div-tabell med WAI-ARIA
Vis kode
<div role="table" style="display:table; width:auto; background-color:#eee; border:1px solid #666666; border-spacing:0px; border-collapse:separate;">
<div role="rowgroup" style="display: table-header-group;">
<div role="row" style="display: table-row; width: auto; clear: both;">
<div role="row" style="display: table-row; width: auto; clear: both;">
Donald McDonald
The city, Norway
1234
Mikke Rat
On top of the mountain, Bhutan
40
WAI-ARIA attributter
Her gjengis kun tabell-attributtene, men aria-label, aria-describedby etc. kan brukes for å gi tabellen navn/beskrivelse.
Rolle
Beskrivelse
table
Identifiserer strukturen som inneholder tabellen
rowgroup
WAI-ARIA har ikke roller for tabell header og body, og rowgroup må eventuelt brukes til begge.
row
Rad
columnheader
Kolonneoverskrift
rowheader
Radoverskrift
cell
Vanlig datacelle
Flere eksempler
Flere eksempler (også på mer avanserte tabeller) finner du blant annet hos W3C:Table Example
