E-mail List Archives
Thread: One of these <select> dropdowns is required, but not all
Number of posts in this thread: 5 (In chronological order)
From: Henry, Michael (IntelliDyne)
Date: Tue, May 02 2017 7:33AM
Subject: One of these <select> dropdowns is required, but not all
No previous message | Next message →
Hello, all.
We have a form in which one section has a series of dropdown menus (HTML <select> tags). The user must choose an <option> from one of the <select> items in this section: either "State" or "ZIP code" or "Locality" or "Zone", etc.
Essentially, the entire section is required, but not each individual <select>.
I thought I might wrap the section in a <fieldset> with "aria-required=true" applied, and provide instructions in the <legend> ("Please select either 'State' or 'ZIP code' or ..."). This explanation is also in non-label text on the page, for sighted users.
CSS is then used to visually hide the fieldset and legend (they are absolutely positioned off-screen). I use this technique for radio button groups already, to give them context.
Does this seem like a reasonable approach, or do I need to do more with aria-required or some other tag/attribute?
Thanks,
Mike
From: Birkir R. Gunnarsson
Date: Wed, May 03 2017 12:35PM
Subject: Re: One of these <select> dropdowns is required, but not all
← Previous message | Next message →
In my experience aria-required does not work on fieldsets (it does
work on role="radiogroup"), but it's been awhile since I tested.
Do you give sighted users any indication that they have to select from
at least one of the dropdowns?
If so, and if you do it in a legend for a fieldset or just in
instructional test on the form, I'd say that's sufficient.
Another thing you could do is to use the HTML required attribute on
all <select> elements in the section, and have JavaScript remove it
once user has selected from one of them.
It iss a bit of a hack, and you'd have to test it, but it has the
advantage that you are giving all users info and realtime feedback.
On 5/2/17, Henry, Michael (IntelliDyne) < = EMAIL ADDRESS REMOVED = > wrote:
> Hello, all.
>
> We have a form in which one section has a series of dropdown menus (HTML
> <select> tags). The user must choose an <option> from one of the <select>
> items in this section: either "State" or "ZIP code" or "Locality" or "Zone",
> etc.
>
>
> Essentially, the entire section is required, but not each individual
> <select>.
>
>
> I thought I might wrap the section in a <fieldset> with "aria-required=true"
> applied, and provide instructions in the <legend> ("Please select either
> 'State' or 'ZIP code' or ..."). This explanation is also in non-label text
> on the page, for sighted users.
>
>
> CSS is then used to visually hide the fieldset and legend (they are
> absolutely positioned off-screen). I use this technique for radio button
> groups already, to give them context.
>
>
> Does this seem like a reasonable approach, or do I need to do more with
> aria-required or some other tag/attribute?
>
>
> Thanks,
>
> Mike
>
>
> > > > >
--
Work hard. Have fun. Make history.
From: Henry, Michael (IntelliDyne)
Date: Thu, May 04 2017 5:52AM
Subject: Re: One of these <select> dropdowns is required, but not all
← Previous message | Next message →
Thanks, Birkir.
Yes, there is a message for sighted users that at least one selection is required (along with giant "or" blocks in between each <select>). I'll repeat that in the sr-only <legend>, making it clear.
In your scenario of marking all as required (via HTML attr) and removing with JS, how would you inform the non-sighted user that there was a change? Seems a little hairy to me.
Partially-unrelated question: My understanding was that as people tab through a form, they skip non-label instructional text. Is that true? For instance, they'd not see the "or" blocks.
(Sorry. I'm very new to this stuff. Trying to learn on the run!)
thanks,
Mike
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, May 3, 2017 2:35 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] One of these <select> dropdowns is required, but not all
In my experience aria-required does not work on fieldsets (it does
work on role="radiogroup"), but it's been awhile since I tested.
Do you give sighted users any indication that they have to select from
at least one of the dropdowns?
If so, and if you do it in a legend for a fieldset or just in
instructional test on the form, I'd say that's sufficient.
Another thing you could do is to use the HTML required attribute on
all <select> elements in the section, and have JavaScript remove it
once user has selected from one of them.
It iss a bit of a hack, and you'd have to test it, but it has the
advantage that you are giving all users info and realtime feedback.
WebAIM: Web Accessibility E-mail List Archives<http://webaim.org/discussion/archives>;
webaim.org
© 2017 WebAIM. Center for Persons with Disabilities Utah State University 6807 Old Main Hill Logan, UT 84322-6807 435.797.7024
From: Birkir R. Gunnarsson
Date: Thu, May 04 2017 8:13AM
Subject: Re: One of these <select> dropdowns is required, but not all
← Previous message | Next message →
Hey Mike
Re the "required" work around. A screen reader will announce all form
fields with the required attribute as "required".
Once removed, they will stop doing so.
Once the user selects an option from any of the dropdowns in the
section, they will stop hearing "required" on the other fields.
That change does not, in my opinion, constitute a major change of
context, which would require an explicit warning per WCAG 3.2.1/3.2.2
(3.2.2 applies in this case but the definition is the same).
There are two ways to interact with webpages in screen readers, browse
mode and forms mode.
In browse mode you see all text, and you can navigate using arrow keys
or by headings etc. In forms mode the screen reader only announces
things that are either focusable or connected to a focusable element
(such as a label, an element connected using aria-describedby, or a
legend for a fieldset).
Google Leonie Wattsons screen reader modes article (too lazy to find
it myself but it will show up with these terms).
A screen reader user can easily switch between the two modes at any
time (except when role="application" is used, and it should be avoided
in nearly all situations anyway).
Thus, a screen reader user will most likely locate the heading that
mraks the start of a form, or even a section of aform, in browse mode.
If they want to quickly fill in a form, they often use the tab key
(equivalent to forms mode), but if they get confused they will browse
around the form field and look for instructions.
The trick is to place instructions in a predictable location (such as
at the top of the form, or after a heading).
Do not make all information focusable, or ensure user will hear all of
it when tabbing through a form. Screen reader users are used to
digging around a bit, and connecting all form info with focusable
elements can make tem hard to impossible to navigate.
It is a fine balance, and a bit of an art, so don't stress over it.
Make sure absolutely essential info (such as the format of form
field) is associated with focusable elements. Info such as "all field
are required" should be placed at the top of the form, or in a text at
the beginning of that section of the form (especially if the section
starts with a heading.
Good questions.
Cheers
-B
On 5/4/17, Henry, Michael (IntelliDyne) < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks, Birkir.
>
> Yes, there is a message for sighted users that at least one selection is
> required (along with giant "or" blocks in between each <select>). I'll
> repeat that in the sr-only <legend>, making it clear.
>
> In your scenario of marking all as required (via HTML attr) and removing
> with JS, how would you inform the non-sighted user that there was a change?
> Seems a little hairy to me.
> Partially-unrelated question: My understanding was that as people tab
> through a form, they skip non-label instructional text. Is that true? For
> instance, they'd not see the "or" blocks.
>
> (Sorry. I'm very new to this stuff. Trying to learn on the run!)
>
>
> thanks,
>
> Mike
>
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
> Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
> Sent: Wednesday, May 3, 2017 2:35 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] One of these <select> dropdowns is required, but not
> all
>
> In my experience aria-required does not work on fieldsets (it does
> work on role="radiogroup"), but it's been awhile since I tested.
> Do you give sighted users any indication that they have to select from
> at least one of the dropdowns?
>
> If so, and if you do it in a legend for a fieldset or just in
> instructional test on the form, I'd say that's sufficient.
> Another thing you could do is to use the HTML required attribute on
> all <select> elements in the section, and have JavaScript remove it
> once user has selected from one of them.
> It iss a bit of a hack, and you'd have to test it, but it has the
> advantage that you are giving all users info and realtime feedback.
>
>
> WebAIM: Web Accessibility E-mail List
> Archives<http://webaim.org/discussion/archives>;
> webaim.org
> © 2017 WebAIM. Center for Persons with Disabilities Utah State University
> 6807 Old Main Hill Logan, UT 84322-6807 435.797.7024
>
>
>
> > > > > >
--
Work hard. Have fun. Make history.
From: Henry, Michael (IntelliDyne)
Date: Thu, May 04 2017 10:36AM
Subject: Re: One of these <select> dropdowns is required, but not all
← Previous message | No next message
Thanks for the excellent explanation!
mike