WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alternatives to LEGEND for a radio button?

for

From: D A
Date: Aug 27, 2009 9:40AM

> Stick with the span technique, using display block, relative/absolute
> positioning etc you should be able to achieve any layout required

Ben:

Alas, that just doesn't work with the Legend tag. There are some major
bugs--especially in firefox--that prevent various styling and
positioning options for Legend.

The visual issue, in our case, is that titles groups of checkboxes or
radio buttons visually need to be shown just like standard
label/textbox fields. Label in the left column, field in the right.

Off the top of my head (I haven't tested these yet) I see a couple of options:

Option 1:

<legend>This is the group title (display: none)</legend>
<h2>This is the group title</h2>

Idea behind that option is that screen readers would read the legend,
everyone else would see the h2. But it's ugly as we're repeating
content in the markup.

Option 2:

<h2>This is the group title</h2>
<label><span position: off screen>This is the group title</span>
option 1 <checkbox></label>
<label><span>option 2 <checkbox></label>

Again, ugly repeating of content.

And in both cases, it seems that things would get redundant for folks
like Goef who scan through a form twice in both forms mode and
non-forms mode.

-Darrel