Table Cells That Use the Headers Attribute Must Only Refer to Cells in the Same Table

Issue/Question

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

table cells that use the headers attribute must only refer to cells in the same table

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 table with multiple table header cells for columns and rows. Screen readers have a specific way of announcing tables. When tables are not properly marked up, this creates opportunity for confusing or inaccurate screen reader output. Complicated tables with multiple headers required the scope property to differentiate them.

Resolution

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

If you wish to make the table accessible follow these steps to apply the correct scope to the table headers:

  1. Click  Yellow Light Bulb to check out page.
  2. Click  Edit tab.
  3. Click Edit button on content area where table is located.
  4. Right click in header cell.
    Note: See Add WKU Styling to Your Table to learn how to create table headers and style them WKU red.
  5. Hover over Cell in the pop-up menu.
  6. Select Cell Properties.
  7. Change Scope dropdown to either Row or Column, depending on which the header is for.
  8. Repeat for all table header cells.
  9. Save page.
  10. Click Publish button to run accessibility final check again. When the issue is resolved it will no longer display in the accessibility check.
Print Article