Section 4.2: Creating Accessible Data Tables, Part 1
Design of Data Tables
An accessible table starts with a well designed table. You want your table to be easy for all your users to read and understand. For example, if one complex table could be presented with 2 simple tables instead, the simple tables are probably preferred because they are easier for all your users as well as for accessibility reasons.
Concentrate on creating a table that people with disabilities can use easily and effectively, and you most likely will have a table that will be easier to use for all your users [ 3, p.310
].
HTML Codes used in Table Development
There are some common HTML elements that you will see used in the development of tables on the Web. This is not an all inclusive list but covers the ones most relevant to the development of accessible data tables. [ 6
]
table: The table element is the container for tabular data markup.summary: The summary attribute can be used to give descriptive information or information about the structure of a table to those who can not see the table. It is especially useful for more complex tables.caption: The caption element gives a unique title to the table to aid in navigation.th: The th element or table header is used to identify the row and column headers of a table.td: The td element or table data is used to identify each data entry in your table.id: The id attribute must be used to uniquely identify each header cell and is used in conjunction with the headers attribute to indicate the headers for a data cell. It is only required on complex tables.headers: The headers attribute is used on td cells to point to the id of header cells. Screen readers use the information to read header cell information while navigating the data table.scope: The scope attribute can only have one of two values "row" or "col". It is especially useful in the first cell of a data table where it may be ambiguous if the th is column or row header.