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 24, 2014 7:12AM

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


--
Work hard. Have fun. Make history.