Scope Attribute Should Be Used Correctly

Issue/Question

When I run a Page Check I get the following Moderate or Critical Problem: 

scope attribute should be used correctly

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 containing a cell with an incorrect scope property set.

Scope makes table navigation much easier for screen reader users provided it is used correctly. Incorrectly used, scope can make table navigation much harder and less efficient.

A screen reader operates under the assumption a table has a header and that this header specifies a scope. Because of how screen readers function, having an accurate header makes viewing a table far more accessible and more efficient for people who use the device.

Resolution

If a table with header cells exists, ensure that they reference elements with text available to screen readers using scope correctly. Remove scope from any table data cells that are not a header.

  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 for which the header is used.
  8. Click Save in pop-up menu.
  9. Repeat for all table header cells.
  10. Select all table data cells (non-headers) by highlighting them.
  11. Right click and hover over Cell in pop-up menu.
  12. Select Cell Properties.
  13. Change Scope to None.
  14. Click Save in pop-up menu.
  15. Save page.
  16. 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