Accessible Tables

1
Accessible Tables
2
Making a table accessible

• How does a screen reader read a table?

lttablegt lttrgt lttdgt 9.30pm 10.00pmlt/tdgt lttdgt
9.30pm 10.00pmlt/tdgt lttdgt 9.30pm
10.00pmlt/tdgt lt/trgt lttrgt lttdgt 9.30pm
10.00pmlt/tdgt lttdgt 9.30pm 10.00pmlt/tdgt lttdgt
9.30pm 10.00pmlt/tdgt lt/trgt lt/tablegt
3
Table attributes summary
First add a summary attribute to the table
element for meaning

• Provides a summary of the tables purpose and
  structure which may be read by screen-reading
  software.

lttable summary"This table gives the names and
times of some shows on Space The Imagination
Station."gt ltcaptiongtSpace TVlt/captiongt lttrgtlttdgtBu
ffy the Vampire Slayer lt/tdgtlttdgt1900lt/tdgtlt/trgt ltt
rgtlttdgtStargate SG-1lt/tdgtlttdgt2000lt/tdgtlt/trgt lttrgtltt
dgtAngel lt/tdgtlttdgt2300lt/tdgtlt/trgt lt/tablegt
4
Table ltcaptiongt
Then add a caption element to ensure the caption
is always displayed with the table data

• ltcaptiongt text lt/captiongt
• Must follow the lttablegt start tag
• lttablegt
• ltcaptiongtSingle Celled Tablelt/captiongt
• lttrgtlttdgtOnelt/tdgtlt/trgt
• lt/tablegt
• Can only be one

5
Simple table
Prices for lemons and pears in Sydney
6
Basic markup
lttable border"1" summary"lemons and pears table
with one level of row and column headers"gt
ltcaptiongtPrices for lemons and pears in
Sydneylt/captiongt lttrgt lttdgtlt/tdgt
ltthgtLemonslt/thgt ltthgtPearslt/thgt lt/trgt lttrgt
ltthgtWholesalelt/thgt lttdgt1.00lt/tdgt
lttdgt1.50lt/tdgt lt/trgt lttrgt ltthgtRetaillt/thgt
lttdgt2.00lt/tdgt lttdgt2.50lt/tdgt lt/trgt lt/tablegt
7
Advanced accessibility

• lttheadgtlt/theadgt
• Allows grouping of header rows
• lttbodygtlt/tbodygt
• Allows grouping of body rows
• lttfootgtlt/tfootgt
• Allows grouping of footer rows

8
Tables - terminology
Elements
Elements add extra semantic meaning table rows
may be grouped into a table head, table foot and
one or more table body sections. This division
enables agents to support scrolling of table
bodies independently of the table head and
foot W3C HTML 4.01 specification
lttablegt ltcaptiongt lttrgt table row ltthgt table
header lttdgt table data lttheadgttable
head lttfootgttable foot lttbodygttable body
9
lttable border"1" summary"lemons and pears table
with one level of row and column headers"gt
ltcaptiongtPrices for lemons and pears in
Sydneylt/captiongt lttheadgt lttrgt lttdgtlt/tdgt
ltthgtLemonslt/thgt ltthgtPearslt/thgt lt/trgt lttheadgt
lttbodygt lttrgt ltthgtWholesalelt/thgt lttdgt1.00lt/tdgt
lttdgt1.50lt/tdgt lt/trgt lttrgt ltthgtRetaillt/thgt
lttdgt2.00lt/tdgt lttdgt2.50lt/tdgt lt/trgt
lttbodygt lt/tablegt
Prices for lemons and pears in Sydney
10
Complex table
Imported and domestic orange and apple prices in
Sydney and Melbourne
id, header
11
http//www.usability.com.au/resources/tables.cfm