WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alternatives to LEGEND for a radio button?

for

From: Chris Hoffman
Date: Aug 27, 2009 9:00PM

For Firefox at least (I don't have copies of IE or Safari on hand
right now to play with), you could repeat the legend in the title
attribute of the fieldset itself (easy enough to do with a CMS
template), and then display it, with whatever style you want, with
generated CSS content. For example:

Markup:

<fieldset title="Personal Info">
<legend><span>Personal Info</span></legend>
<!-- form elements -->
</fieldset>

CSS:

fieldset:before {
content: attr(title);
display: block;
/* other styles */
}

/* Hide the actual legend off screen */

legend {
padding: 0;
}

legend span {
position: absolute;
left: -9999px;
}

This would avoid the repeated content problem of the heading solution
(as long as you don't consider the title attribute to be "content"),
and would arguably be a legitimate use for the title attribute.
Conditional comments can be used to target alternative styles to
browsers that don't support generated content (IE 7 and below, e.g.).

Chris

On Thu, Aug 27, 2009 at 6:36 PM, Chris
Pearce< <EMAIL REMOVED> > wrote:
>> Stick with the span technique, using display block, relative/absolute
>> positioning etc you should be able to achieve any layout required
>
> The span technique is limited especially when the legend needs to be positioned to the left and inputs to the right, I believe this can't be done. Using absolute positioning in most cases isn't suitable as it's taken out of the normal flow of the document. I've given up on trying to achieve this. At the end of the day legends are extremely limited in terms of styling.
>
>
> solutions for a digital world
> ----------------------------------------
>
> Introducing Dimensions...The end-to-end enterprise ecommerce solution.
> Start, grow and manage your online business with Dimensions.
> ----------------------------------------
> level 1, 11 albany street
> st leonards nsw 2065
> ----------------------------------------
> p: 02 9467 2500
> d: 02 9467 25
> f: 02 9431 5999
> e: <EMAIL REMOVED>
> w: www.bluearcgroup.com
> ----------------------------------------
> Privileged - Private & Confidential
> This email and files transmitted with it are intended solely for the use of the addressee(s) and may contain information which is confidential or privileged. If you are not the intended recipient, be aware that any disclosure, copying, distribution or use of this email or any attachment is prohibited. If you receive this email and you are not the addressee, or you have received this email in error, please disregard the contents of the email, delete the email and notify the author immediately.
>
>   Please consider the environment before printing this e-mail
>
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of ben morrison
> Sent: Friday, 28 August 2009 1:23 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Alternatives to LEGEND for a radio button?
>
> On Thu, Aug 27, 2009 at 3:56 PM, D A< <EMAIL REMOVED> > wrote:
>> I'm tempted to consider this an issue and figure out a way to deal
>> with the inability to style Legend tags properly. However, this seems
>> to maybe be more of a bug/oversight of the screen readers themselves.
>
> Thats front end web development for ya!
>
> Stick with the span technique, using display block, relative/absolute
> positioning etc you should be able to achieve any layout required
>
> Ben
>
> --
> Ben Morrison
>