WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Grouping help

for

From: Bryan Garaventa
Date: Jan 19, 2018 11:01AM

In some cases, when the markup is too convoluted for screen readers to accurately parse the hierarchy for group labelling to be accurate, there is a simple solution to address this.

Simply use aria-describedby on the form field to reference the shared label text, which will set the Description property of the form field in the accessibility tree, as opposed to the Name property which is set by the explicit label. At which time it is not necessary to attempt to enforce non-intuitive fieldset/legend associations or rely upon role="group" hacks to address the same issue.

This method also works on touch screen devices such as iOS with VoiceOver, which will announce the associated shared label text after the explicit name of the field when swiping between fields.

Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 9:34 AM
To: 'Beranek, Nicholas' < <EMAIL REMOVED> >; 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Grouping help

Now NVDA is reading the Label (Yes/No) but not the legend in FireFox, and the Legend but not the Label in IE11. In Chrome, NVDA and JAWS read the legend and Field label perfectly. Very annoying.


Joseph


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Friday, January 19, 2018 10:38 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Grouping help

Hi Joseph,

The <legend> must be the first child of the <fieldset>. This should fix your issues with NVDA.

On each <input>, you've provided an aria-labelledby that points to the <legend> AND the adjacent label. JAWS is friendlier with code. It's likely that the <legend> reads multiple times because it's both the group label and referenced through aria-labelledby.

The labelFor association is all that you need. You can remove the aria-labelledby property once you have properly marked up the <fieldset> by having the <legend> as the first child.

I hope this helps,

Nick

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 10:32 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: [WebAIM] Grouping help

My developers redid an application and it's not working properly. Code sample below. JAWS reads the legend 3 times, but not the yes/no labels, while NVDA reads the labels but not the legend. Any help appreciated. I know the tabindex are not needed on the radio buttons.

<Fieldset style="border:0;">
<table style="margin-left:-3px;" width="856" class="form" role="presentation"> <tr>
<td width="523"><LEGEND id="average" style="font-size:14px; float:left;">Do/did you have over an 80 average in your academic subjects in high school?</LEGEND>
<td width="169"><INPUT NAME="avg_80" value="yes" id="yes2" tabindex="0" aria-labelledby="average yes2" TYPE=radio
><label for="yes2"> Yes</Label></td>
<td width="169"><INPUT NAME="avg_80" value="no" id="no2" tabindex="0" aria-labelledby="average no2" TYPE=radio checked
checked><label for="no2"> No</Label></td> </tr> </table> </Fieldset>

Full demo application at: https://afstest.uapc.cuny.edu/uapc/public/fin_aid/financial_aid_estimator/FinAidEstimator.jsp

Joseph

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.