WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: One of these <select> dropdowns is required, but not all

for

From: Birkir R. Gunnarsson
Date: May 3, 2017 12:35PM

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 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.