WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: One Visible Label - Two Associated Input Fields

for

From: _mallory
Date: Apr 14, 2015 12:38AM

On Mon, Apr 13, 2015 at 10:56:01AM -0700, Thad C wrote:
> Greetings Group,
>
> Can anyone tell me the most semantically correct and compliant way to
> associate a visible form element label (Date of Birth for example) with two
> text input fields (a Month field and a Year field for example).

When I had 3 inputs for 1 value (dates), I used offscreen labels for
each (day, month, year) and in the beginning used a fieldset legend
and more recently a p with aria-describedby... I think mostly because
I could in no way style the legend to match the labels in the rest of
the form and that was not acceptable to the designer. The p could be
styled easily and cross-browser.

<p id="dob">Date of birth: (dd/mm/yyyy)</p>
<label for="dd">Day </label>
<input type="text" id="dd" aria-describedby="dob">
etc..

It's nicer for users if the label can show, unless you're using
selects where for example the month dropdown is obvious because
it uses month names instead of numbers or something.

_mallory