Introduction
Tables are used to present information visually in a grid or matrix, and the formatting provides context to the data. By being able to visually view a table, a user can quickly determine the table’s purpose, which rows/columns are the headers, and which cells are associated with each other. When a user reads a table using an assistive device, this is not possible unless the table is formatted correctly. By meeting WCAG success criteria and best practices, all users will be able to correctly interpret tabular data.
Welcome
If you’re feeling lost or are new to web accessibility, the following articles will help contextualize the content within this article:
- What is the AODA?
- Introduction to Web Accessibility
- WCAG 2.0 At a Glance
- Introduction to Writing and Formatting Content
- Writing Content
- Formatting Content
Note: In this article we go into detail about specific HTML requirements of tables in order to help you better understand WCAG 2.0 requirements. If you have any questions about how to appropriately create tables within your web authoring environment, please reach out to your web development team for assistance.
Layout Tables vs Data Tables
When not to use a table
Layout tables are defined as tables that are used to align content elements (such as images, paragraphs) in rows or columns. Typically, layout tables have no actual relationship between the content within their rows and columns.
Layout tables were used in the past to create layouts that were unachievable with web technologies at the time. For example, tables were used to create columns on a webpage by creating by placing an image in cell on left, and text content in the cell to the right. We recommend that tables are never used in this way.
Modern web technologies allow users to easily create multiple layouts without the use of tables. Before using a table, make sure that your content is appropriate to be placed in tabular format. Typically, table content is data, or is data-like.
When to use a table
Data tables are defined as tables with data that have a clear relationship between rows and columns. According to WCAG 2.0, information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal).They also typically have row headers, column headers, or both. When a data table is used properly screen readers and other assistive devices will have the ability to properly query rows and columns and relay the data to the user effectively.
Using Table Captions
Using a caption can provide the user with substantial usability benefits when using a screen reader or other assistive technology. When a <caption> element is used, the user will be relayed that information along with the table data, allowing for a clear relationship between the table and its title. Without a caption the user may be subject to misinterpreting the data table information. For example, a user using a screen reader may come across a table without a caption and the screen reader may only read the number of rows and columns in the data table, giving no context to the data that is being presented to them. Captions are also visible elements (unless intentionally hidden by the website using styling) therefore they are beneficial to all users to make sure that the data in the table is understood.
Row and Column Headers
Data tables should always include table headers. This is one of the most important aspects of table accessibility. At least one type of header row—either a column header or row header—should be used for any table to allow users to properly understand the data. For more complex tables, make sure that both column and row headers are used.
Colour in Row and Column Headers
Row and column headers should never be identified just by colour. Make sure that they are distinct in size and style, in addition to colour. For more information on the use of colour and contrast, read our Colour and Contrast article.
Simple vs. Complex Tables
Using the simplest table configuration possible is recommended when dealing with tabular data. Below are explanations of the different types of tables and what to think about when building tables.
Simple Tables
A simple table is defined as a table with a maximum of one header row and one header column, with the header column fully explaining the type of data within the column. Screen readers and other assistive technology will present all information in a table linearly, cell by cell, making simple tables easier to parse and understand.
Important: Simple tables are recommended when displaying data as they will result in the clearest presentation visually but are also easiest for screen readers and other assistive technology to interpret. When beginning to create your table keep this in mind: simple is always better.
| Start Date | New Students – Deposit Due | Returning Students – Deposit Due | All Students – Balance of Fees Due |
|---|---|---|---|
| 2022 Spring (May) | February 18, 2022 | April 6, 2022 | May 24, 2022 |
| 2022 Fall (Sept) | June 15, 2022 | July 22, 2022 | September 21, 2022 |
| 2023 Winter (Jan) | October 19, 2022 | November 25, 2022 | January 23, 2023 |
| 2023 Spring (May) | February 17, 2023 | April 5, 2023 | May 22, 2023 |
Complex Tables
A complex table is defined as a table which has two (or more) rows of headers that must be referenced to understand the data in dependent data cells. This usually includes nested rows or columns, and headers might be in places other than the first row or column. These types of tables are incredibly challenging for screen readers and other assistive technology users to understand.
As mentioned above, tables are read linearly, cell by cell, so nested rows or columns can make interpreting complex tables exceedingly difficult. To ensure their accessibility, apply the following techniques:
- Markup all column headers or row headers as table headers (using the <th> element).
- For every table data cell (<td>), add a headers attribute that lists the ids of all headers that apply to that cell. If more than one header applies to a cell, separate ids with a space.
Important: Complex tables are not recommended when displaying data. It would be beneficial to look at your data and see if it can be broken up into multiple simple tables so that all users can understand the data clearly and efficiently. In the event you must use a complex table please refer to some of the techniques above.
| Name | Subject | Marks |
|---|---|---|
| Hillary | Advanced Web | 75 |
| Operating System | 60 | |
| Lary | Advanced Web | 80 |
| Operating System | 75 | |
| Total Average: 72.5 | ||
Avoid Empty Cells for Formatting
When building a table, it may be tempting to use empty cells to visually format data in a table. While this practice may make sense for sighted users, it may not work for others.
Building tables with a Content Management System (CMS)
When you are using a CMS, table accessibility is usually built into the system that you are using. For example, at Niagara College table accessibility is built into our CMS (WordPress) to make sure that all of the tables on our website are as clear and concise as possible. It is up to you to make sure that your table has proper headings, captions, and footers where applicable. When possible, simple tables are recommended, however it is acceptable to include some complex tables if they are needed to convey specific information.
Building tables in the WordPress CMS
If you need instructions on how to create a table within the page editor on a WordPress website, please refer to this external resource: How to Add Tables in WordPress Posts and Pages (No HTML Required)
If you have questions about accessible tables or how to build accessible tables, please reach out to your web development team.
