WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: One Visible Label - Two Associated Input Fields

for

From: Birkir R. Gunnarsson
Date: Apr 15, 2015 5:13AM

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