E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: How to give screen reader instructions for a grid

Number of posts in this thread: 8 (In chronological order)

From: Mark Magennis
Date: Mon, Mar 04 2024 9:06AM
Subject: How to give screen reader instructions for a grid
No previous message | Next message →

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

From: Dean.Vasile@outlook.com
Date: Mon, Mar 04 2024 9:56AM
Subject: Re: How to give screen reader instructions for a grid
← Previous message | Next message →

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">  </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 ADDRESS 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

From: Mark Magennis
Date: Mon, Mar 04 2024 10:08AM
Subject: Re: How to give screen reader instructions for a grid
← Previous message | Next message →

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 ADDRESS REMOVED = > on behalf of = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Sent: Monday 4 March 2024 16:56
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] Re: [WebAIM] How to give screen reader instructions for a grid

[You don't often get email from = EMAIL ADDRESS 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">  </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 ADDRESS 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

From: Birkir R. Gunnarsson
Date: Mon, Mar 04 2024 10:36AM
Subject: Re: How to give screen reader instructions for a grid
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
> = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
> Sent: Monday 4 March 2024 16:56
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [EXTERNAL] Re: [WebAIM] How to give screen reader instructions for
> a grid
>
> [You don't often get email from = EMAIL ADDRESS 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"> 
> </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 ADDRESS 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%7Cfda3d437e9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451682308836339%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=qHM8%2FJeMip0xqlSyuyOJtl7TfNb0OD6sT%2FAtjozMueM%3D&reserved=0<http://list.webaim.org/>;
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7Cfda3d437e9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451682308850154%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=cg9IYGdbrBORE1bsXeh4CwJJc7wGRunyQclhWICvdts%3D&reserved=0<http://webaim.org/discussion/archives>;
> > > > https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7Cfda3d437e9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451682308855463%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=lH5RtjTbv%2FdadKuBbkqpXYmK8boq6dxHy3bJk1heP%2B0%3D&reserved=0<http://list.webaim.org/>;
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7Cfda3d437e9fc40c3d86d08dc3c6c1f23%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451682308859885%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=UOGvCOTF%2F465JznoJ6GwaBqYpLjS0o4rwG31oIQKdtA%3D&reserved=0<http://webaim.org/discussion/archives>;
> > > > > >

--
Work hard. Have fun. Make history.

From: tim.harshbarger@deque.com
Date: Mon, Mar 04 2024 10:42AM
Subject: Re: How to give screen reader instructions for a grid
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Monday, March 4, 2024 11:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
> = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
> Sent: Monday 4 March 2024 16:56
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [EXTERNAL] Re: [WebAIM] How to give screen reader
> instructions for a grid
>
> [You don't often get email from = EMAIL ADDRESS 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">  </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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> > > archives at http://webaim.org/discussion/archives
> >

--
Work hard. Have fun. Make history.

From: Brooks Newton
Date: Mon, Mar 04 2024 11:51AM
Subject: Re: How to give screen reader instructions for a grid
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Monday, March 4, 2024 11:36 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
> > = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
> > Sent: Monday 4 March 2024 16:56
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: [EXTERNAL] Re: [WebAIM] How to give screen reader
> > instructions for a grid
> >
> > [You don't often get email from = EMAIL ADDRESS 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">  </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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > at http://webaim.org/discussion/archives
> >
> > > > >

From: Mark Magennis
Date: Wed, Mar 06 2024 3:53AM
Subject: Re: How to give screen reader instructions for a grid
← Previous message | Next message →

Thanks Birkir and Tim for giving your advice. Whilst I generally agree that if a widget like this works in the expected way - e.g. tab in, arrow around, tab out - then there should be no need to provide instructions, and this one does work in the expected way. However, the problem we have and the reason I want to provide a warning/instructions is that AG Grid is being used for all data grids in the product, including ones like this that are essentially just data tables and up until now have always been just data tables. So existing users will expect to navigate these 'tables' in the same way they always have. Another issue is that it seems to me that grids aren't very common in the wild and have the typical complexity of such widgets for users of modal screen readers such as JAWS and NVDA in that they require the user to enter forms mode to use the grid keyboard navigation. If the user tabs into the grid and has the default screen reader settings they will automatically enter forms mode but if they arrow into it, which in the context I'm looking at seems more likely, then they will not automatically enter forms mode. Entering forms mode manually requires them to press Enter but this doesn't work when they first get into the grid but only when they reach the first column header. Plus, a surprisingly large number of JAWS and NVDA users don't seem to be aware of the existence forms mode and how to manually enter or exit it. I know it's not the product vendor's job to teach someone how to use their access technology, but that is the environment we're working in and I think a simple warning/instruction would therefore help in this specific case. Regarding your point about non-screen-reading keyboard users Tim, yes you are generally right but in this case there are no interactive elements within the grid so keyboard users won't need to interact with it. The fact that the warning/instructions therefore only apply to screen reader users is another complication to think about when deciding how to present them. Plus the need to ensure that users will come across his guidance however they reach the grid.

Having played around with all sorts of ways of delivering this guidance I'm leaning towards a simple hidden link to a Help page that will appear on focus and explain grid navigation in general, including other grids in the product that are more complex and do contain many interactive elements.

Thanks,
Mark
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
Sent: Monday 4 March 2024 17:36
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] 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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
> = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
> Sent: Monday 4 March 2024 16:56
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [EXTERNAL] Re: [WebAIM] How to give screen reader instructions for
> a grid
>
> [You don't often get email from = EMAIL ADDRESS 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"> 
> </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 ADDRESS 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%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863140429%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=rtOFLvISZYebwIpSj6hkuOVL23%2F5PnVlySAJtw%2Ft%2BFc%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863148733%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=EjBsFAKnEYrZQlfGtbak4%2BW%2FHOiMzWXzLGfbV5Sfo60%3D&reserved=0><http://list.webaim.org/>;
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863152540%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata£xDRzR5LD7GWdD6jla8oqyxQ0hi4WYWQ3aJPiPIOSE%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863156160%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=m5lMTPsjKymAUgpq1tCOPsZ3uvAHIjW3bstqfghXQ8g%3D&reserved=0><http://webaim.org/discussion/archives>;
> > > > https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863159790%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=1v9%2BLGXnzyOANP30gE7bjufuo1fN6EvU3sREbeNyrBk%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863163375%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=6OlwvBbZSRMsJRk%2FksxlbeFiOFa41EOILljFGoP4BZE%3D&reserved=0><http://list.webaim.org/>;
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863167042%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdataácK3b6uE%2F9N%2FYYNqVpvaWgsu5jxT2g7cicFClL2s74%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863170508%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=3UzVX6%2FHu7vz53aAPN%2BNCN9BkAUG7SJhvO8QuJy5MwQ%3D&reserved=0><http://webaim.org/discussion/archives>;
> > > > > >

--
Work hard. Have fun. Make history.

From: Birkir R. Gunnarsson
Date: Wed, Mar 06 2024 5:57AM
Subject: Re: How to give screen reader instructions for a grid
← Previous message | No next message

Mark
If you are in communication with AG Grid you can echo complaints I've
sent to them a lot of times that they should offer a data table markup
as an option for authors.
For a screen reader it's a simple matter of replacing role="grid" with
role="table" on the container, and all instances of role="gridcell"
with role="cell" and voila, you have yourself a static table, for
better usability by a screen reader user.
Then they should have the option to turn off arrow key navigation
within the grid, instead just letting the content decide focus order,
i.e. if a cell has an interactive element, users can navigate to it
with the tab key.
Part of this is authoring error. If you want to create a data table
you don't use a grid.
People really should not use AG Grid for tables, not even tables where
you can click column headers to sort or have checkboxes to select
rows.
A grid should be used where the majority of cells are interactive.
AG Grid has sort of argued it's not their problem, but given how hard
they are pushing their products for all things tables I think this is
a major fail on their part.
Also agreed on instructions. Yes, absolutely, instructions should not
be tied to a screen reader user, but for grids in particular you may
need to provie instructions about forms vs browse mode etc, or having
to turn off pinned columns because it messes with the screen reader
markup specifically, sighted keyboard users are not impacted by this,
though they may want instructions on how to use arrow keys/tab key to
navigate the grid.
For sighted keyboard users I recommend tying instructions to
activation or focus on the skip link, you know the people wo do that
are sighted keyobard users, sighted mouse users wouldn't select it.

On 3/6/24, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks Birkir and Tim for giving your advice. Whilst I generally agree that
> if a widget like this works in the expected way - e.g. tab in, arrow around,
> tab out - then there should be no need to provide instructions, and this
> one does work in the expected way. However, the problem we have and the
> reason I want to provide a warning/instructions is that AG Grid is being
> used for all data grids in the product, including ones like this that are
> essentially just data tables and up until now have always been just data
> tables. So existing users will expect to navigate these 'tables' in the same
> way they always have. Another issue is that it seems to me that grids aren't
> very common in the wild and have the typical complexity of such widgets for
> users of modal screen readers such as JAWS and NVDA in that they require the
> user to enter forms mode to use the grid keyboard navigation. If the user
> tabs into the grid and has the default screen reader settings they will
> automatically enter forms mode but if they arrow into it, which in the
> context I'm looking at seems more likely, then they will not automatically
> enter forms mode. Entering forms mode manually requires them to press Enter
> but this doesn't work when they first get into the grid but only when they
> reach the first column header. Plus, a surprisingly large number of JAWS and
> NVDA users don't seem to be aware of the existence forms mode and how to
> manually enter or exit it. I know it's not the product vendor's job to teach
> someone how to use their access technology, but that is the environment
> we're working in and I think a simple warning/instruction would therefore
> help in this specific case. Regarding your point about non-screen-reading
> keyboard users Tim, yes you are generally right but in this case there are
> no interactive elements within the grid so keyboard users won't need to
> interact with it. The fact that the warning/instructions therefore only
> apply to screen reader users is another complication to think about when
> deciding how to present them. Plus the need to ensure that users will come
> across his guidance however they reach the grid.
>
> Having played around with all sorts of ways of delivering this guidance I'm
> leaning towards a simple hidden link to a Help page that will appear on
> focus and explain grid navigation in general, including other grids in the
> product that are more complex and do contain many interactive elements.
>
> Thanks,
> Mark
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
> Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
> Sent: Monday 4 March 2024 17:36
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [EXTERNAL] 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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
>> = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
>> Sent: Monday 4 March 2024 16:56
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: [EXTERNAL] Re: [WebAIM] How to give screen reader instructions
>> for
>> a grid
>>
>> [You don't often get email from = EMAIL ADDRESS 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"> 
>> </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 ADDRESS 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%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863140429%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=rtOFLvISZYebwIpSj6hkuOVL23%2F5PnVlySAJtw%2Ft%2BFc%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863148733%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=EjBsFAKnEYrZQlfGtbak4%2BW%2FHOiMzWXzLGfbV5Sfo60%3D&reserved=0><http://list.webaim.org/>;
>> List archives at
>> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863152540%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata£xDRzR5LD7GWdD6jla8oqyxQ0hi4WYWQ3aJPiPIOSE%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863156160%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=m5lMTPsjKymAUgpq1tCOPsZ3uvAHIjW3bstqfghXQ8g%3D&reserved=0><http://webaim.org/discussion/archives>;
>> >> >> >> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863159790%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=1v9%2BLGXnzyOANP30gE7bjufuo1fN6EvU3sREbeNyrBk%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863163375%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=6OlwvBbZSRMsJRk%2FksxlbeFiOFa41EOILljFGoP4BZE%3D&reserved=0><http://list.webaim.org/>;
>> List archives at
>> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863167042%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdataácK3b6uE%2F9N%2FYYNqVpvaWgsu5jxT2g7cicFClL2s74%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863170508%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=3UzVX6%2FHu7vz53aAPN%2BNCN9BkAUG7SJhvO8QuJy5MwQ%3D&reserved=0><http://webaim.org/discussion/archives>;
>> >> >> >> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863173929%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=0%2BFYgddjSvL27nKwskqsmkhNzXHTs%2Bka5%2B%2F2znXh4XM%3D&reserved=0<http://list.webaim.org/>;
>> List archives at
>> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863177306%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=BoE%2F1cvwqKhXf5Z4297eTb4pXVHByOpgxrKjBPaXNws%3D&reserved=0<http://webaim.org/discussion/archives>;
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863180755%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=Knij8bIdsgqORlj5dNjBq8rfbgMLvZ4UI5%2BUAWqQlqY%3D&reserved=0<http://list.webaim.org/>;
> List archives at
> https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C02%7CMark.Magennis%40skillsoft.com%7C58ccbb6a27504af6adbe08dc3c719c14%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638451705863184138%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=DQDIN5Qi4NPDvmjnmnaxF10pKI8EjaUFvpAU%2Fcd2ZF0%3D&reserved=0<http://webaim.org/discussion/archives>;
> > > > > >

--
Work hard. Have fun. Make history.