WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Sailesh Panchang
Date: Oct 21, 2010 3:24PM

Well AT will be able to access both the off-screen content and
on-screen content leading to duplication as one reads through the
form.
You need to experiment with the CSS and determine the best fit
across all browsers.
I see developers resorting to off-screen technique more than is
warranted in situations in which it is not recommended.
Incorrect application of an accessibility technique or using one
where it is not warranted often creates more problems for the end
user.
Sailesh Panchang
Accessibility Services Lead
www.deque.com

On 10/21/10, 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
>
>
>
>
>
>
>
>