1

Accessible Tables

2

Making a table accessibleHow does a screen reader read a

table?• Some people who access the

web use screen readers.• Most screen readers don't read

the screen • They read the underlying source

code for the page rather than the content on the screen.

• So tabular data can be problematic

3

How does a screen reader read a table?9.30pm – 10.00pm 10.00pm – 11.00pm 11.00pm – 12.00pm

Regional News Lost Big Brother

<table><tr><td> 9.30pm – 10.00pm</td><td> 9.30pm – 10.00pm</td><td> 9.30pm – 10.00pm</td></tr><tr><td> 9.30pm – 10.00pm</td><td> 9.30pm – 10.00pm</td><td> 9.30pm – 10.00pm</td></tr>

</table>

A data table presented in the following ways if coded correctly:

• The whole table can be read line by line, either continuously or with sections selected manually.

• Using keyboard commands, the user can move along rows and JAWS reads out the heading of the actual column plus the content of the cell.

• Users can also read up and down columns in a similar way.

• Users can select a cell and JAWS will present the information relating to the selected cell. That is, the cell content and, if the table has been coded correctly, the associated row and column headings.

4

Table attributes: summary

• it provides a summary of the table’s purpose and structure which may be read by screen-reading software.

<table summary="This table gives the names and times of some shows on Space – The Imagination Station.">

<caption>Space TV</caption>

<tr><td>Buffy the Vampire Slayer </td><td>19:00</td></tr><tr><td>Stargate SG-1</td><td>20:00</td></tr><tr><td>Angel </td><td>23:00</td></tr>

</table>

To add more information to elements and cellsfirst add a summary attribute to the tableelement • This adds additional meaning for the screen reader software

5

Table <caption>

• <caption> text </caption>• Must follow the <table> start tag:

– <table>– <caption>Single Celled Table</caption>– <tr><td>One</td></tr>– </table>

• Can only be one

You should already have the caption element.

This ensures the caption is always displayed with the table data

6

Example with basic markup

<table border="1" summary="lemons and pears table with one level of row and column headers">

<caption>Prices for lemons and pears in Sydney</caption> <tr> <td></td> <th>Lemons</th> <th>Pears</th> </tr> <tr> <th>Wholesale</th> <td>$1.00</td> <td>$1.50</td> </tr> <tr> <th>Retail</th> <td>$2.00</td> <td>$2.50</td> </tr>

</table>

Lemons Pears

Wholesale $1.00 $1.50

Retail $2.00 $2.50

7

Add the table structure

• <thead></thead>• Allows grouping of header rows

• <tbody></tbody>• Allows grouping of body rows

• <tfoot></tfoot>• Allows grouping of footer rows

8

<table>

<caption>

<tr> table row

<th> table header

<td> table data

<thead>table head

<tfoot>table foot

<tbody>table body

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

You should already have this in your table

9

<table border="1" summary="lemons and pears table with one level of row and column headers">

<caption>Prices for lemons and pears in Sydney</caption>

<thead> <tr> <td></td> <th>Lemons</th> <th>Pears</th> </tr>

<thead> <tbody><tr> <th>Wholesale</th> <td>$1.00</td> <td>$1.50</td> </tr> <tr> <th>Retail</th> <td>$2.00</td> <td>$2.50</td> </tr> <tbody></table>

Prices for lemons and pears in Sydney

Lemons Pears

Wholesale $1.00 $1.50

Retail $2.00 $2.50

10

Add id and headers attributes

• the headers attribute is used with the

<td> element.

• this attribute is used in conjunction with the

id attribute within a table heading <th> to

allow any cell or cells to be associated with

a heading.

The final addition to your markup is to add the id and headers attributes

This ensures the that data cells are linked with the appropriate headings.

11

Example of id and headers<tr>

<td></td>

<th id="beans">Beans</th>

<th id="peas">Peas</th>

<th id="carrots">Carrots</th>

<th id="tomatoes">Tomatoes</th>

</tr>

<tr>

<th id="darwin" colspan="5">Darwin</th>

</tr>

<tr>

<th headers="darwin" id="wholesale-darwin">Wholesale</th>

<td headers="beans darwin wholesale-darwin">$1.00</td>

<td headers="peas darwin wholesale-darwin">$1.25</td>

<td headers="carrots darwin wholesale-darwin">$1.20</td>

<td headers="tomatoes darwin wholesale-darwin">$1.00</td>

</tr>

Identify the different categories in your table

Link the column ids with the section you are in.

Try reading this out loud and see if it makes sense.

12

Referencehttp://www.usability.com.au/resources/tables.cfm