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