HTML 4 wprowadził atrybut 'headers' dla kolumn tabeli <td>. Atrybut ten jest używany w połączeniu z atrybutem identyfikatora (id="") zawartego w nagłówku tabeli (<th>), by umożliwić logiczne połączenie dowolnej kolumny bądź kolumn, z dowolnym nagłówkiem bądź nagłówkami.

Poniższa tabela, przedstawiająca ceny pomarańczy i jabłek, wykorzystuje identyfikatory i nagłówki.

Ceny krajowych i importowanych jabłek i pomarańczy w Sydney i Melbourne
Importowane Krajowe
Pomarańcze Jabłka Pomarańcze Jabłka
Sydney
Hurtowe $1.00 $1.25 $1.20 $1.00
Detaliczne $2.00 $3.00 $1.80 $1.60
Melbourne
Hurtowo $1.20 $1.30 $1.00 $0.80
Detalicznie $1.60 $2.00 $2.00 $1.50

PYTANIE: jaka jest cena hurtowa importowanych jabłek w Sydney?

Dla użytkowników wszelkiego typu screen readerów (zna ktoś jakieś ładne/zgrabne tłumaczenie tego terminu?), użycie identyfikatorów i nagłówków oznacza, że odpowiedź na to pytanie poznają bez problemu.

Rzućmy okiem na kod:

  • <table border="1" summary="Ceny hurtowe i detaliczne, krajowych i importowanych jabłek i pomarańczy, w Sydney i Melbourne. Są dwa rzędy kolumn.">
  • <caption>
  • Ceny krajowych i importowanych jabłek i pomarańczy w Sydney i Melbourne
  • </caption>
  • <thead>
  • <tr>
  • <td></td>
  • <th colspan="2" id=”imported”>Importowane</th>
  • <th colspan="2" id="domestic">Krajowe</th>
  • </tr>
  • <tr>
  • <td></td>
  • <th id="oranges-imp">Pomarańcze</th>
  • <th id=”apples-imp”>Jabłka</th>
  • <th id="oranges-dom">Pomarańcze</th>
  • <th id="apples-dom">Jabłka</th>
  • </tr>
  • </thead>
  • <tbody>
  • <tr>
  • <th id=”sydney” colspan=”5″>Sydney</th>
  • </tr>
  • <tr>
  • <th headers="sydney" id="wholesale-sydney">Hurtowe</th>
  • <td headers="imported oranges-imp sydney wholesale-sydney">$1.00</td>
  • <td headers=”imported apples-imp sydney wholesale-sydney”>$1.25</td>
  • <td headers="domestic oranges-dom sydney wholesale-sydney">$1.20</td>
  • <td headers="domestic apples-dom sydney wholesale-sydney">$1.00</td>
  • </tr>
  • <tr>
  • <th headers="sydney" id="retail-sydney">Detaliczne</th>
  • ...Reszta kodu ...

Korzystając w JAWS z odpowiednich kombinacji klawiszy, większość użytkowników będzie w stanie zlokalizować odpowiednią komórkę tabeli, zawierającą odpowiedź na powyższe pytanie. Mogą upewnić się w swoim wyborze, prosząc JAWS o przeczytanie tej właśnie kolumny.

JAWS przeczyta kolumnę mniej więcej w ten sposób:

kolumna trzecia, rząd czwarty, jabłka Sydney cena hurtowa importowane, dollar jeden kropka dwa pięć

http://www.usability.com.au/resources/tables.cfm#id