Grid lacks table headers

[Entropy]

A 508 expert is reviewing our app and has taken issue with the fact that the ExtGrid doesn't write it's column headers as TH elements. This means screenreaders don't connect the column header to the data. Is there a way to get the grid to write the thead and th tags?

This is Ext 6.2

[nohuhu]

There is no point in using <thead> and <th> tags for grid column headers, because Ext JS grid is not contained within a single <table> tag. In fact every row is a separate <table> tag (for performance reasons), and column headers are widgets in a separate <div> container. Using <th> tags for column headers doesn't work because in HTML there is no way to map <thead> in one table to <tbody> in another table.

To work around this limitation, we are using ARIA attributes to transform our grid's HTML markup into a virtual "accessible widget" that a browser can recognize and publish to assistive technologies such as screen readers. Support for ARIA features varies greatly among browsers, Firefox is best at this.

When evaluating accessibility, it is helpful to keep in mind that Ext JS is used to build applications as opposed to web pages. Not all criteria applicable to web pages are going to work for applications, and there are tradeoffs between rich functionality and accessibility.

[maciej.zabielski]

I have noticed another warning related to grids and "rowgroup"
For tree view and simple grid views, an Chrome ARIA compatibility checker will report that some "[role]s are not contained by their required parent element".


As you can see from the examples below, this seems to affect only role="rowgroup"

<div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top
 x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-unselectable x-noborder-rl"
 style="height: 0px; width: 340px; left: 0px; top: 72px;" role="rowgroup" aria-hidden="false" aria-disabled="false" 
id="headercontainer-1019" data-exttouchaction="14">

<div class="x-tree-view x-fit-item x-tree-view-default x-unselectable x-scroller" role="rowgroup" 
id="treeview-1020" tabindex="0" style="overflow: hidden auto; margin: 0px; width: 340px; height: 637px;" 
data-componentid="treeview-1020">

<div class="x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top 
x-grid-header-ct-default-docked-top x-box-layout-ct x-scroller x-unselectable x-noborder-trl" role="rowgroup" 
aria-hidden="false" aria-disabled="false" id="headercontainer-1116" data-exttouchaction="14" 
style="overflow: hidden; width: 340px; left: 0px; top: 0px;">

<div class="x-grid-view x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable x-scroller" 
role="rowgroup" id="tableview-1117" tabindex="0" data-componentid="tableview-1117" 
style="overflow: hidden auto; margin: 0px; width: 340px; height: 145px;">

It seems that these elements are correctly placed as child elements of
role="treegrid"


So I don't know why Chrome is reporting this as an issue?
Is this something that you are familiar with?