WebAIM - Web Accessibility In Mind

E-mail List Archives

Alternatives to LEGEND for a radio button?

for

From: D A
Date: Aug 24, 2009 2:35PM

I'm trying to get a form formatted so that LABELS and nested LEGENDS
look the same. An example scenario:

Legend1
label1 | [textbox1]
label2 | [textbox2]
nested legend | () radioButtonLabel1 () radioButtonLabel2

The goal is to have a form with labels on the left, fields on the
right formatted via CSS.

Because labels apply to the form field itself, it appears one should
use a legend to style a group of radiobutton lists (or checkboxes).

The problem is the buggy browser support of the legend tag, especially
in Firefox.

The (seemingly) accepted workaround is to wrap the legend content in a
span and then style the span.

The catch with that is if you are using percentage widths. The problem
is that the span's percentage width is based on the width of the
legend's content, which obviously will vary depending on the content.

So, my questions:

1) From an accessibility standpoint, it nesting a legend like this acceptable?

if so,

2) Anyone know of legend content CSS fix that will accommodate a
percentage width?

if not.

3) Would there be another tag that is acceptable in this scenario?
I've read that some have just abandoned use of the legend tag due to
all the styling issues and instead use a header tag of some sort.

Opinions?

-Darrel