IGT keyboard test Datatable (role=grid) issues

[dkdewitt]

Product

axe-core

Question

IGT table tests state that
"The Table IGT does not currently support ARIA grids and tables (role="grid" and role="table")." when I run the Keyboard IGT it is failing for "The element's role is missing or is not appropriate for the element's function." on the table header. The th element and aria attributes are created within the library. Because the Table IGT does not support these aria grids and tables will that cause issues on the Keyboard IGT?

Library used for tables
https://datatables.net/

[thuey]

Hi @dkdewitt 👋

Sorry, I don't fully understand the question. The disclaimer in the Table IGT that it does not support ARIA grids and tables is just referring to the fact that it requires tables be created using HTML <table>, <th>, <td>, etc. elements and not things like <div role="table"> or <div role="gridcell">.

The example on the home page for https://datatables.net/ looks like it is using HTML table elements, so it seems like it should be okay.

Hopefully that helps. If not, could you elaborate on your question and/or provide a more specific example?

[dkdewitt]

@thuey I get the same issue when running the keyboard IGT tests on the example on the datatables homepage
I tried a few different combinations of role and still have issues but I assume since this is a native html table this shouldn t be the case correct?

This is the generated header for the table
<th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 123px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>

[thuey]

@dkdewitt Thanks for the clarification. I understand your question now.

The disclaimer in the Table IGT is unrelated to this.

The th's role needs to be a columnheader so that it can be properly interpreted as a table header. However, as you have come across, a columnheader is not recognized as an "interactive" role for assistive technology.

The preferred approach for having an "interactive" table header is to make the child of the table header a button, which assistive technology will recognize as interactive.

Here is an example from W3C: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/

[dkdewitt]

@thuey I was thinking that may be an issue seeing the deque example had buttons. I'll check with the library maintainers to see if they have an option for this or let them know they may not be compliant currently.

Linking datatables forum post for future references
https://datatables.net/forums/discussion/76050/508-compliance-column-headers-sorting/p1?new=1