Form Labels and Accessibility

Hello,

First, hope I sent this to the correct group. If not, could you let me know where to direct my question? Thanks.

And now my question. I am working on a few detailed forms and I am wondering the best way to have a radio button followed by an input. Below is what I currently have.

<label><input type="checkbox" name="referral" value="Newspaper" /> Newspaper</label>
<label><span class="hidden">Enter newspaper name</span> <input type="text" size="30" name="newspaper_referral" /></label>


And for reference, the CSS for the class="hidden" is:
.hidden {text-indent: -999em;}

Essentially, using CSS I have the above visually grouped together and I do not want the second label "Enter newspaper name" to be displayed in most graphical web browsers that support current web standards (FF, IE, Safari, etc.) so it displays as (radio button) Newspaper [text field]. I have included the "Enter newspaper name" and is positioned off the screen but is accessible to screen readers and other technologies that do not support CSS. Is this method acceptable or is there a better way/technique to achieve my goal?

Thanks,
Wendee

Received on Tuesday, 29 May 2007 15:26:19 UTC