-
Type:
Bug
-
Resolution: Invalid
-
Priority:
Low
-
None
-
Affects Version/s: 7.15.0
-
Component/s: Accessibility
-
Severity 3 - Minor
Issue Summary
The data table has missing or incomplete header cell markup.
Element:
1) Type your task here, using "@" to assign to a user and "//" to select a due date
2) Customise the home page - Click "Edit" to start editing your home page
3) Create additional pages - Click "Create" to choose a blank page or template
Location:
"Table" appears after activating the "Created by me" button in the main content
Note: Column headers are marked up properly but row headers aren't marked as such.
Steps to Reproduce
- Step 1
Actual Results
Actual results
Expected Results
Expected Results
Fix Information
RULE :
Table headers MUST be designated with <th>.
HOW TO FIX:
Fix this issue by doing ALL of the following:
1. Mark all column header and/or row header cells with a <th> element.
2. Ensure that header cell and data cell relationships are correctly conveyed according to the complexity of the table.
REFERENCE:
Deque University: https://dequeuniversity.com/class/semantic-structure2/tables/
W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/tables/
BACKGROUND:
People who are blind cannot see the organizational structure of a table with data arranged in rows and columns with corresponding header cells. In order for screen reader users to understand the logical relationships of data arranged in a table, tables need HTML markup that indicates header cells and data cells and defines their relationship. When tables are marked correctly, screen reader users are able to navigate data tables from cell to cell, in a multi-directional way (up, down, right, left), much like navigating a spreadsheet. As they move from cell to cell, screen readers will read the associated header labels.
Screenshot
Screen Recording
screen recording
Workaround
workaround
Bug Ref: 725888