E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

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

Number of posts in this thread: 5 (In chronological order)

From: Allison Bloodworth
Date: Thu, Oct 21 2010 3:00PM
Subject: Accessible checkboxes & radio buttons in fieldsets with right-aligned labels
No previous message | Next message →

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 ADDRESS REMOVED =
510-289-6627

From: Sailesh Panchang
Date: Thu, Oct 21 2010 3:24PM
Subject: Re: Accessible checkboxes & radio buttons in fieldsets with right-aligned labels
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
> 510-289-6627
>
>
>
>
>
>
>
>

From: Nathalie Sequeira
Date: Fri, Oct 22 2010 12:00AM
Subject: Re: Accessible checkboxes & radio buttons in fieldsets with right-aligned labels
← Previous message | Next message →

Hello Allison,

> In general, this idea seems like a bit of a hack
>
Yes, I usually find gut feelings like that are pretty good indications
of that something is going wrong - and having to add superfluous stuff
(that in turn needs to be hidden again, causing a bunch of headaches)
rings alarm bells indeed :)

I took a quick look at the form in question, and - if I were working on
this - I'd take a quick step back and re-analyse the form's semantic
structuring. Interestingly, the heads up for this was in other parts of
the form, e.g. the "other role" input (shouldn't that be a
sub-information of the checkbox "other" above, which is inside a
fieldset "Role"?) or the "date started" vs. "Date ended" ... so there
might be a solution hidden along that path.

Unfortunately, I do not have the mentioned FF3.5 at the tip of my
fingers, so I do not know what woes become visible there.
But a quick check in IE6 & IE7 does not reveal any truly unsettling
jumbling of the layout that couldn't be fixed via conditional comments
(btw the legend floats nicely to the left in both cases, if that was the
problem?).
Of course, how far you want to dig in this direction depends a lot on
the expected audience and their technical profiles.

But personally I like the approach of doing the basics cleanly (i.e. on
the HTML structuring level), assuring optimal experience in newest user
agents via CSS, and letting the layout degrade gracefully & usably (and
if the semantics are right, that WILL be the case) for those very old
UAs that shouldn't really be around anymore anyway.

HTH in finding a viable approach!
Nathalie

From: adam solomon
Date: Fri, Oct 22 2010 12:39AM
Subject: Re: Accessible checkboxes & radio buttons in fieldsets with right-aligned labels
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
> 510-289-6627
>
>
>
>
>
>
>
>

From: Benjamin Hawkes-Lewis
Date: Fri, Oct 22 2010 12:57AM
Subject: Re: Accessible checkboxes & radio buttons in fieldsets with right-aligned labels
← Previous message | No next message

On 21 Oct 2010, at 21:57, Allison Bloodworth wrote:

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

Try wrapping the contents of the legend in a "span" and styling that.

<legend><span>Text goes here</span></legend>

This workaround normally works for me.

--
Benjamin Hawkes-Lewis