WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using <legend> and <fieldset> on a single drop-down.

for

From: JP Jamous
Date: May 28, 2021 8:54AM

If you do it the way you wrote the markup, the <p> will most likely be announced by screen readers while the user is tabbing through the form.

When you use a legend, most screen readers read the legend first followed by the radio button label.

So with your approach, you will force the screen reader user to get out of forms mode, read the <p> in browse or navigation mode and press Enter on either the Yes or No radio button.

Personally, I would like to use a legend, but I do not know your case. As I always say, each case is different and that's what determines the best markup.





=================================================Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
<EMAIL REMOVED>

"The only limitations in life are those we set for ourselves"
=================================================

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Tom Livingston
Sent: Friday, May 28, 2021 9:03 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Using <legend> and <fieldset> on a single drop-down.

Would adjacent copy satisfy the role of a legend, such as in the case of a Yes/No radio button pair? Such as the related question in a <p>?
For example:

<p>Do you like kale?</p>

<label for="yup">Absolutely</label>
<input type="radio" id="yup" name="yestokale">

<label for="nope">Gag</label>
<input type="radio" id="nope" name="notokale">



On Fri, May 28, 2021 at 7:16 AM Patrick H. Lauke < <EMAIL REMOVED> > wrote:

>
> As for which items should be grouped...any time you think "these
> various controls/inputs/buttons are logically grouped and come under
> some overarching label/legend" is when you want to do it. Generally,
> radio buttons and checkboxes are the ones almost always should be
> grouped and given an explicit legend, as they don't make much sense in
> isolation (you can have a "Yes" and "No" set of radio buttons, but
> without grouping them and giving the group a legend, screen reader
> users that land on either one of those radio buttons won't know what
> they actually mean/refer to ... this is where a <fieldset> and
> <legend> are needed to group them and to provide the actual
> question/context for those to make sense).
>
> 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
> > > archives at http://webaim.org/discussion/archives
> --

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399