WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Radio Buttons in a Data Table

for

From: James Nurthen
Date: Jul 11, 2012 3:40PM

Off-screen labels is a bad idea Radio Buttons (and checkboxes)

If there is a valid label associated with a radio button (or checkbox) then
IE will draw the focus indicator around the text rather than around the
button itself. So if this label is off-screen there will be no visible
focus indicator for the radio button.

In the situations where there is no conventional label for a radio button
then using title (or aria-label or aria-labelledby if your browsers support
them fully) is the preferred approach.

Regards,
James


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

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