Implementing Accessible Tables
Introduction
Tables are used to present information in an organized format. When adding tables to a webpage, it is important to understand the type of table that should be used. There are two type of tables: data tables and layout tables.
Data tables are used to organize data with a logical relationship in grids. To ensure users that rely on assistive technology can perceive information presented, tables must indicate header cells and data cells that define their relationships.
Tables must be marked with the <table> HTML tag to ensure data is structured, meaningful, and accessible to all users.
Each row within the table must be marked with the <tr> HTML tag to structure the table into rows.
Header cells within tables must be marked with table header <th> HTML tag to provide context for the data. The tag informs screen readers and other accessibility tools that a particular cell serves as a label for a row or column. This allows users to understand the relationship between data points and their corresponding headers.
Data cells within tables are identified as the table data <td> HTML tag. The tag informs screen readers and other assistive technologies that a cell holds information related to a corresponding row or column header. This is imperative because it allows assistive technologies to link each data cell with the right header and present the information in full context.
Document formats other than HTML, including PDFs, have mechanisms to markup table structures. Word processing apps such as Microsoft Word may also provide similar mechanisms to markup tables. Table markup is often lost when converting from one format to another; however, some applications may be able to convert table markup.
Layout tables are used to arrange information on a webpage, and do not have headers or data cells. It is recommended to avoid the use of layout tables because they can disrupt the reading order for users who rely on assistive technology (such as screen readers) to navigate a webpage. Instead, use a CSS based layout (such as Divs), which provide more control over the visual display without compromising the structure. If layout tables are used, the following steps must be taken:
- The content should remain in a clear and logical reading order, even when it is not shown in a table
- Layout tables should not be used if the information in the table presents data
- Review the layout table and determine whether if a CSS based layout can be used
Implementing Accessible Tables
The table purposely displays the HTML table markups. In the example, the table headers "First Name", "Last Name", and "GPA" are marked with the <th> tag. The table data associated with the headers such as "Billy", "Bronco", and "4.0" are marked withe the <td> tag.
|
<th>First Name</th> |
<th>Last Name</th> |
<th>GPA</th> |
|---|---|---|
|
<td>Billy</td> |
<td>Bronco</td> |
<td>4.0</td> |
|
<td>Jane</td> |
<td>Doe</td> |
<td>2.0</td> |
How the table is presented to the user:
| First Name | Last Name | GPA |
|---|---|---|
| Billy | Bronco | 4.0 |
| Jane | Doe | 2.0 |
The table purposely displays HTML table markups. Complex tables have headers that span across multiple data table columns, or data tables that span multiple rows. While visual users may be able to easily understand the information presented, users who rely on assistive technology (such as screen readers) may experience difficulty perceiving the same information. Therefore, cells must be appropriately associated.
|
<th colspan="2">Name</th> |
<th>GPA</th> |
|
|---|---|---|
|
<td>Billy</td> |
<td>Bronco</td> |
<td>A</td> |
|
<td>Jane</td> |
<td>Doe</td> |
<td>B</td> |
How the table is presented to the user:
| Name | Grade | |
|---|---|---|
| Billy | Bronco | A |
| Jane | Doe | B |
A caption identifies the main topic of a table and is useful in most situations. A summary provides orientation or navigation guidance in complex tables.
Manual Testing Procedures
Data Table
- Review the source code and manually verify if the table is marked up correctly. Source code can be inspected on most web browsers by using the Ctrl + Shift + I key combination or the F12 key.
- Look for the following attributes:
- <Table>
- <Tr>
- <Th>
- <Td>
- <Header>
Layout Table
Visually inspect the layout table and determine whether if the table is better presented as a data table or a CSS based layout.
Assistive Technology testing
Screen readers, such as NVDA, can be used to determine the accessibility of a table. Navigate the screen reader towards the beginning of a table, and verify if the screen reader recognizes that there is a table present. Test if the information is presented in a way that is contextual, logical and understandable to a user.