WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: urgent sample of good code

for

From: James Nurthen
Date: Feb 5, 2013 3:33PM

If you can't do fieldset/legend due to styling and/or incompatibilities
with a table-based layout you could see if the aria role of group (with a
corresponding aria-labelledby) would work for you.

i.e.

<table role="presentation">
....
<tr role="group" aria-labelledby="questionX">
<td role="presentation" id="questionX">Question Text?</td>
<td role="presentation"><input type="radio" aria-label="1"></td>
<td role="presentation"><input type="radio" aria-label="2"></td>
<td role="presentation"><input type="radio" aria-label="3"></td>
<td role="presentation"><input type="radio" aria-label="4"></td>
<td role="presentation"><input type="radio" aria-label="5"></td>
</tr>
....
</table>

Note: I haven't tested this and I'm not sure this is the exact thing you
want - but this should work.
Additional note: role="presentation" shouldn't be necessary on the TD
elements as it should inherit from the table, but IE seems to leave
singleton gridcell elements if you don't do this.

Regards,
James

On Tue, Feb 5, 2013 at 5:18 AM, Corbett, James
< <EMAIL REMOVED> >wrote:

> Hmmm, I've been testing our external apps for the past year and a half and
> haven't seen a suitable working example.
>
> j.
>
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:
> <EMAIL REMOVED> ] On Behalf Of John Hicks
> Sent: February 5, 2013 6:25 AM
> To: <EMAIL REMOVED>
> Subject: Re: [WebAIM] urgent sample of good code
>
> It works for me (announcing the legend) under IE, FF, and Chrome.
> Or are you saying that putting it all into some table disrupts this?
>
> I used Jaws 13.
>
> John
>
>
> Le 04/02/2013 22:01, Corbett, James a écrit :
> > Hi:
> >
> > There is a bit of a glitch to all of this. If by default the radio
> buttons are not selected then tabbing through the array will not announce
> the legend.
> >
> > Jim
> >
> > -----Original Message-----
> > From: <EMAIL REMOVED>
> > [mailto: <EMAIL REMOVED> ] On Behalf Of John Hicks
> > Sent: February 4, 2013 3:46 PM
> > To: WebAIM Discussion List
> > Subject: Re: [WebAIM] urgent sample of good code
> >
> > What did you try?
> > A fieldset needs a legend tag inside it.
> > A quick google on these terms will reveal all .... if you spell them
> > correctly.
> >
> > I have been away from the list for a while and I don't know if posting
> > of code is encouraged, but what you need is
> >
> > <fieldset>
> > <legend> Question about X </legend>
> >
> > .... the radio buttons, each with their own <label></label>
> >
> > </fieldset>
> >
> > The fieldsets will create lines, you need to get rid of them with CSS.
> >
> > hope that helps.
> >
> >
> >
> > Le 04/02/2013 18:15, Lucy Greco a écrit :
> >> Hello:
> >> Your write it is a the best answer to use filed sets but I can't
> >> get them to fix it at all Lucy
> >>
> >> -----Original Message-----
> >> From: <EMAIL REMOVED>
> >> [mailto: <EMAIL REMOVED> ] On Behalf Of John Hicks
> >> Sent: Monday, February 04, 2013 6:15 AM
> >> To: <EMAIL REMOVED>
> >> Subject: Re: [WebAIM] urgent sample of good code
> >>
> >> (resending with clean subject line)
> >>
> >> Hi
> >>
> >> Although the table sounds like it is being misused, the solution to
> >> the problem you mention lies more in using fieldsets and labels
> correctly.
> >> A fieldset for each question and proper labels (for/id) for each of
> >> the
> >> 5 radio buttons in each question.
> >>
> >> Presentation tables in themselves are not non-compliant. (Although
> >> they are cumbersome).
> >>
> >> I even gather that "tables for layout" are back "in" .... whatever
> >> that means.
> >>
> >> But the accessibility problème you are asking about revolves around
> >> form labels and fieldsets (I believe).
> >>
> >> John
> >>
> >> Le 01/02/2013 02:47, Lucy Greco a écrit :
> >>> Hello:
> >>> Does anyone have a sample of a survey using a table lay out for
> >>> a ranking set of questions. I need to provide a contractor a sample
> >>> of
> >> what
> >>> I am looking for and they wanted it in a hurry.
> >>> The idea is the user is given ten ideas they need to agree or
> >>> disagree with in a scale of one to 5 and they are using radio
> >>> buttons for the scale. They have laid this out in a table and have
> >>> not even tried to lay it out with roe or columns headers. I think a
> >>> better way to do it is
> >> treat
> >>> each idea as a separate question but I lost that fight. If anyone
> >>> has
> >> the
> >>> sample code I could give them I would really appreciate it. The
> >>> thing
> >> that
> >>> kills me is the front page of the survey said it was w3c compliant
> >>> well
> >> I
> >>> have to say if my screen reader set to out of box default settings
> >>> could not tell what I was agreeing to or that I was even agreeing or
> >> disagreeing
> >>> it isn't Lucy
> >>> > >>> > >>> list messages to <EMAIL REMOVED>
> >>>
> >> --
> >> John Hicks ( <EMAIL REMOVED> )
> >> Ingénieur Consultant en Accessibilité Docteur en Sciences Cognitives
> >>
> >> www.Urbilog.fr -- Solutions Accessibles
> >>
> >>
> >> > >> > >> list messages to <EMAIL REMOVED>
> >> > >> > >> list messages to <EMAIL REMOVED>
> >>
> >
>
>
> --
> John Hicks ( <EMAIL REMOVED> )
> Ingénieur Consultant en Accessibilité
> Docteur en Sciences Cognitives
>
> www.Urbilog.fr -- Solutions Accessibles
>
>
> > > messages to <EMAIL REMOVED>
> > > >