E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Thad C
Date: Mon, Apr 13 2015 11:56AM
Subject: One Visible Label - Two Associated Input Fields
No previous message | Next message →

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

From: Moore,Michael (DARS)
Date: Mon, Apr 13 2015 12:27PM
Subject: Re: One Visible Label - Two Associated Input Fields
← Previous message | Next message →

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)

From: Graham Armfield
Date: Mon, Apr 13 2015 1:58PM
Subject: Re: One Visible Label - Two Associated Input Fields
← Previous message | Next message →

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

From: Druckman,Geri
Date: Mon, Apr 13 2015 3:10PM
Subject: Re: One Visible Label - Two Associated Input Fields
← Previous message | Next message →

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

From: _mallory
Date: Tue, Apr 14 2015 12:38AM
Subject: Re: One Visible Label - Two Associated Input Fields
← Previous message | Next message →

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

From: Sylvia Richardson
Date: Tue, Apr 14 2015 7:17AM
Subject: Re: One Visible Label - Two Associated Input Fields
← Previous message | Next message →

Hi everyone,

Looks like my office's email software ate my reply, so trying again:

There are a couple of ways to do this. The two I use most are a fieldset/legend or a combination of a group and an aria-labelledby tag.

So fieldset/legend:
<fieldset>
<legend>What is your height?</legend>
<label><input type="text" name="heightFeet"> feet</label>
<label><input type="text" name="heightInches"> inches</label>
</fieldset>


Group/labelledby:
<p id="heighttext">What is your height?</p>
<div role="group" aria-labelledby="heighttext">
<label><input type="text" name="heightFeet"> feet</label>
<label><input type="text" name="heightInches"> inches</label>
</div>

The behavior I see/hear with screen readers is that when I select or tab into a group for the first time I hear both the question and the individual label, and then only the individual label when I move around the group. I use the same pattern for related radio buttons or checkboxes.

I have noticed that the fieldset/legend pattern goes wonky with NVDA if there is any code between the fieldset and legend tags, so I tend to prefer the group/labelledby pattern.

Does anyone have other suggestions?

-Sylvia


Sylvia Richardson | Web Accessibility Advisor
(919) 765-4422 | Cell (919) 727-7282 | = EMAIL ADDRESS REMOVED =

Blue Cross and Blue Shield of North Carolina

Confidentiality Notice: This message is intended only for the use of the individual or entity to which it is addressed. This communication may contain individual protected health information ("PHI") that is subject to protection under state and federal laws, or other privileged, confidential or proprietary information of Blue Cross and Blue Shield of North Carolina that may not be further disclosed. If you are not the intended recipient, or the employee or agent responsible for delivering this communication to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to this message and deleting it from your computer. Thank you.

From: Birkir R. Gunnarsson
Date: Wed, Apr 15 2015 5:13AM
Subject: Re: One Visible Label - Two Associated Input Fields
← Previous message | No next message

Second Sylvia's approach.
1. Put an id attribute on the labeling element.
2. Put role="group" and aria-labelledby="the id you just created" on a
container around the form fields you want grouped.
3. You can label individual groups visibly (which is always good), or
you can use title or aria-label for an off-screen label, if visually
the label association is absolutely clear, such as for a 3-part phone
number or SSN.



On 4/14/15, Sylvia Richardson < = EMAIL ADDRESS REMOVED = > wrote:
> Hi everyone,
>
> Looks like my office's email software ate my reply, so trying again:
>
> There are a couple of ways to do this. The two I use most are a
> fieldset/legend or a combination of a group and an aria-labelledby tag.
>
> So fieldset/legend:
> <fieldset>
> <legend>What is your height?</legend>
> <label><input type="text" name="heightFeet"> feet</label>
> <label><input type="text" name="heightInches"> inches</label>
> </fieldset>
>
>
> Group/labelledby:
> <p id="heighttext">What is your height?</p>
> <div role="group" aria-labelledby="heighttext">
> <label><input type="text" name="heightFeet"> feet</label>
> <label><input type="text" name="heightInches"> inches</label>
> </div>
>
> The behavior I see/hear with screen readers is that when I select or tab
> into a group for the first time I hear both the question and the individual
> label, and then only the individual label when I move around the group. I
> use the same pattern for related radio buttons or checkboxes.
>
> I have noticed that the fieldset/legend pattern goes wonky with NVDA if
> there is any code between the fieldset and legend tags, so I tend to prefer
> the group/labelledby pattern.
>
> Does anyone have other suggestions?
>
> -Sylvia
>
>
> Sylvia Richardson | Web Accessibility Advisor
> (919) 765-4422 | Cell (919) 727-7282 | = EMAIL ADDRESS REMOVED =
>
> Blue Cross and Blue Shield of North Carolina
>
> Confidentiality Notice: This message is intended only for the use of the
> individual or entity to which it is addressed. This communication may
> contain individual protected health information ("PHI") that is subject to
> protection under state and federal laws, or other privileged, confidential
> or proprietary information of Blue Cross and Blue Shield of North Carolina
> that may not be further disclosed. If you are not the intended recipient, or
> the employee or agent responsible for delivering this communication to the
> intended recipient, you are hereby notified that any dissemination,
> distribution or copying of this communication is strictly prohibited. If you
> have received this communication in error, please notify us immediately by
> replying to this message and deleting it from your computer. Thank you.
> > > > >


--
Work hard. Have fun. Make history.