E-mail List Archives
Thread: Grouping help
Number of posts in this thread: 8 (In chronological order)
From: Joseph Sherman
Date: Fri, Jan 19 2018 8:32AM
Subject: Grouping help
No previous message | Next message →
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
From: Beranek, Nicholas
Date: Fri, Jan 19 2018 8:37AM
Subject: Re: Grouping help
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 10:32 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
From: Steve Green
Date: Fri, Jan 19 2018 8:39AM
Subject: Re: Grouping help
← Previous message | Next message →
The URL does not work for me - is it IP restricted?
Steve
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: 19 January 2018 15:38
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 10:32 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
From: Joseph Sherman
Date: Fri, Jan 19 2018 8:42AM
Subject: Re: Grouping help
← Previous message | Next message →
Oops, that my bad. I believe the test instance is internal only. Sorry about that.
Joseph
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Steve Green
Sent: Friday, January 19, 2018 10:39 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Grouping help
The URL does not work for me - is it IP restricted?
Steve
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: 19 January 2018 15:38
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 10:32 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
From: Joseph Sherman
Date: Fri, Jan 19 2018 9:20AM
Subject: Re: Grouping help
← Previous message | Next message →
If we do that, is there a way to have the Legend and buttons in the same row? I know we should not be using tables for layout, but that ship has sailed for this project.
I was under the impression that the syntax of FIELDSET makes this impossible: the first element there must be LEGEND, so one cannot organize the legend and the buttons with their labels as one row in a table. That could be a visual problem to have the Legend/Question not in line with the answers.
Joseph
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Friday, January 19, 2018 10:38 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 10:32 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
From: Birkir R. Gunnarsson
Date: Fri, Jan 19 2018 9:57AM
Subject: Re: Grouping help
← Previous message | Next message →
You can use ARIA here.
<table role="group" aria-labelledby="l1">
<tr>
<td id="la">Legend text</td>
<td>button</td>
..
</tr>
</table>
The reason NvDA does not read the legned might have nothing to do with
your markup.
NVDA does not read the legend for a fieldset unless it contains an
element that forces NvDA into forms mode, Google NVDA forms mode
checkboxes (or something like that) to see the issue.
If that is the reason, I think your code is good enough. Yus houd, for
shits and giggles, run it through the HTML Nu checker to see if it is
valid HtML.
I always try to steer developers away from accessibility workarounds
that are technically invalid HtML, at that point I propose using ARIA.
On 1/19/18, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
> If we do that, is there a way to have the Legend and buttons in the same
> row? I know we should not be using tables for layout, but that ship has
> sailed for this project.
>
> I was under the impression that the syntax of FIELDSET makes this
> impossible: the first element there must be LEGEND, so one cannot organize
> the legend and the buttons with their labels as one row in a table. That
> could be a visual problem to have the Legend/Question not in line with the
> answers.
>
>
> Joseph
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Beranek, Nicholas via WebAIM-Forum
> Sent: Friday, January 19, 2018 10:38 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of Joseph Sherman
> Sent: Friday, January 19, 2018 10:32 AM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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
>
> > > http://webaim.org/discussion/archives
> > >
> 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.
> > > http://webaim.org/discussion/archives
> > > > > >
--
Work hard. Have fun. Make history.
From: Joseph Sherman
Date: Fri, Jan 19 2018 10:33AM
Subject: Re: Grouping help
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Friday, January 19, 2018 10:38 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 10:32 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
From: Bryan Garaventa
Date: Fri, Jan 19 2018 11:01AM
Subject: Re: Grouping help
← Previous message | No next message
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 ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 9:34 AM
To: 'Beranek, Nicholas' < = EMAIL ADDRESS REMOVED = >; 'WebAIM Discussion List' < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Friday, January 19, 2018 10:38 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Friday, January 19, 2018 10:32 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.