WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Radio Buttons in a Data Table

for

From: Tony Olivero
Date: Jul 10, 2012 5:04PM

Believe me, I understand having to work within design parameters. My concern
is only over how to best make it accessible.

Your best bet might be to do a combination of title and off-screen text.
That is: put the title attribute on your radio buttons and then use
offscreen text on the first one to tell the user that if there program is
not reading the radio button value to switch it to using title instead of
label.

It's definitely a workable solution, just moderately more involved for the
user, but that may not be an entirely bad thing either. :)

I'd love to say use ARIA labeled by and be done with it, because I think
it's the best solution for a table like this, but I know Window-eyes at
least flat out doesn't support it yet.


Tony

-----Original Message-----
From: David Ashleydale [mailto: <EMAIL REMOVED> ]
Sent: Tuesday, July 10, 2012 17:55
To: WebAIM Discussion List
Subject: Re: [WebAIM] Radio Buttons in a Data Table

"If you're absolutely wedded to this setup, and I don't recommend it
because it doesn't translate well into progressive enhancement..."

And if you have time, I would love to hear your ideas for a different
design. The people that own this page basically told me that they will
consent to a new design if they have to, but that it will cost them time
and money that they are reluctant to spend. They want to know, "Is there a
way to use this design and still conform to WCAG and HTML standards?" If
not, they will bite the bullet because they do want to meet the standards.
But they really want to stick with this if it's at all possible.

Thanks,
David


On Tue, Jul 10, 2012 at 3:28 PM, Tony Olivero < <EMAIL REMOVED> > wrote:

> David,
>
> If you're absolutely wedded to this setup, and I don't recommend it
because
> it doesn't translate well into progressive enhancement as you'll see in a
> minute, you basically have two solutions: ARIA and off screen text.
>
> For the ARIA solution, You can give each column header an id, and use that
> id as part of an aria-labelledby attribute on each radio button. Problem
> with this is not all screen access technology/browser combinations support
> ARIA yet.
>
> For the off-screen text solution you have to code a CSS selector that's
> positioned off screen, and basically a pixel in size with no overflow.
> You'll have to use a label/span combination with the off-screen span
> holding
> the label text. I know some people are wary of using too much off-screen
> text because they fear search engine's will lower their pagerank because
of
> it.
>
> Title is a possibility, but you will have to instruct screen access
> software
> users to (and possibly how to) adjust their preferences to read this
> attribute as it is not a default in most programs.
>
> HTH,
> Tony
>
> -----Original Message-----
> From: David Ashleydale [mailto: <EMAIL REMOVED> ]
> Sent: Tuesday, July 10, 2012 17:20
> To: WebAIM Discussion List
> Subject: [WebAIM] Radio Buttons in a Data Table
>
> Hi,
>
> I wanted to see if anyone here has an opinion on the use of radio buttons
> inside a data table. The header of each row is a type of product and the
> columns are product features. There is a radio button in each data cell.
> Not every feature is available for every product, so there's not a radio
> button in every column for every product. This set up allows users to
> choose one available feature for every product -- the radio buttons in
each
> row are in the same "set" so only one can be chosen in each row.
>
> For those of you that can see images, here is an image of something
similar
> to what I'm talking about:
> [image: Table of Radio Buttons Survey Question]
> What is the best way to make a set up like this more accessible? Normally,
> I try to code radio buttons in fieldsets, but that isn't possible if each
> radio button is in its own table cell. Also, the radio buttons can't have
> explicit labels -- all of the radio buttons in one column share one
"label"
> -- the column header.
>
> Normally, I would try to suggest that this design not be used -- I don't
> like mixing forms with data tables. But visually, it is more compact than
> repeating the labels for every radio button.
>
> My initial thought is to add a TITLE attribute to each of the radio
buttons
> explaining which product and feature it is for. Will that be sufficient or
> are there other things I could do to make this design more accessible?
>
> Thanks,
> David
> > > >
> > > >