WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to give screen reader instructions for a grid

for

From: Brooks Newton
Date: Mar 4, 2024 11:51AM

I like Tim's point about providing instructions for all. I'd fail a
feature that relies upon assistive technology to provide the necessary
instructions and feedback for operation users with a wide range of
disabilities need to access content. In fact I've failed whole
swaths/sites/platforms of content for making this mistake.

Brooks

On Mon, Mar 4, 2024 at 11:42 AM < <EMAIL REMOVED> > wrote:

> 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.
> > > at http://webaim.org/discussion/archives
> >
> > > > >