WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Grouping help

for

From: Birkir R. Gunnarsson
Date: Jan 19, 2018 9:57AM

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