Table Test Page
accessibility, Web
Over the years, there has been considerable discussion about what is the most accessible way to present tabular information in data tables.
Roger Hudson and Russ Weakley have been studying how people who rely on screen readers use a range of data tables. These observations confirm the need to make data tables as simple as possible.
It is relatively easy to make an accessible data table with one level of row and column headers, however it is not always possible to have just one level of headings. Some data tables, for example scientific tables or those of financial institutions, require more than one level of row and column heading. It is much harder to make a table with multiple levels of row and/or column headings accessible.
We have prepared this page to test different ways of enhancing the accessibility of data tables. We are seeking feedback from website users and developers, particularly those who use assistive technologies.
Please send us your opinions on the accessibility of the different data tables and any suggestions how they might be improved. And, please don’t be distracted by the simplified nature of the content or the number of heading levels used in the complex tables.
Table 1: Lemons and pears – Simple table without scope or headers
| Lemons | Pears | |
|---|---|---|
| Wholesale | $1.00 | $1.50 |
| Retail | $2.00 | $2.50 |
Table 2: Oranges and Apples – complex table using id and headers
This table provides information about the wholesale and retail price of both imported and domestic oranges and apples in Sydney and Melbourne. There are two levels of row and column headers.
| Imported | Domestic | |||
|---|---|---|---|---|
| Oranges | Apples | Oranges | Apples | |
| Sydney | ||||
| Wholesale | $1.00 | $1.25 | $1.20 | $1.00 |
| Retail | $2.00 | $3.00 | $1.80 | $1.60 |
| Melbourne | ||||
| Wholesale | $1.20 | $1.30 | $1.00 | $0.80 |
| Retail | $1.60 | $2.00 | $2.00 | $1.50 |
Table 3: Nuts and Bolts – complex table using scope, colgroup and rowgroup.
This table provides information about the wholesale and retail prices for two sizes of brass and steel nuts and bolts. There are two levels of row and column headers.
| Brass | Steel | |||
|---|---|---|---|---|
| Bolts | Nuts | Bolts | Nuts | |
| 10cm | ||||
| Wholesale | $1.00 | $1.25 | $1.20 | $1.00 |
| Retail | $2.00 | $3.00 | $1.80 | $1.60 |
| 20cm | ||||
| Wholesale | $1.20 | $1.30 | $1.00 | $0.80 |
| Retail | $1.60 | $2.00 | $2.00 | $1.50 |
Table 4: Cherries and apricots – very complex table using id and headers.
This table provides information about the wholesale and retail price of both imported and domestic cherries and apricots in Sydney and Melbourne. The cherries are presented in two different grades. There are three levels column headers and two levels of row headers.
| Imported | Domestic | |||||
|---|---|---|---|---|---|---|
| Apricots | Cherries | Apricots | Cherries | |||
| A Grade | B Grade | A Grade | B Grade | |||
| Perth | ||||||
| Wholesale | $1.00 | $9.00 | $6.00 | $1.20 | $13.00 | $9.00 |
| Retail | $2.00 | $12.00 | $8.00 | $1.80 | $16.00 | $12.50 |
| Adelaide | ||||||
| Wholesale | $1.20 | N/A | $7.00 | $1.00 | $11.00 | $6.00 |
| Retail | $1.60 | N/A | $11.00 | $2.00 | $13.00 | $10.00 |
3 comments;-
akarsh
-
Murray Wambolt
-
Sunil Dangwal
Really a nice article, which gave me a immense knowledge about Accessibility on tables.
Very nice tables. I prefer id and headers, yours work nicely.
I have a question about the empty column of cells.
I have a 7 column table (headers) and 10 rows (headers). But the cells are all empty as this is a sample table just to show.
Would it be best to use scope row and scope col? Or should I code the entire table with id and headers, empty cells as well?
Thanks
Murray
PS: I do WCAG testing for the fed gov, in Canada.
Hi Roger Hudson,
Greetings!
I will appreciate you for your article, it was really knowledgeable.
I have two concern here-
For Empty cells in table, screen reader does not read announced anything. I think there should be any clue/information for screen reader users. So that they can understand that, this is an empty cell. I think its should announce empty, what is your take on this?
My second concern is you used rowspann as well as colspan which means screen reader does not announce row name or column name. I think this could cause confusion on screen reader users (Blind Users). As it will difficult to them to determine the structure of Table and they found few Row/Column are missing. What is your thought on this.
I appreciate if you provide your thought and the best way to handle the above problems.