Premium support for our pure JavaScript UI components
Hi,
We are using the Tree Grid and have noticed a couple of accessibility issues relating to the tree column.
- Screen readers cannot read whether a tree row is expanded or collapsed.
- The icons added to grid rows (using
iconCls
on GridRowModel
) do not have any alternate text that's readable by screen readers. We need to provide an accessible alternative to icons.
Thanks.
This is the DOM of a branch node which is collapsed:
- Screenshot 2022-05-18 at 16.36.36.png (41.58 KiB) Viewed 427 times
This is the DOM of the same branch node when expanded:
- Screenshot 2022-05-18 at 16.37.43.png (49.19 KiB) Viewed 427 times
As you can see, the aria-expanded
property is set correctly. I cannot do much more than ensure that that is set.
What kind of alt
would you like to see in the icon images?
Also, I'm not sure how alt text would work. Those icons are not images. It's a unicode character using Font Awesome:
- Screenshot 2022-05-18 at 16.41.54.png (97.18 KiB) Viewed 427 times
How should I modify the DOM to produce the kind of output that you require? All can be done, I just need to know what.
Thanks for your reply Animal. I didn't realise the aria-expanded
attribute was set, our screen reader isn't picking it up for some reason, which is probably a fault with the screen reader.
I understand the icons are just unicode characters. Ideally we would like to be able to specify some alternate text to be read along with the cell value. I think setting the title
attribute on the <i>
tag and removing the role="presentation"
works. However, I imagine this is something that should be configurable.
Our use case for icons is to identify 3 different types of row in our grid. Without some kind of alternate text, it is impossible for screen reader users to distinguish the 3 types.
I see, that makes sense. Thank you!