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: Iaffaldano, Michelangelo
Date: Feb 24, 2014 12:09PM

I second Birkir's recommendation.
Michelangelo

-----Original Message-----
From: Birkir R. Gunnarsson [mailto: <EMAIL REMOVED> ]
Sent: February 24, 2014 9:13 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Three inputs, one required but doesn't matter which one, how to label correctly?

Nancy

How about keeping the contact fields hidden until a company name field has content?
At that point, add radio button with the 3 choices (contact by email/phone/other).
Dynamically show the appropriate field once a selection has been made using those radiobuttons.
As long as that field appears immediately after the radiobutton set in content order that is not unexpected change of context for the user.

The only additional item I would recommend for this approach is to add text, either visible or hidden off-screen to the Company name field saying something along the lines of "will display additional form fields".

This may prove to be too much of a UI change, I know that is never a popular idea with designers, but this way you really channel the user flow so that the user actions are clear and you are much less likely to receive extraneous or confusing input to process from the form.
Good luck, whichever way you end up going.
-Birkir
Birkir Gunnarsson
Accessibility SME | Deque Systems


On 2/24/14, Nancy Johnson < <EMAIL REMOVED> > wrote:
> 'Hi Nancy, this sounds like a form usability question first and
> foremost. Could you give us more context?'
>
> It has to do with what contact info will appear in a dynamic error
> message on a public facing site. These fields appear in an internal
> application.
>
> When you go to the page, There is a Company name field, and then
> three ways to contact fields: Phone/Email/Website.
>
> The user has a choice of leaving all fields blank including company
> (in this case nothing is required) and moving on to the next page or
> adding a company name. If you add the company name, then at least one
> of the contact fields are also required.
>
> From the front end, my preference is to do it from labeling if
> possible, however, I would try to do something like Birkir suggests if
> labeling isn't enough..
>
> I also have to work with the back-end engineer to see what he is going
> to do.
>
> Thank you
>
> Nancy
>
> On Fri, Feb 21, 2014 at 2:27 PM, 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
>>
>>
>>
>> >> >> list messages to <EMAIL REMOVED>
> > > list messages to <EMAIL REMOVED>
>


--
Work hard. Have fun. Make history.