Details
-
Bug
-
Resolution: Fixed
-
Low
-
8.4.0
-
8.04
-
Severity 3 - Minor
-
Description
Issue Summary
On the page, the Screen reader doesn't announce row headers for data tables present in the main content area.
Note: There are multiple issues found on the page with regard to row headers inside the data tables on the page.
Steps to Reproduce
- Open the page.
- Navigate to the data tables present in the main content area.
- For instance, Inspect the codes of "Unresolved", "Fixed", "Done" and so on links inside the table.
- Observe that the links are marked-up using <td> elements inappropriately.
Screen Recording
Screen Recording 2023-09-11 at 11.08.04 AM.mov
Actual Result
The links present inside the table such as "Unresolved", "Fixed", "Done" and so on are not programmatically marked-up as row headers. As a result, Screen reader users find it difficult to understand the table structure effectively.
Expected Results
The Row headers and column headers should be identified for the associated data of the table by screen readers for their users.
Use <th> tags to identify row headers such as "Unresolved", "Fixed", "Done" and so on and also provide "scope" attribute with "row" as a value inside <th> elements.
To implement this.
The row and cfolumn headers must be defined using <th> element and also provide "Scope" attribute with "row" and "col" as a value respectively inside <th> elements.
The scope attribute tells the browser and screen reader that every thing within column that is associated to the header with scope="col" in that column, and that a cell with scope="row" is a header for all cells in that row
Generally, all <th> elements should have "scope" attribute. Screen readers will identify whether it is a column or row header.
Code snippet
<table class="aui"> (...) <th scope="col" id="176214-stats-category" class="cell-type-collapsed">Resolution</th> <th scope="col" id="176214-stats-count" class="stats-gadget-numeric">Count</th> <th scope="col" id="176214-stats-percentage" colspan="2">Percentage</th> (...) <tbody><tr> <th scope="row" class="cell-type-collapsed" headers="176214-stats-category"><a href="https://jira.atlassian.com/issues/?jql=labels+%3D+ax-customer-escalated+AND+resolution+is+EMPTY">Unresolved</a></th></tr> (...) <tr> <th scope="row" class="cell-type-collapsed" headers="176214-stats-category"><a href="https://jira.atlassian.com/issues/?jql=labels+%3D+ax-customer-escalated+AND+resolution+%3D+Fixed"title="A fix for this issue is checked into the tree and tested.">Fixed</a></th> (...) </tr> (...) </tbody>(...) </table>
Workaround
Currently, there is no known workaround for this behaviour. A workaround will be added here when available.
Environment
MacBook Pro (14-inch, 2021)
macOs Ventura 13.5
Chrome - Version 115.0.5790.114 (Official Build) (x86_64)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2021
NVDA- Version 2020.3
Voiceover - Version Latest