screen reader does not read column headers when moving through rows

[frank1russo]

This issue is caused by having the column headers and each row in their own

structures. For true accessibility, the data in the grid cells need to be associated with the headers, so we're having trouble meeting our accessibility requirements.

Is there a plan to fix this soon, or is there a workaround?

[kfranqueiro]

dgrid (as well as other JS grid implementations) renders each row in a separate table in order to support scrolling of the grid body, lazy loading of rows, and other advanced features (such as ColumnSets, which actually involve nested tables). For that reason it's unlikely that the DOM structure can be simplified to a point where readers will "just work".

With that said, I'm open to suggestions to get the desired behavior as long as the workaround doesn't hamper performance.

What screen readers are you testing with?

[frank1russo]

We're testing both with Jaws on Firefox (not sure which version) and VoiceOver on iPad. I'm trying a recommended fix given to us by our accessibility group using aria-describedby. If it works, I'll share the solution, so maybe we can get it in the next version or the one after. I should be able to test the iPad option later today.

[kfranqueiro]

Interesting. I was actually wondering if adding aria-labelledby would be the solution (as I understood it, aria-describedby is expected to reference a node with a far more wordy description).

[frank1russo]

I thought that as well. I have a test for both. I'll let you know if either works.

[arias0906]

I was able to workaround this issue using renderCell which added the aria-label using something similar to the following: setAriaColumnLabel: function (object, value, node, options) { node.setAttribute("aria-label", "Column: " + this.label + ", Value: " + value); node.innerHTML = value; }, It tested fine in JAWS 15 / FF

That being said, it would be better if it did read the column headers. Additionally, if renderCell had a reference to the column header - that would probably be better than relying on "this".

[brandonpayton]

I can confirm that aria-labelledby causes the column name to be read along with the content by JAWS 15 / Chrome and the OSX ML screen reader w/ Chrome.

[jason0x43]

Do you have to remove the tabindex attribute from the scroller for that to work?

[brandonpayton]

I apologize; I should have been clearer. When working with other grids with very similar DOM structure, I have seen screen readers respond to aria-labelledby by reading the column header and the content where they did not respond the same to aria-describedby. I have not tested this directly with dgrid.

As you alluded, there is an issue with the tabindex="-1" attribute on the scroller causing the screen reader to miss the content rows and only count the header row, and I am not sure whether that will prevent a screen reader from properly consuming aria-labelledby. I'm planning to look at these issues in the next couple of days and hopefully end with a pull request.

[kfranqueiro]

The tabIndex = -1 has been removed from all but Firefox (which is the only browser it actually needs to be applied for), in e307c64276488820ca409690fddb608e1ec73e40. No changes have been made to add aria-labelledby attributes yet.

[sudheerravipati]

Hi Can you share the javascript code for this. I am using pq grid and in my case screen reader is not reading headers as header is in one table and data is in another table.

[Jianxia]

Same here. Is there any update on the status of the issue?