How to make icon-only ListGridField accessible to screen readers in SmartGWT?

[aayushi_mali]

Hi, I am using setValueIcons() with setShowValueIconOnly(true) in a ListGridField, which renders icons as CSS background images. Screen readers can’t read these icons since there’s no alt text or aria-label.

I tried adding aria-label to ListGridField element, but doesn't have access to setAriaState() property, it has prompt message showing, but screen readers still don’t pick up the descriptions.

What’s the best way to make these icon-only cells accessible?

Thanks!

[Isomorphic]

A few things:

1) Have you read our Accessibility Overview, and have you turned on ScreenReader mode?

2) how are you providing valueIcon media - we have several modes, including now SVG

3) are you looking solely at the image or have you considered the ARIA markup that is already on the cell?

If you aren't in screenReader mode, you're missing most of the markup, so that's likely the problem. Having turned on ScreenReader mode, please let us know if you have trouble with a real screen reader, and what the actual problem is

[aayushi_mali]

Thank you for your reference.

To answer your questions:

1) Yes, ScreenReader mode is enabled in our application using SC.setScreenReaderMode(true) in the onModuleLoad() method.

2) To provide value icons, we are using a HashMap<String, String> with PNG file paths, which I pass to setValueIcons(valueIconsMap) on the ListGridField. We also set the setShowValueIconOnly(true) to display only the icon without text.

3) These icons are rendered as CSS background images in the grid cells, and no text alternative (like aria-label) seems to be available to screen readers. I understand the framework might add ARIA markup to the cell, but as there is no text and only icon is showing, screen readers (e.g., NVDA) do not read anything when focusing on these icon-only cells. It is ok for us if screen reader can read the ARIA markup that is already applied to the cell. Could you please suggest if there is a preferred approach for associating accessible text with icon-only cells?

Thanks again!