WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Radio Buttons in a Data Table

for

From: Tony Olivero
Date: Jul 10, 2012 4:28PM

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