E-mail List Archives
Thread: Using <legend> and <fieldset> on a single drop-down.
Number of posts in this thread: 15 (In chronological order)
From: Ksenia Blake
Date: Fri, May 28 2021 3:43AM
Subject: Using <legend> and <fieldset> on a single drop-down.
No previous message | Next message →
Hi All,
I just need a bit of advice if I may. Currently we are testing a form, where
a <legend> tag was used on a Language drop-down without a <fieldset>. In
most websites, that I have looked, the tags, that are used to group
elements, are mainly related to radio buttons and checkboxes, to combine
related items. The question is, is there a specific rules of what items
should be grouped and what shouldn't.
Regards,
Ksenia Blake
From: Mark Magennis
Date: Fri, May 28 2021 4:22AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
Hi Ksenia,
A fieldset is just a group of related fields that have a group name in addition to their individual names. So if your language dropdown is in a group of related controls then a group name might be sensible. The fieldset can have only one field in it if the group has a variable number of items in it but sometimes only one. E.g. "Color. Checkbox Red". Red is the field label and Color is the group label. But in this case there is only one color available so the group contains only one item. At other times it may also contain checkboxes for Blue, Yellow, etc.
But the group name (legend) would need to be in a group (fieldset) that it names, otherwise it doesn't name anything.
Mark
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Ksenia Blake
Sent: 28 May 2021 10:44
To: = EMAIL ADDRESS REMOVED =
Subject: [EXTERNAL] [WebAIM] Using <legend> and <fieldset> on a single drop-down.
Hi All,
I just need a bit of advice if I may. Currently we are testing a form, where a <legend> tag was used on a Language drop-down without a <fieldset>. In most websites, that I have looked, the tags, that are used to group elements, are mainly related to radio buttons and checkboxes, to combine related items. The question is, is there a specific rules of what items should be grouped and what shouldn't.
Regards,
Ksenia Blake
From: Graham Armfield
Date: Fri, May 28 2021 5:08AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
Hi Ksenia,
Echoing what Mark Magennis said - a <legend> should always be used with a
<fieldset>.
The combination is used to label any group of input fields. It's also
possible to nest a <fieldset> inside another. For example, you may have
some grouped input fields about a particular person in an insurance
application that includes a radio button group. The radio button group
obviously needs to be in a <fieldset> with a <legend> and this can be
inside your other group. Obviously the more nesting you do, the more
complex the announcements.
One other thing that I have found in the past is that the <legend> element
needs to be the first child element of the <fieldset> or not all screen
readers will announce it. But I must admit that I haven't tested that for a
couple of years so that may no longer be the case.
Regards
Graham Armfield
coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>
<http://www.avg.com/email-signature?utm_medium=email&;utm_source=link&utm_campaign=sig-email&utm_content=webmail>
Virus-free.
www.avg.com
<http://www.avg.com/email-signature?utm_medium=email&;utm_source=link&utm_campaign=sig-email&utm_content=webmail>
<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>
On Fri, 28 May 2021 at 11:22, Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:
> Hi Ksenia,
>
> A fieldset is just a group of related fields that have a group name in
> addition to their individual names. So if your language dropdown is in a
> group of related controls then a group name might be sensible. The fieldset
> can have only one field in it if the group has a variable number of items
> in it but sometimes only one. E.g. "Color. Checkbox Red". Red is the field
> label and Color is the group label. But in this case there is only one
> color available so the group contains only one item. At other times it may
> also contain checkboxes for Blue, Yellow, etc.
>
> But the group name (legend) would need to be in a group (fieldset) that it
> names, otherwise it doesn't name anything.
>
> Mark
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Ksenia Blake
> Sent: 28 May 2021 10:44
> To: = EMAIL ADDRESS REMOVED =
> Subject: [EXTERNAL] [WebAIM] Using <legend> and <fieldset> on a single
> drop-down.
>
> Hi All,
>
>
>
> I just need a bit of advice if I may. Currently we are testing a form,
> where a <legend> tag was used on a Language drop-down without a <fieldset>.
> In most websites, that I have looked, the tags, that are used to group
> elements, are mainly related to radio buttons and checkboxes, to combine
> related items. The question is, is there a specific rules of what items
> should be grouped and what shouldn't.
>
>
>
> Regards,
>
> Ksenia Blake
>
>
>
>
>
>
>
> > > at http://webaim.org/discussion/archives
> > > > > >
From: Patrick H. Lauke
Date: Fri, May 28 2021 5:16AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
On 28/05/2021 10:43, Ksenia Blake wrote:
> I just need a bit of advice if I may. Currently we are testing a form, where
> a <legend> tag was used on a Language drop-down without a <fieldset>. In
> most websites, that I have looked, the tags, that are used to group
> elements, are mainly related to radio buttons and checkboxes, to combine
> related items. The question is, is there a specific rules of what items
> should be grouped and what shouldn't.
Per HTML spec, <legend> is only allowed as first child of a <fieldset>,
so a "naked" <legend> is invalid. In practice, nothing bad will
happen...but also, the <legend> will have no actual effect / won't be
announced by assistive technologies as anything other than some piece of
static text.
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
From: Tom Livingston
Date: Fri, May 28 2021 8:02AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
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 ADDRESS 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
> > > > --
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
From: Patrick H. Lauke
Date: Fri, May 28 2021 8:49AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
On 28/05/2021 15:02, Tom Livingston wrote:
> 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">
I'd say no because this assumes an AT user is navigating sequentially
through the form in reading mode. If they just tabbed from one form
control to the next, if they're in forms mode, or used a shortcut key to
jump to the first radio button or something, that text won't be
announced because it's not programmatically denoted as acting as the
overarching label/legend for the group (and hence, a failure of 1.3.1).
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: JP Jamous
Date: Fri, May 28 2021 8:54AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
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 ADDRESS REMOVED =
"The only limitations in life are those we set for ourselves"
=================================================
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Tom Livingston
Sent: Friday, May 28, 2021 9:03 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
From: Tom Livingston
Date: Fri, May 28 2021 8:58AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
Makes sense. Thanks you.
On Fri, May 28, 2021 at 10:49 AM Patrick H. Lauke
< = EMAIL ADDRESS REMOVED = > wrote:
>
> On 28/05/2021 15:02, Tom Livingston wrote:
> > 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">
>
> I'd say no because this assumes an AT user is navigating sequentially
> through the form in reading mode. If they just tabbed from one form
> control to the next, if they're in forms mode, or used a shortcut key to
> jump to the first radio button or something, that text won't be
> announced because it's not programmatically denoted as acting as the
> overarching label/legend for the group (and hence, a failure of 1.3.1).
>
> 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
> > > > --
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
From: Graham Armfield
Date: Fri, May 28 2021 12:27PM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
Hi All,
In the code provided by Tom, the name attribute on the two radio buttons
has a different value, so as far as the browser is concerned they are not
part of the same group. This can cause unexpected behaviour for keyboard
users who can see they are adjacent, and also for desktop/laptop screen
reader users.
Also, Jean-Pierre has stated that the contents of the <p> element would get
read out when screen reader user is tabbing through a form. Is that really
true? In my experience, when tabbing through a series of form elements with
a screen reader running, any text between the input fields will rarely get
heard by a screen reader user.
Another approach that could be used would be to link the <p> to the radio
buttons with aria-describedby (like you would with an error message). The
reading order may not be deal, but the user is getting the required
information.
Regards
Graham Armfield
coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>
On Fri, 28 May 2021 at 15:54, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS REMOVED =
>
> "The only limitations in life are those we set for ourselves"
> =================================================>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Tom Livingston
> Sent: Friday, May 28, 2021 9:03 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
> > > at http://webaim.org/discussion/archives
> >
> > > > >
From: Patrick H. Lauke
Date: Fri, May 28 2021 12:40PM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
On 28/05/2021 19:27, Graham Armfield wrote:
> In the code provided by Tom, the name attribute on the two radio buttons
> has a different value, so as far as the browser is concerned they are not
> part of the same group. This can cause unexpected behaviour for keyboard
> users who can see they are adjacent, and also for desktop/laptop screen
> reader users.
I assume that was just a typo in the email while jotting down code
quickly. That wouldn't be used in production (I'd hope) because it makes
those radios not mutually exclusive even for mouse/touch users.
> Also, Jean-Pierre has stated that the contents of the <p> element would get
> read out when screen reader user is tabbing through a form. Is that really
> true?
No, here I also assume it was a small mis-writing on JP's part (as later
he says "So with your approach, you will force the screen reader user to
get out of forms mode, read the <p>...")
> Another approach that could be used would be to link the <p> to the radio
> buttons with aria-describedby (like you would with an error message). The
> reading order may not be deal, but the user is getting the required
> information.
And another: use an arbitrary container with role="group", then
associate the element that contains the overarching label/legend with it...
<div role="group" aria-labelledby="foobar">
<p id="foobar">This is the text acting as a legend</p>
<!-- radio buttons here -->
</div>
--
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: Tom Livingston
Date: Fri, May 28 2021 1:49PM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
On Fri, May 28, 2021 at 2:27 PM Graham Armfield
< = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi All,
>
> In the code provided by Tom, the name attribute on the two radio buttons
> has a different value, so as far as the browser is concerned they are not
> part of the same group. This can cause unexpected behaviour for keyboard
> users who can see they are adjacent, and also for desktop/laptop screen
> reader users.
>
>
Yes, sorry. Just jotting code out quickly. I spent more time on the
kale joke than the code. :-P
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
From: Mallory
Date: Sat, May 29 2021 3:48AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
Graham wrote:
> One other thing that I have found in the past is that the <legend> element
> needs to be the first child element of the <fieldset> or not all screen
> readers will announce it. But I must admit that I haven't tested that for a
> couple of years so that may no longer be the case.
It's based on the browser and yeah, it's still the case for some.
There's a github issue open for the WHATWG HTML spec where someone asks whether two separate parts of the spec are maybe slightly contradictory on this, but as far as behaviour... you can only be assured a user agent will name the group if the legend is the first direct child.
cheers,
_mallory
From: Mallory
Date: Sat, May 29 2021 3:56AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
Graham wrote:
> Also, Jean-Pierre has stated that the contents of the <p> element would get read out when screen reader user is tabbing through a form. Is that really true?
I see Pat already answered this although I've noted that specifically JAWS tries to fix a lot with heuristics and while I don't know that it wouldn't try to name what looks like a set of radios (assuming they shared the `name` attr), I have seen devs get tricked into thinking a <p> next to a text input can label it, because they'll Tab to that input and JAWS'll look for some nearest text once it determines the input has no name, and announce that.
Another reason I tend to audit by looking at code and then if I go over with AT I try a few just to check for weirdness.
Tom wrote:
> Yes, sorry. Just jotting code out quickly. I spent more time on the
> kale joke than the code. :-P
Puns are important! :P
cheers,
_mallory
From: Patrick H. Lauke
Date: Sat, May 29 2021 7:13AM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | Next message →
On 29/05/2021 10:48, Mallory wrote:
> There's a github issue open for the WHATWG HTML spec where someone asks whether two separate parts of the spec are maybe slightly contradictory on this, but as far as behaviour... you can only be assured a user agent will name the group if the legend is the first direct child.
https://github.com/whatwg/html/issues/6645
P "someone" :)
--
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: Mallory
Date: Sun, May 30 2021 1:13PM
Subject: Re: Using <legend> and <fieldset> on a single drop-down.
← Previous message | No next message
eh I really couldn't remember which of several people first brought it up :P
On Sat, May 29, 2021, at 3:13 PM, Patrick H. Lauke wrote:
> On 29/05/2021 10:48, Mallory wrote:
>
> > There's a github issue open for the WHATWG HTML spec where someone asks whether two separate parts of the spec are maybe slightly contradictory on this, but as far as behaviour... you can only be assured a user agent will name the group if the legend is the first direct child.
>
> https://github.com/whatwg/html/issues/6645
>
> P "someone" :)
> --
> 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
> > > > >