E-mail List Archives
Thread: Three inputs, one required but doesn't matter which one, how to label correctly?
Number of posts in this thread: 8 (In chronological order)
From: Nancy Johnson
Date: Thu, Feb 20 2014 5:50AM
Subject: Three inputs, one required but doesn't matter which one, how to label correctly?
No previous message | Next message →
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..
Thanks
Nancy
From: Jukka K. Korpela
Date: Fri, Feb 21 2014 12:38AM
Subject: Re: Three inputs, one required but doesn't matter which one, how to label correctly?
← Previous message | Next message →
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
From: Lucy Greco
Date: Fri, Feb 21 2014 10:05AM
Subject: Re: Three inputs, one required but doesn't matter which one, how to label correctly?
← Previous message | Next message →
I would only add that if you do put that text in use the aria describe
by as well so that the screen reader here's it
Lucia Greco
Web Access Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
follow me on twitter @accessaces
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jukka K.
Korpela
Sent: Thursday, February 20, 2014 11:39 PM
To: = EMAIL ADDRESS 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
messages to = EMAIL ADDRESS REMOVED =
From: Iaffaldano, Michelangelo
Date: Fri, Feb 21 2014 12:27PM
Subject: Re: Three inputs, one required but doesn't matter which one, how to label correctly?
← Previous message | Next message →
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 ADDRESS REMOVED = ]
Sent: February 21, 2014 2:39 AM
To: = EMAIL ADDRESS 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
From: Birkir R. Gunnarsson
Date: Sun, Feb 23 2014 11:01AM
Subject: Re: Three inputs, one required but doesn't matter which one, how to label correctly?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = ]
> Sent: February 21, 2014 2:39 AM
> To: = EMAIL ADDRESS 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.
From: Nancy Johnson
Date: Mon, Feb 24 2014 6:24AM
Subject: Re: Three inputs, one required but doesn't matter which one, how to label correctly?
← Previous message | Next message →
'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 ADDRESS 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 ADDRESS REMOVED = ]
> Sent: February 21, 2014 2:39 AM
> To: = EMAIL ADDRESS 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
>
>
>
> > >
From: Birkir R. Gunnarsson
Date: Mon, Feb 24 2014 7:12AM
Subject: Re: Three inputs, one required but doesn't matter which one, how to label correctly?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ]
>> Sent: February 21, 2014 2:39 AM
>> To: = EMAIL ADDRESS 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.
From: Iaffaldano, Michelangelo
Date: Mon, Feb 24 2014 12:09PM
Subject: Re: Three inputs, one required but doesn't matter which one, how to label correctly?
← Previous message | No next message
I second Birkir's recommendation.
Michelangelo
-----Original Message-----
From: Birkir R. Gunnarsson [mailto: = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ]
>> Sent: February 21, 2014 2:39 AM
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> > > list messages to = EMAIL ADDRESS REMOVED =
>
--
Work hard. Have fun. Make history.