WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: One Visible Label - Two Associated Input Fields

for

From: Sylvia Richardson
Date: Apr 14, 2015 7:17AM

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