WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Three inputs, one required but doesn't matter which one, how to label correctly?

for

From: Birkir R. Gunnarsson
Date: Feb 23, 2014 11:01AM

If you wanted to do some ARIA and JavaScript hacking mix to address
this, you might want to create a heading/legend or use div with
role="group" and aria-labelledby to a paragraph that says "You must
fill in at least one of the following fields).
Then when user has entered a value into one of the 3 fields, you could
remove that paragraph, or the aria-labelledby connection from the div
with role="group" (visually hiding the legend paragraph is not
sufficient, as screen readers appear to ignore the display:
none/visibility hidden CSS when a labelling element is referenced via
aria labelling, at least in my preliminary testing).


In addition, you could use aria-invalid="true" on each of the 3 fields
until the user has entered a value into one of them, in which case you
remove aria-invalid from all 3.

There is no elegant solution to this that I can think of, but these
are some of the ways one could get this message across.
Keep in mind similar information must be presented visually and
equally clearly to all users, and what particular direction you want
to go with non-visual indication depends to some extent on that
approach.

Cheers
-Birkir
Birkir Gunnarsson
Accessibility SME | Deque Systems



On 2/21/14, Iaffaldano, Michelangelo < <EMAIL REMOVED> > wrote:
> Hi Nancy, this sounds like a form usability question first and foremost.
> Could you give us more context?
> M.
>
> -----Original Message-----
> From: Jukka K. Korpela [mailto: <EMAIL REMOVED> ]
> Sent: February 21, 2014 2:39 AM
> To: <EMAIL REMOVED>
> Subject: Re: [WebAIM] Three inputs, one required but doesn't matter which
> one, how to label correctly?
>
> 2014-02-20 14:50, Nancy Johnson wrote:
>
>> How do you label fields where there are 3 inputs and one required but
>> doesn't matter which one?
>>
>> I have been using wai-aria for required fields up until now..
>
> Assuming you mean text input fields, i.e. input type=text, it seems that you
> cannot specify in ARIA that at least one of them needs to be nonempty. You
> cannot do that with HTML attributes either. You can just declare a field
> required. And you should not do that here of course.
>
> So you can just say, in text, before the fields, that at least one them
> needs to be filled out. You can additionally have JavaScript code that
> checks that this condition is met when the form is to be submitted.
>
> Yucca
>
>
>
> > > >


--
Work hard. Have fun. Make history.