Table Test Page
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
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.
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.
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.
|A Grade||B Grade||A Grade||B Grade|