We have many reports that contain grids using Table controls. We are using the HTML Report Viewer with the enableAccessibility option set to “true” to display these reports to application users.
Using this configuration, the report when run in a browser generates markup using absolutely positioned DIVs instead of TABLE tags for the grids in the report. The accessibility company provided documentation that the generated report content is in violation of WCAG 2.1 A, 4.1.2, Name Value Role since the generated report content is neither a semantic HTML table nor adheres to the ARIA table pattern.
Since Reporting Tables are rendered as DIV elements, you need to ensure they implement the following ARIA Design Pattern specifications:
- The table container needs role="table".
- Each row container needs role="row" and to be either a DOM descendant of or owned by the table element or an element with role="rowgroup".
- Each cell must be either a DOM descendant of or owned by a row element and to have one of the following roles:
- columnheader if the cell contains a title or header information for the column.
- rowheader if the cell contains the title or header information for the row.
- cell if the cell does not contain column or row header information.
- Remove the aria-label from each cell. Following this design pattern, only the element with role="table" should have an aria-label or aria-labelledby value to provide an accessible name.
- If there is an element in the user interface that serves as a label for the table, the table element needs an aria-labelledby property with the value as the ID of the labeling element. Otherwise, a label must be specified for the table element using aria-label.
- If the table has a caption or description, the table element needs an aria-describedby property with the value as the ID of the element containing the description.
- After these remediations, it should no longer be necessary for the cells to be focusable unless they have an interactive function. Removing the tabindex from the cells will also reduce the number of unnecessary tab stops.