{"id":28,"date":"2023-01-06T08:00:56","date_gmt":"2023-01-06T16:00:56","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=28"},"modified":"2025-12-11T16:24:51","modified_gmt":"2025-12-12T00:24:51","slug":"tables","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"
\r\n \n
\r\n\t\n\n

Importance of Tables<\/h2>\n\n\n\n

Accessible tables are used for comparing information or data, rather than layout. Using a table for data, identifying its table headers, and providing a table summary, or description improves both the accessibility and usability for all people. This is especially important for those using assistive technology<\/a> to access the table information.<\/p>\n\n\n\n

Tables fall into two categories, data and layout.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n

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

Data Tables<\/h3>\n\n\n\n

Data tables provide a way to compare information in cells when used with properly formatted header rows or columns. Table headers allow people to navigate through the table and understand the relationship of data. Assistive technologies call out the headers when relaying the contents of the cell.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n

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

Sample Data Table<\/h4>\n\n\n\n
Time<\/th>Event<\/th>Presenter<\/th><\/tr><\/thead>
8:00 AM<\/td>Glasses: The Ultimate Disguise <\/td>Superman<\/td><\/tr>
9:00 AM<\/td>Polygraph 101: Lassoing the Truth<\/td>Wonder Woman<\/td><\/tr>
10:00 AM<\/td>10 Ways to Use Darkness to your Advantage<\/td>Batman<\/td><\/tr><\/tbody><\/table>
In a data table, assistive technology uses table headers (e.g., Time, Event, and Presenter) as reference points to help navigate the table.<\/span>
Example: Assistive technology would read this data table for row 2 as \u201cRow 3, Time<\/strong>, column 1, 9:00 AM. Event<\/strong>, column 2, Polygraph 101: Lassoing the Truth. Presenter<\/strong>, Column 3, Wonder Woman.\u201d<\/figcaption><\/figure>\n\n\n\n

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

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

Simple and Complex Data Tables<\/h3>\n\n\n\n

Simple Tables<\/h4>\n\n\n\n

Simple tables may have up to one header row and one header column. They do not have merged or split cells. When using assistive technology with simple tables it is easier to understand the relationship of the information and navigate through the table.<\/p>\n\n\n\n

Most application formatting tools<\/a> can only properly markup simple tables. When converting from one digital format to another, simple tables create fewer accessibility issues and less time remediating.<\/p>\n\n\n\n

Complex Data Tables<\/h4>\n\n\n\n

Complex tables have multiple header rows and header columns, including merged and split cells. While assistive technology can navigate through complex tables when formatted correctly, complex tables can still hinder a person\u2019s ability to understand the relationship of the information. In some cases, they must keep a mental framework of the complex table information in their head.<\/p>\n\n\n\n

Complex tables need additional markup to make them accessible. This additional markup may not be available in standard application table formatting tools to support complex tables. When converting from one digital format to another, complex tables create more accessibility issues and additional time remediating.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n

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

Layout Tables<\/h3>\n\n\n\n

Using layout tables is discouraged. Layout tables are not meant for comparing information and do not have table headers. They are generally used to visually align content in specific places. It requires extra effort for people using assistive technology to understand and navigate through layout table content. Plus, on small screens, layout tables tend to hinder the alignment of content.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n

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

Sample Layout Table<\/h4>\n\n\n\n
\"Batman\"Batman<\/td>\"Superman\"Superman<\/td>\"WonderWonder Woman<\/td><\/tr>
10:00 AM<\/td>8:00 AM<\/td>9:00 AM<\/td><\/tr>
10 Ways to Use Darkness to your Advantage<\/td>Glasses: The Ultimate Design<\/td>Polygraph 101: Lassoing the Truth<\/td><\/tr><\/tbody><\/table>
Layout table cells are read left to right, top to bottom.<\/span>
Example: Assistive technology would read this layout table as “Row 1 Column 1 Graphic Batman, Column 2 Graphic Superman, Column 3 Graphic Wonder Woman. Row 2 Column 1 10:00 AM, Column 2 8:00 AM, Column 3 9:00 AM., Row 3 Column 1 10 Ways to Use Darkness to your Advantage, Column 2 Glasses: The Ultimate Disguise, Column 3 Polygraph 101: Lassoing the Truth.”<\/figcaption><\/figure>\n\n<\/div>\r\n\n<\/div>\n\n\n
\n\n\n
\r\n
\n
\r\n \n
<\/div>\n\n
\r\n \n\n

Common Errors<\/h2>\n\n\n\n

These common situations hinder the accessibility and usability of the content in tables.<\/p>\n\n\n\n