{"id":3691,"date":"2025-12-11T09:17:31","date_gmt":"2025-12-11T17:17:31","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=3691"},"modified":"2025-12-11T16:21:13","modified_gmt":"2025-12-12T00:21:13","slug":"tables-and-accessibility","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/tables\/tables-and-accessibility\/","title":{"rendered":"Tables and Accessibility"},"content":{"rendered":"\n

This web page is intentionally created with accessibility errors to demonstrate the functionality of automatic accessibility checkers for web pages. View this webpage in an accessibility checker (WAVE)<\/a> to help identify accessibility issues in other forms of digital content. <\/p>\n\n\n\n

Error Types<\/strong>: Errors must<\/strong> be fixed. Alerts should<\/strong> be fixed. These fixes, both errors and alerts, improve the accessibility and usability of the content. <\/p>\n\n\n\n

Best Practice<\/strong>: Use a data table for comparing information.<\/span> Don’t use layout tables to position content visually. Know the limits of the tools used to build tables so you can present your information correctly. <\/p>\n\n\n\n

\n\n\n\n

Layout Table<\/h2>\n\n\n
\r\n \n
\r\n\t\n\n\n\n\n\t\n\t\n\t\n\t\n\t\n\t
Screen<\/td>readers<\/td>read<\/td>\n<\/tr>\n
information<\/td>across the<\/td>table,<\/td>\n<\/tr>\n
left to right
\n<\/td>		and<\/td>top to bottom
\n<\/td>\n<\/tr>\n
thereby<\/td>making,<\/td>it<\/td>\n<\/tr>\n
difficult
\n<\/td>		to<\/td>understand
\n<\/td>\n<\/tr>\n
information<\/td>in<\/td>tables.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n

<\/p>\n\n<\/div>\r\n\n\n

\r\n\t\n\n

A layout table is without table headers, a caption, and scope. Its purpose is to place content visually. Most table-building tools will default to a layout table. <\/p>\n\n\n\n

A layout table should not<\/strong> be used to visually layout content.
A layout table must not<\/strong> contain data or content meant for comparison.<\/p>\n\n\n\n

Error Type<\/strong>: Alert and Error<\/p>\n\n\n\n

Best Practice<\/strong>: Use the content editor’s ability to create columns and rows to align content visually. <\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n

\n\n\n\n

Data Table<\/h2>\n\n\n
\r\n \n
\r\n\t\n\n\n\n\n\t\n\n\t\n\t
First Name<\/th>Last Name<\/th>Room<\/th>\n<\/tr>\n<\/thead>\n
Kelly<\/td>Scott<\/td>125<\/td>\n<\/tr>\n
Tate<\/td>Dakota<\/td>225<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n<\/div>\r\n\n\n
\r\n\t\n\n

Data tables have table headers, captions, and scope. Its purpose is to compare cells.<\/p>\n\n\n\n

<\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n

\n\n\n\n

Table Header<\/h3>\n\n\n\n

Data tables have table headers that accurately describe the corresponding cells. Table headers are not headings. Most accessibility checkers will identify tables, table headers, and headings. <\/p>\n\n\n\n

Error Type<\/strong>: Error<\/p>\n\n\n\n

Best Practice<\/strong>: Use the appropriate header on tables. Table headers can be in columns or rows. Usually, it is the first row of the table. It can be in the first column of a table. Multiple rows and columns as headers make tables complex and require additional attributes to ensure assistive technology can read and navigate them appropriately for the data. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n

With Table Headers<\/h4>\n\n\n\n

This table uses table headers to designate the topic of each column. <\/p>\n\n\n\n\n\n\n\t\n\n\t\n\t
First Name<\/th>Last Name<\/th>Room<\/th>\n<\/tr>\n<\/thead>\n
Kelly<\/td>Scott<\/td>125<\/td>\n<\/tr>\n
Tate<\/td>Dakota<\/td>225<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n<\/div>\r\n\n\n
\r\n\t\n\n

With Headings<\/h4>\n\n\n\n

This table incorrectly uses headings to designate the topic. Not only do the headings skip levels, but this table would also be a layout table with data meant to compare information. This would be considered an accessibility error. <\/p>\n\n\n\n\n\n\n\t\n\t\n\t
First Name<\/h6><\/td>
Last Name<\/h6><\/td>
Room<\/h6><\/td>\n<\/tr>\n
Kelly<\/td>Scott<\/td>125<\/td>\n<\/tr>\n
Tate<\/td>Dakota<\/td>225<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n<\/div>\r\n\n<\/div>\n\n\n

An example of a table with headers<\/a> with various screen readers.<\/p>\n\n\n\n

\n\n\n\n

Empty Table Header<\/h3>\n\n\n\n

Table headers must not be empty. Assistive technology uses the headers as a reference. An empty header doesn’t provide the context needed when navigating through the table. <\/p>\n\n\n\n

Error type<\/strong>: Error<\/p>\n\n\n\n

Best Practice<\/strong>: Add text that represents the content preceding in the column or row. <\/p>\n\n\n\n

Table creation tools might let you turn an empty table header cell into a data cell. Most table creation tools only designate the first row or column as the header. The best option, if there isn’t content for the header cell, is to create the table in HTML and change the empty table header to a table cell. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n\n\n\n\t\n\n\t\n\t\n\t\n\t
 <\/th>First Name<\/th>Last Name<\/th>\n<\/tr>\n<\/thead>\n
1<\/th>Kelly<\/td>Scott<\/td>\n<\/tr>\n
2<\/th>Tate <\/td>Dakota<\/td>\n<\/tr>\n
3<\/th>Riley<\/td>Everett<\/td>\n<\/tr>\n
<\/th><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n

<\/p>\n\n<\/div>\r\n\n\n

\r\n\t\n\n

<\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n

\n\n\n\n

Table Caption<\/h3>\n\n\n\n

A table’s caption is like a heading for the table and gives people a sense of what it’s about. Assistive Technology provides a way to navigate by tables. This makes it easy for people to understand what the table is about. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n\n\n\n\t\n\n\t\n\t
Participants names and room number<\/caption>\n
First Name<\/th>Last Name<\/th>Room<\/th>\n<\/tr>\n<\/thead>\n
Kelly<\/td>Scott<\/td>125<\/td>\n<\/tr>\n
Tate<\/td>Dakota<\/td>225<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div>\r\n\n\n
\r\n\t\n\n

<\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n

Error Type<\/strong>: Alert<\/p>\n\n\n\n

Best Practice<\/strong>: Provide a caption for each table on the page. If captions are not available, use headings right before the table, clearly identified, to help people navigate to the information. ARIA can be used to connect the table to the heading.<\/p>\n\n\n\n

\n\n\n\n

Scope<\/h3>\n\n\n\n

Scope<\/code> is used to help assistive technology associate the header with the cells. As tables get more complex with more than one header row and or column, the scope supports its complexity.<\/p>\n\n\n\n

Error Type<\/strong>: Error\/Alert<\/p>\n\n\n\n

Best Practice<\/strong>: Use the scope<\/code> attribute when there is more than one set of headers. <\/p>\n\n\n\n

See the Web Accessibility Initiative’s Tables with Two Headers<\/a> for more details about using scope<\/code>. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n\n\n\n\t\n\n\t\n\t\n\t
Participants place and names<\/caption>\n
Place<\/th>First Name<\/th>Last Name<\/th>\n<\/tr>\n<\/thead>\n
1<\/th>Kelly<\/td>Scott<\/td>\n<\/tr>\n
2<\/th>Tate <\/td>Dakota<\/td>\n<\/tr>\n
3<\/th>Riley<\/td>Everett<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<\/div>\r\n\n\n
\r\n\t\n\n

The HTML code for the table with scope. Much of the styling or CSS was removed to not distract from the use of scope<\/code>. <\/p>\n\n\n\n

<table>\n<caption>Participants place and names<\/caption>\n<thead>\n<tr>\n\t<th scope=\"col\">Place<\/th><th scope=\"col\">First Name<\/th><th scope=\"col\">Last Name<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n\t<th scope=\"row\">1<\/th><td>Kelly<\/td><td>Scott<\/td>\n<\/tr>\n<tr>\n\t<th scope=\"row\">2<\/th><td>Tate <\/td><td>Dakota<\/td>\n<\/tr>\n<tr>\n\t<th scope=\"row\">3<\/th><td>Riley<\/td><td>Everett<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/code><\/pre>\n\n<\/div>\r\n\n<\/div>\n\n\n
An example of a table with scope<\/a> with various screen readers. <\/p>\n\n\n\n
\n\n\n\n
Complex Tables<\/h3>\n\n\n\n
Complex tables have multiple header rows, columns, and merged cells.  <\/p>\n\n\n\n
Error Type<\/strong>: Error\/Alert<\/p>\n\n\n\n
Best Practice<\/strong>: If possible, simplify the table. Can the table be split into multiple, simpler tables? These kinds of tables will most likely need to be created with HTML. Built-in applications or add-ons do not always support adding multiple header rows, columns, or merged cells.<\/p>\n\n\n\n
See the Web Accessibility Initiative’s Tables with Irregular Headers<\/a> and Tables with Multi-Level Headers<\/a><\/p>\n\n\n\n
\n\n\n\n
Empty Cells<\/h3>\n\n\n\n
Add screen reader-only text to empty cells, especially for a complex table where the cell is associated with multiple header rows, columns, and merged cells.<\/p>\n\n\n\n
Best Practice<\/strong>: When using assistive technology to navigate a table with headers usign scope, an empty cell doesn’t provide enough information.<\/span> Adding screen reader-only text adds more context to the data that isn’t missed by sighted users. <\/p>\n\n\n\n
\n\n\n
\r\n    
    \n
\r\n    \n
<\/div>\n\n
\r\n        \n\n
Accessibility Checks <\/h2>\n\n\n\n
Use this checklist as a guide to ensure your tables are in an accessible format.<\/p>\n\n\n\n