WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to give screen reader instructions for a grid

for

From: Dean.Vasile
Date: Mar 4, 2024 9:56AM

Hey Mark,
I was interested in this issue, but I didn't have the answer. So, I asked my buddy Chat, and here is what he said:
[It sounds like you're facing a challenge with making keyboard navigation instructions accessible to screen reader users in your AG Grid setup. Here are a few suggestions you could try to improve accessibility:

1. Use aria-describedby with an ID reference: Instead of using aria-label directly on the <div role="grid">, try using aria-describedby with a reference to an element containing the instructions. This can help screen readers associate the instructions with the grid.
htmlCopy code
<div role="grid" aria-describedby="grid-instructions"> <!-- Grid content --> </div><div id="grid-instructions" class="visually-hidden"> Keyboard navigation instructions: Use arrow keys to navigate rows and columns. </div>
In this example, visually-hidden class is used to hide the instructions visually but keep them accessible to screen readers.

1. Ensure focusability of the grid: Make sure that the grid container is focusable, so screen readers can reach it easily. You may need to set tabindex="0" on the grid container if it's not already focusable.
2. Provide keyboard navigation instructions in other accessible ways: Consider providing keyboard navigation instructions outside of the grid as well, such as in a prominent location on the page or in a help section. This ensures that users can access the instructions regardless of how they navigate to the grid.
3. Test with different screen readers: While you mentioned that most users will likely use JAWS, it's still a good idea to test with other screen readers like NVDA or VoiceOver to ensure compatibility across different assistive technologies.
4. Check for JavaScript focus management: Ensure that JavaScript event handlers or focus management within the grid aren't interfering with screen reader navigation.
5. Consider contacting the AG Grid support: If the issue persists, you might want to reach out to AG Grid support for assistance. They may have specific recommendations or solutions tailored to their grid component.
By combining these techniques, you can hopefully improve the accessibility of keyboard navigation instructions for screen reader users in your AG Grid implementation.]
Please let me know if this helps, or if it is trash😊
Dino

Dean Vasile


617-799-1162

On Mar 4, 2024, at 11:06 AM, Mark Magennis < <EMAIL REMOVED> > wrote:

Hello all, I need some help. I have a page that's using AG Grid for a data table (non-negotiable), so it's coded as <div role="grid"> and has its own keyboard navigation. I want to tell screen reader users what the keyboard navigation is, so I added instructions in an aria-label on the <div role="grid">. Problem is, I suspect most users will probably arrow into the grid and the aria-label is only read by JAWS when you Tab into the grid, not when you arrow into it. Most of the screen reader users will be using JAWS. I've tried adding the aria-label to other elements within the grid, I've tried using aria-labelledby and aria-describedby instead of aria-label, but I can't get JAWS to read the instructions. I've tried duplicating the instructions in a hidden text span before the grid but it proves quite difficult to give instructions that will work from that point. Any ideas on other possible solutions?

Thanks,
Mark