search

IgniteUI / ignite-ui

Ignite UI for jQuery by Infragistics
https://bit.ly/2kuu1fT
Other
477 stars 84 forks source link

The structure of the igGrid data table is not semantically correct #2248

Closed kchanda24 closed 4 months ago

kchanda24 commented 4 months ago

Description

During a recent evaluation by a third-party accessibility vendor, it we found out that in the data table of the igGrid the screen reader reads table header elements as one table and its data cells as a different table.This is not aligned with WCAG 2.0 Level A guidelines. The corresponding WCAG success criteria is 1.3.1 - Info and Relationships.

Version and Browser used :

Steps to reproduce

  1. Go to this sample.
  2. Use NVDA or other accessibility tool.
  3. Reach the data table
  4. Tab though the headers and data

Result

The screen reader reads table header elements as one table and its data cells as a different table.

Expected result

What is the expected result after following the steps to reproduce? The screen reader should read the data and headers as a single table and the relationships between header and elements should be proper.

When data tables are not coded according to standards, screen reader users will find it difficult to understand the data relationships.

If there is no way to combine the tables into one their should be a way to define relationships such that assistive technologies can understand the tables correctly.

Resources

Accessible tables: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#Accessibility_concerns https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/

georgianastasov commented 4 months ago

After discussions with our development team and clarification of the scenario and all related behaviors, what became clear is that the igGrid control was created by default with fixed headers and dividing the grid itself into two tables, one for the headers and the other for the content because many of the features related to igGrid control are based and work exactly on this structure. Additionally, all grid related property events and methods as well as CSS styles are also bound to this header table structure and grid table content.

Therefore, taking action on changing this behavior of the igGrid control to restructure the two headers and grid content tables to a single table will affect a lot of the features of the igGrid control, some properties, events and methods as well as CSS styles. This will lead to complete restructuring of the grid, which the development team currently does not plan to do. The Ignite UI jQuery igGrid will stick to its current structure and operation.