WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Graham Armfield
Date: May 28, 2021 12:27PM

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