Why does the Data Grid render the <thead> below the <tbody> in the DOM? Would this qualify as bug/defect? As see on your example page: (https://www.igniteui.com/grid/html-binding ) (and in our project). The <thead> renders under the <tbody> which causes the tabbing order to navigate out-of-sequence. This is confusing for screen-reader and keyboard-only users and is considered invalid HTML. Our project got flagged by accessibility testers so we need this fixed.
The code of your Data Grid also throws several errors in the HTML validator (https://validator.w3.org/) The role attributes are not used correctly. Since the rendered code is using <table> tags, there's no reason to use role attributes at all for basic tables, just use proper HTML tags and the 'scope' attribute on <th> tags.
Hello,
Thank you for posting in our community!
I have been looking into your question and after an investigation, I was able to reproduce the behavior described where the thead element is rendered after the tbody element. This behavior seems related to the autoGenerateColumns option and whether any columns are defined in the columns collection. What I mean by this is that this behavior is not reproducible when the grid’s columns are defined and the autoGenerateColumns option is set to false or is omitted.
Here can be found a small sample for your reference.
Having this in mind, what I would suggest is logging this behavior in our GitHub repository here.
Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team and get notifications whenever new information is available.
In the meantime, if possible, as a workaround, I suggest setting the autoGenerateColumns option to false (or omitting it) and defining your columns in the columns collection.
Regarding your second question, as mentioned in our Accessibility Compliance (igGrid) topic here, the igGrid has been designed so that it follows the WAI-ARIA specification and guidelines. Additionally, the igGrid is a JavaScript-based data grid that renders HTML tables but adds a lot of interactivity (sorting, filtering, paging, etc.). Because of this, the ARIA roles are used intentionally to enhance accessibility for screen readers and assistive technologies.
Considering this, the igGrid is not a basic table – it is a complex, interactive widget, and the defined roles help screen readers understand that the table behaves more like a spreadsheet or application, not just a static data table.
Please check out the resources provided and sample, and let me know if you need any further information on the matter.
Sincerely, Riva Ivanova Software Developer