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!

[aayushi_mali]

I just wanted to follow up on my previous reply regarding the accessibility of icon-only ListGrid cells. Thank you for your time and assistance.

[Isomorphic]

We see the problem. The narrow case you mentioned can be fixed such that you won't need to change your app code, however, for a coherent fix (the only kind we do!) we will need to add a setting to control whether valueIcons are considered presentation only or have semantic value.

The total work will be around 10-14 hours with documentation. Before we do it, just wanted to verify you want this fixed (no new expense for you - you already have enough hours banked).

[Isomorphic]

Just to follow up here - we're ready to work on this issue but we are paused waiting for your confirmation.

[aayushi_mali]

Thank you for the follow up. I will confirm with you shortly.

[aayushi_mali]

I wanted to confirm my understanding regarding this fix.

As per the internal discussion with my team, our understanding is:

• If we request an immediate fix, it will be treated as a priority bug fix and the estimated 10-14 hours will be counted from our paid support plan.
• If we are willing to wait, the issue can be resolved later as part of your standard development process, without consuming our paid support hours immediately.

Could you please confirm whether this understanding is correct?

[Isomorphic]

aayhushi, it seems that you just minutes ago sent this exact question to our sales staff, and then posted it inappropriately on the forums as well. As we explained to you earlier today, this triggers an alert, triage, assignment, etc.

Please do not send the same questions via multiple channels. You create extra work this way, spending booked hours.

You have already been answered in the other channel, and the answer is the same as you have received here.