Avanserte datatabeller

Publisert: by maia Comment

Stikkord: , , , , , ,

th, Scope og caption beskrives i enkle datatabeller. I mer kompliserte tabeller kan det også være nødvendig å bruke andre teknikker.

Vis Skjermlesere og tabeller

HUSK: prøv alltid å utforme tabellene så enkelt som mulig! Selv god tilgjengelighetskoding kompenserer ikke for uoversiktelig tabellstruktur. Vurder for eksempel om du kan:

  • Dele tabellen i mindre og enklere tabeller
  • Flytte overskrifter/informasjon som ikke hører til dataene ut av tabellen
  • …

For å oppfylle SK 1.3.1 i WCAG skal det være mulig å bestemme «programmeringsmessig» hvilke relasjoner som hører til en datacelle. Litt forenklet kan vi si at en maskin skal kunne bestemme hvilke tabelloverskrifter som trengs for å skjønne verdien i datacellene. For eksempel skal en skjermleser kunne lese opp riktige ledetekster, så verdiene blir forståelige.

Nedenfor er den samme tabellen merket på tre ulike måter: ingen rad- eller kolonneoverskrifter, doble kolonneoverskrifter og doble kolonneoverskrifter med headers og id.

I første kolonne finner vi produkter: først kolonneoverskriften som går over to rader, deretter epler og pærer. I første rad finner vi i tillegg to årstall som igjen er delt inn i fire kvartaler i rad to. Hvordan tabellene leses opp kan du eventuelt sjekke med forskjellige skjermlesere. Jeg har lagt inn demoer med Jaws for å vise hvordan ulik koding kan resultere i ulik opplesing av tabellen.

Tabell uten rad- og kolonneoverskrifter

Det er vanskelig å skjønne datatabeller uten bruk av tabelloverskrifter for de som bruker skjermleser. I praksis leses bare en celle av gangen, og da er det viktig at verdien kan kobles til riktig rad- og kolonneoverskrift. Tabellen nedenfor er så liten at mange skjermleserbrukere nok kan klare å finne ut av den, men det er mer krevende enn hvis tabellen er riktig merket.

  • Vis tabell uten rad og kolonneoverskrifter
  • Vis HTML-kode
  • Vis tabellen med Jaws

Tabell med doble kolonneoverskrifter

Vanligvis skal det fungere bra med kun rad- og kolonneoverskrifter, dvs. th. Teknikken kan kombineres med headers og id (se neste avsnitt), men denne teknikken anbefales normalt ikke.

  • Vis tabell med doble kolonneoverskrifter
  • Vis HTML-kode
  • Vis tabellen med Jaws

Tabell med headers og id

Hvis rekkefølgen på tabelloverskriftene er viktig, og denne rekkefølgen avviker fra det skjermlesere kan gjette er teknikken med headers og id et alternativ. Som nevnt anbefales det vanligvis ikke. headers-attributtet har id’ene til cellene som skal leses opp som verdi:

<td headers="2011 2011-2">

Tabellen nedenfor ser lik ut som tabellen med doble kolonneoverskrifter. headers brukes imidlertid for å få lest opp kvartalene før årstallene.

  • Vis tabell med headers og id
  • Vis HTML-kode
  • Vis tabellen med Jaws

This entry was posted in HTML Syn WCAG and tagged