WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible checkboxes & radio buttons in fieldsets with right-aligned labels

for

From: Allison Bloodworth
Date: Oct 21, 2010 3:00PM

Hi folks,

We are trying to implement accessible checkboxes & radio buttons. I found a great article about this: http://www.alistapart.com/articles/prettyaccessibleforms, but unfortunately this doesn't work for us since we chose right-aligned instead of left-aligned labels.

I came up with this solution, but unfortunately it doesn't work in most browsers in anything except the latest version (e.g. it doesn't work in FF 3.5), I believe because styling of the legend wasn't allowed until recently: http://allison.media.berkeley.edu/APBearsAddGradStudentMentoring.html

--------------------------------------------
Here is the HTML:
<fieldset id="ucb_student" class="ui-corner-all unstyled">
<legend class="width200">UCB Student?:</legend>
<div class="floatedField IE7margin200">
<input id="p_ucb_student_yes" type="radio" class="ui-radio" name="ucb_student" checked="checked" />
<label for="p_ucb_student_yes" class="radioLabel">Yes</label>
</div>
<div class="margin200">
<input id="p_ucb_student_no" type="radio" class="ui-radio" name="ucb_student" />
<label for="p_ucb_student_no" class="radioLabel">No</label>
</div>
</fieldset>
And pertinent CSS:
fieldset.unstyled {
border: none;
background: none;
padding: 0;
margin: 1px 0px 6px 3px;
}

fieldset.unstyled legend {
border: none;
background: none;
padding: 2px 5px 0px 0px;
float: left;
text-align: right;
margin-left: -5px;
}
-------------------------------------
We thought perhaps the thing to do would be to position the legend offscreen, so there is a fieldset and legend for accessible technology, and to have a second "label" for onscreen use. Something like this:
<label class="width200">UCB Student?</label>
<fieldset class="radiobuttons">
<legend class="offscreen">UCB Student?</legend>
<ul>
<li><label for="p_ucb_student_no"> <input value="Y" id="p_ucb_student_no" name="p_ucb_student_no" onclick="dispHomeInst(this.value);" type="radio" class="radio-lineups">Yes</label></li>
<li><label for="p_ucb_student_no"> <input value="N" id="p_ucb_student_no" name="p_ucb_student_no" onClick="dispHomeInst(this.value);" type="radio" class="radio-lineups">No</label></li>
</ul>
</fieldset>


But we don't really want accessible technology to read that label, so perhaps it should just be a span? Also, there isn't a "for" for that label that would really make any sense.

In general, this idea seems like a bit of a hack--are there any better solutions out there?

Thanks much!
Allison

Allison Bloodworth
Senior User Experience Designer
Educational Technology Services
University of California, Berkeley
<EMAIL REMOVED>
510-289-6627