Table Headers Must Refer to Data Cells

Issue/Question

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

Table headers in a data table must refer to data cells

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 header cells that do not coordinate with data cells. This is caused by a table header cell using the wrong scope, such as a row header with the scope of column or vice versa. Screen readers have a specific way of announcing tables. When tables are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.

Resolution

If a table with header cells exists, ensure that they reference elements with text available to screen readers using scope correctly.

  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 pop-up menu.
  6. Select Cell Properties.
  7. Change Scope dropdown to either Row or Column, depending on which the header is used.
  8. Repeat for all table header cells.
  9. Save page.
  10. Click the Publish button to run the accessibility final check again. When the issue is resolved it will no longer display in the accessibility check.
Print Article