WebAIM - Web Accessibility In Mind

E-mail List Archives

How to give screen reader instructions for a grid

for

From: Mark Magennis
Date: Mar 4, 2024 9:06AM

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