WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: One Visible Label - Two Associated Input Fields

for

From: Druckman,Geri
Date: Apr 13, 2015 3:10PM

Thad,

How about using aria-labelledby ?

Here¹s a code snippet example:

<h2 id="dob">Date of birth</h2>
<div id="mon">Month</div>
<input type="text" aria-labelledby="mon dob" />
<div id="yr">Year</div>
<input type="text" aria-labelledby="yr dob" />



Geri Druckman
Web Development Specialist
Accessibility & Usability
Department of Digital Experience
MD Anderson Cancer Center
T 713-792-6293 | F 713-745-8134





On 4/13/15, 2:58 PM, "Graham Armfield" < <EMAIL REMOVED> >
wrote:

>Another approach I have used is to put DOB fields in a fieldset with a
>legend of Date of Birth. You could then give each field an individual
>label
>hidden from sighted users, but available for screen readers.
>
>Regards
>Graham Armfield
>On 13 Apr 2015 19:27, "Moore,Michael (DARS)"
>< <EMAIL REMOVED> >
>wrote:
>
>> You will want to label the fields using either the title attribute or
>> aria-label. Date of Birth would not provide sufficient information to
>>tell
>> you what to put in each of the two fields but title="Birth Month" and
>> title="Birth Year" would make it clear. An alternative would be just to
>>use
>> one field for Date of Birth.
>>
>> Mike Moore
>> Accessibility Coordinator,
>> Texas Department of Assistive and Rehabilitative Services
>> (512) 424-4159 (Office)
>> (512) 574-0091 (Cell)
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Thad C
>> Sent: Monday, April 13, 2015 12:56 PM
>> To: <EMAIL REMOVED>
>> Subject: [WebAIM] One Visible Label - Two Associated Input Fields
>>
>> 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).
>>
>> Thank you
>> >> >> at http://webaim.org/discussion/archives
>> >> >> >> >> >>
>>>>