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