E-mail List Archives

Search E-mail List Archives for

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

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

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

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

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

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

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