Non-Empty TD Elements Must Have Table Header

Instructions how to fix the accessibility final check serious problem: Non-empty <td> elements in larger <table> must have an associated table header.

Issue/Question

When I run a Page Check I get the following Serious Problem: 

Non-empty <td> elements in larger <table> must have an associated table header

Environment

• Web CMS

Cause

Final Checks evaluate all code on a page and detect accessibility issues not meeting WCAG 2.0 (Level AA) standards. 

It detected the page contains a large table (3 or more cells wide and 3 or more cells high) that has a cell with data and no coordinating header for the column or row it is contained in. Screen readers have a specific way of announcing tables. When tables do not have the correct header structure, screen reader users cannot visually perceive the relationships between the cells and their contents.

Resolution

Tables with more than one column or row of headers can be difficult to make accessible through the WYSIWYG. Instead, consider replacing the table with a snippet such as cards or columns to group sets data, or splitting the table into multiple tables.

To fix the problem, ensure each non-empty data cell in a large table has one or more table headers.

1. Click Yellow Light Bulb to check out page.
2. Click  Edit tab.
3. Click  Edit button on content area where cell with no header is located.
4. Click on table containing cell using the text displayed in the Source Code portion of error.
5. Ensure table has table headers or create them.
   Note: See Add WKU Styling to Your Table to learn how to create and style table headers.
6. Add text to every table header in the row if they do not have one.
7. Remove rows or columns lacking a header.
   1. Right Click inside row/column.
   2. Hover over Row or Column in menu.
   3. Click Remove Row or Remove Column.
8. Save page.
9. Click Publish button to run accessibility final check again. When the issue is resolved it will no longer display in the accessibility check.