WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Grouping help

for

From: Steve Green
Date: Jan 19, 2018 8:39AM


The URL does not work for me - is it IP restricted?

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: 19 January 2018 15:38
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.