1 Accessible Tables

2 Making a table accessible How 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.00pm10.00pm – 11.00pm11.00pm – 12.00pm Regional NewsLostBig Brother 9.30pm – 10.00pm 9.30pm – 10.00pm 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. Space TV Buffy the Vampire Slayer 19:00 Stargate SG-1 20:00 Angel 23:00 To add more information to elements and cells first add a summary attribute to the table element This adds additional meaning for the screen reader software

5 Table text Must follow the start tag: – – Single Celled Table – One – 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 Prices for lemons and pears in Sydney Lemons Pears Wholesale $1.00 $1.50 Retail $2.00 $2.50 LemonsPears Wholesale$1.00$1.50 Retail$2.00$2.50

7 Add the table structure Allows grouping of header rows Allows grouping of body rows Allows grouping of footer rows

8 table row table header table data table head table foot 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 Prices for lemons and pears in Sydney Lemons Pears Wholesale $1.00 $1.50 Retail $2.00 $2.50 Prices for lemons and pears in Sydney LemonsPears Wholesale$1.00$1.50 Retail$2.00$2.50

10 Add id and headers attributes the headers attribute is used with the element. this attribute is used in conjunction with the id attribute within a table heading 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 Beans Peas Carrots Tomatoes Darwin Wholesale $1.00 $1.25 $1.20 $1.00 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 Reference