The igGrid table's contents are announced in one go when focused

[kchanda24]

During a recent evaluation by a third-party accessibility vendor, we found out that when navigation through the containing page and upon reaching the datagrid, the entire content of the datagrid is announced in one go by the screen reader. 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 :

• ignite-ui version: any
• browser: any

Steps to reproduce :

Go to this sample.

Use NVDA or other accessibility tool.
Reach the data table

Result :

The screen reader reads the entire content of the data table in one go.

Expected Result :

The screen reader should avoid the announcement of the entire content in one go, it will confuse the user.

This additional tab including with entire content announcement should be removed.

[RivaIvanova]

Hello @kchanda24,

I have been looking into this matter and what I can say is that the tabIndex attribute is set in order for the igGrid container to be focusable. This allows additional logic to be performed when the igGrid container receives focus.

For example, the following code will select the first row when the grid is focused.

var gridContainer = $("#grid").igGrid("container");
$(gridContainer).on("focus", function () {
   $("#grid").igGridSelection("selectRow", 0);
});

If the tabIndex attribute is removed, the igGrid will not be focusable and custom logic cannot be implemented when the grid is focused, i.e., the above code cannot be executed.

Additionally, if you do not need to execute additional logic on focus, you could remove the tabIndex attribute by targeting the ui-iggrid CSS class.

$(".ui-iggrid").removeAttr("tabindex");

This CSS class is always applied to the top container element which will allow you to target multiple grids and execute the above code only once.

I hope this helps implement your requirements.

[kchanda24]

Hi @RivaIvanova! Thanks for looking into this. I understand what you are saying. But the core accessibility issue remains as the tabIndex causes assistive technologies to read out all the content under the grid container, in this case is the full data content of igGrid.

I would suggest to remove the tabIndex and look for alternate ways of providing the custom logic ensuring that assistive technologies like NVDA, does not read out the whole datatable or hiding the container from assistive technologies so that they do not read the entire content.