WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: adam solomon
Date: Oct 22, 2010 12:39AM

These knids of css issues can be pretty frustrating, but bear in mind that
in IE8 and FF your code works nicely. That might be enough. If it's not,
here is a possible variation that might work for you. It is definitely not
clean code, but it might be workable with a few tweaks by you. It is tested
in ie6, ie8, ff (latest version), chrome:

html:

<div class="outer">
<fieldset id="ucb_student" class="fs">
<legend class="le">UCB Student?:</legend>
<div class="inner">
<div class="fi">
<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="se">
<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>
</div>
</fieldset>
</div>

css:

.outer
{
width: 180px;
}
.fs
{
border: 0;
background: none;
}
.le
{
border: 0;
}
.inner
{
float: right;
margin-top: -1.8em;
}

The hack here is that the radio buttons are floated to the right and the
entire div's width is limited as necessary to bring the buttons back closer
to the legend. Try and set the negative margin-top to the line-height to
achieve more stability. Good luck!

On Thu, Oct 21, 2010 at 10:57 PM, Allison Bloodworth <
<EMAIL REMOVED> > wrote:

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