E-mail List Archives

Search E-mail List Archives for

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

From: Alex Gonzalez
Date: Tue, May 10 2022 5:50PM
Subject: Aria-describedby for entire checkbox grouping?
No previous message | Next message →

Hello,

I was attempting to do something similar to this example from Gov
UK's website:
https://design-system.service.gov.uk/components/checkboxes/default/index.html

You'll notice they have an aria-describedby describing the entire fieldset
for the checkbox group with "Check all that apply". However, I noticed that
in both NVDA and Voice Over, the "Check all that apply" is not read when I
focus the checkbox input elements.

I was wondering if anyone knows a way to correctly get the screen reader to
describe the checkbox input(s) with "Check all that apply" ?

--
Alex Gonzalez (he/him) Software Engineer
Accessibility Advocate codeforamerica.org

From: Patrick H. Lauke
Date: Wed, May 11 2022 1:52AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

On 11/05/2022 00:50, Alex Gonzalez wrote:
> Hello,
>
> I was attempting to do something similar to this example from Gov
> UK's website:
> https://design-system.service.gov.uk/components/checkboxes/default/index.html
>
> You'll notice they have an aria-describedby describing the entire fieldset
> for the checkbox group with "Check all that apply". However, I noticed that
> in both NVDA and Voice Over, the "Check all that apply" is not read when I
> focus the checkbox input elements.

I can confirm that, in a very quick test using Chrome, I can get
Chrome/JAWS 2022 to announce the "Check all that apply" when entering
the fieldset, but with Chrome/NVDA that aria-describedby is ignored
(only the <legend> is announced).

> I was wondering if anyone knows a way to correctly get the screen reader to
> describe the checkbox input(s) with "Check all that apply" ?

I'd go for the simpler approach of making the "Check all that apply"
part of the <legend> (with some extra styling to make it look like it
does in the example there)

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Graham Armfield
Date: Wed, May 11 2022 2:18AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

Hi Alex, is there some reason why you can't use the <legend> element with
the <fieldset>?

That's a pretty rock solid way of communicating what the checkbook group is
for. The <legend> does need to be the first child of the <fieldset>.

Another approach would be to use the aria-describedby attribute on the
individual checkbook.

Regards
Graham Armfield
Coalfields Consulting

From: Geethavani.Shamanna
Date: Wed, May 11 2022 3:06AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

With NVDA and Chrome: NVDA announces 'Check all that apply' when tabbing in the Focus mode, but not in the Browse mode.

Geetha
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: 11 May 2022 08:52
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Aria-describedby for entire checkbox grouping?

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

On 11/05/2022 00:50, Alex Gonzalez wrote:
> Hello,
>
> I was attempting to do something similar to this example from Gov UK's
> website:
> https://design-system.service.gov.uk/components/checkboxes/default/ind
> ex.html
>
> You'll notice they have an aria-describedby describing the entire
> fieldset for the checkbox group with "Check all that apply". However,
> I noticed that in both NVDA and Voice Over, the "Check all that apply"
> is not read when I focus the checkbox input elements.

I can confirm that, in a very quick test using Chrome, I can get Chrome/JAWS 2022 to announce the "Check all that apply" when entering the fieldset, but with Chrome/NVDA that aria-describedby is ignored (only the <legend> is announced).

> I was wondering if anyone knows a way to correctly get the screen
> reader to describe the checkbox input(s) with "Check all that apply" ?

I'd go for the simpler approach of making the "Check all that apply"
part of the <legend> (with some extra styling to make it look like it does in the example there)

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Patrick H. Lauke
Date: Wed, May 11 2022 3:13AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

On 11/05/2022 10:06, Geethavani.Shamanna wrote:
> With NVDA and Chrome: NVDA announces 'Check all that apply' when tabbing in the Focus mode, but not in the Browse mode.

It doesn't announce it in Focus mode for me. If I tab from outside of
the fieldset to that first checkbox, it only announces the legend, and
then the label for the first checkbox .

"Which types of waste do you transport? grouping clickable Waste from
animal carcasses check box not checked "

In Browse mode, once I cross the threshold of the fieldset, it also only
announces the legend.

"grouping heading level 1 Which types of waste do you transport?"

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Birkir R. Gunnarsson
Date: Wed, May 11 2022 4:38AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

aria-describedby on a fieldset has worked consistently for me when
entering/exiting the fieldset. What happens if you have links around
tis grouping and then tab into it (or shift-tab from the link after)?
Maybe the aria-describedby support has changed, last year this worked
consistently across most of the combinations I tested.
I agree, just put it in the legend.

On 5/11/22, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 11/05/2022 10:06, Geethavani.Shamanna wrote:
>> With NVDA and Chrome: NVDA announces 'Check all that apply' when tabbing
>> in the Focus mode, but not in the Browse mode.
>
> It doesn't announce it in Focus mode for me. If I tab from outside of
> the fieldset to that first checkbox, it only announces the legend, and
> then the label for the first checkbox .
>
> "Which types of waste do you transport? grouping clickable Waste from
> animal carcasses check box not checked "
>
> In Browse mode, once I cross the threshold of the fieldset, it also only
> announces the legend.
>
> "grouping heading level 1 Which types of waste do you transport?"
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.

From: Patrick H. Lauke
Date: Wed, May 11 2022 4:53AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

On 11/05/2022 11:38, Birkir R. Gunnarsson wrote:
> aria-describedby on a fieldset has worked consistently for me when
> entering/exiting the fieldset. What happens if you have links around
> tis grouping and then tab into it (or shift-tab from the link after)?
That's how I tested it ... using devtools, I added a button before and
after the fieldset, to test the tabbing into/out of. No announcement of
the aria-describedby text in my case (Chrome 101.0.4951.64, NVDA 2021.3.5).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Birkir R. Gunnarsson
Date: Wed, May 11 2022 6:12AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

Durn it, I hate when accessibility moves backwards, but it happens quite often.

On 5/11/22, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 11/05/2022 11:38, Birkir R. Gunnarsson wrote:
>> aria-describedby on a fieldset has worked consistently for me when
>> entering/exiting the fieldset. What happens if you have links around
>> tis grouping and then tab into it (or shift-tab from the link after)?
> That's how I tested it ... using devtools, I added a button before and
> after the fieldset, to test the tabbing into/out of. No announcement of
> the aria-describedby text in my case (Chrome 101.0.4951.64, NVDA 2021.3.5).
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Wed, May 11 2022 11:34AM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | Next message →

That's how I had tested it the other day when this was first posted, but I
didn't reply with my results. I put buttons before and after the fieldset
so I could hear what happened when I tabbed into the fieldset. The
accessibility tree is correct. The fieldset has an accessible
description. But NVDA does not announce the description whereas JAWS does.

On Wed, May 11, 2022 at 4:53 AM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> On 11/05/2022 11:38, Birkir R. Gunnarsson wrote:
> > aria-describedby on a fieldset has worked consistently for me when
> > entering/exiting the fieldset. What happens if you have links around
> > tis grouping and then tab into it (or shift-tab from the link after)?
> That's how I tested it ... using devtools, I added a button before and
> after the fieldset, to test the tabbing into/out of. No announcement of
> the aria-describedby text in my case (Chrome 101.0.4951.64, NVDA 2021.3.5).
>
> P
> --
> Patrick H. Lauke
>
>

From: Alex Gonzalez
Date: Wed, May 11 2022 12:31PM
Subject: Re: Aria-describedby for entire checkbox grouping?
← Previous message | No next message

Thanks for the replies everyone! I'm going to go the route of putting the
description text in the legend as it sounds like that method will work
across the widest assortment of assistive technologies.

On Wed, May 11, 2022 at 10:34 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> That's how I had tested it the other day when this was first posted, but I
> didn't reply with my results. I put buttons before and after the fieldset
> so I could hear what happened when I tabbed into the fieldset. The
> accessibility tree is correct. The fieldset has an accessible
> description. But NVDA does not announce the description whereas JAWS does.
>
> On Wed, May 11, 2022 at 4:53 AM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > On 11/05/2022 11:38, Birkir R. Gunnarsson wrote:
> > > aria-describedby on a fieldset has worked consistently for me when
> > > entering/exiting the fieldset. What happens if you have links around
> > > tis grouping and then tab into it (or shift-tab from the link after)?
> > That's how I tested it ... using devtools, I added a button before and
> > after the fieldset, to test the tabbing into/out of. No announcement of
> > the aria-describedby text in my case (Chrome 101.0.4951.64, NVDA
> 2021.3.5).
> >
> > P
> > --
> > Patrick H. Lauke
> >
> >
> > > > >