WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to give screen reader instructions for a grid

for

From: tim.harshbarger@deque.com
Date: Mar 4, 2024 10:42AM

The one other suggestion I would make is that if you think screen reader users will need instructions, the same will be true of those who rely on the keyboard but don't use a screen reader. So don't make this information solely available to screen reader users.


The reality is that screen reader users are just a small subset of people who rely on the keyboard. Most people who rely on keyboard don't use a screen reader at all.

Thanks!
Tim
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: Monday, March 4, 2024 11:36 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] How to give screen reader instructions for a grid

If the keyboard navigation follows that of a standard grid (i.e. arrow keys navigate between cells) you don't need much in the way of extra instructions.
There are various practices you need to support for this to be natural:
* If the gridcell has a focusable control inside it, focus should go directly to that control when user navigates to the cell with the arrow keys, it should not go on the cell.
However, If the cell does not have a focusable descendants, then focus should go on the cell If the cell has multiple focusable elements inside it you are going to hvae a lot of keyboard and screen reader confusion, can users arrow or tab between those etc. In this scenario you need to either change the decide or create a menu button that users have to activate to see the interactive options (see the example grids for data grid in the ARIA Authoring Practices, test the one where you can assign a new category and observe how that works) One ting specific to AG Grid, if authors decide to pin one of the columns in the grid the grid becomes inaccessible, there must be an option to unpin all columns (if pinned), at least until AG Grid gets its act together and fixes this.

I have used a combination of "how to use this grid" screen reader only section before the grid, starting with an h3 heading and aria-describedby on the grid control saying (for screen reader instructions navigate to previous h3 heaing). It isn't elegant, it does not always work but it is about as good as we can make it If you page has a skip link you could attach a tooltip to that link saying (if you want keyboard and screen reader instructions for a grid go to x" because only screen reader and keyboard users will interact with the skip link.

aG Grid is a bit of a mixed bag when it comes to accessibility, but if you stick to the principles of keeping one data and one interactive control in each cell, then you end up with a mostly accessible experience.



On 3/4/24, Mark Magennis < <EMAIL REMOVED> > wrote:
> I appreciate you passing on your buddy's suggestions Dean. They're all
> sensible but I've already considered or tried all of them out and
> found that they either don't work or they raise other issues. They're
> not trash though.
>
> Thanks,
> Mark
> > From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of
> <EMAIL REMOVED> < <EMAIL REMOVED> >
> Sent: Monday 4 March 2024 16:56
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [EXTERNAL] Re: [WebAIM] How to give screen reader
> instructions for a grid
>
> [You don't often get email from <EMAIL REMOVED> . Learn why
> this is important at https://aka.ms/LearnAboutSenderIdentification ]
>
> 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
>
> > > https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7Cfda3d437e
> 9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C6
> 38451682308836339%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoi
> V2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=qHM8%2FJeMip
> 0xqlSyuyOJtl7TfNb0OD6sT%2FAtjozMueM%3D&reserved=0<http://list.webaim.o
> rg/>
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft
> .com%7Cfda3d437e9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a
> 03f4%7C0%7C0%7C638451682308850154%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4w
> LjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sd
> ata=cg9IYGdbrBORE1bsXeh4CwJJc7wGRunyQclhWICvdts%3D&reserved=0<http://w
> ebaim.org/discussion/archives> > <EMAIL REMOVED>
> > > https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7Cfda3d437e
> 9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C6
> 38451682308855463%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoi
> V2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=lH5RtjTbv%2F
> dadKuBbkqpXYmK8boq6dxHy3bJk1heP%2B0%3D&reserved=0<http://list.webaim.o
> rg/>
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft
> .com%7Cfda3d437e9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a
> 03f4%7C0%7C0%7C638451682308859885%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4w
> LjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sd
> ata=UOGvCOTF%2F465JznoJ6GwaBqYpLjS0o4rwG31oIQKdtA%3D&reserved=0<http:/
> /webaim.org/discussion/archives> > <EMAIL REMOVED>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.