I've completed a form using the wizard and it looks great. I'm using the form on a site that requires it to be Section 508 compliant. I'm using the WebAIM Firefox plugin to review it for accessibility. https://addons.mozilla.org/en-US/firefox/addon/6720
My completed form originally showed eight accessibility errors and I was able to reduce it to five without affecting the look or functionality of the form. But now I've hit a wall. I'm getting a variety of "orphaned form label" and "missing form label" errors. I've tried manually editing the code with no success (removing the "label for" tag affects the CSS, and inserting <br> tags puts my label below the radio button. Any idea how to correct this? I can't take it live until the errors are fixed.
Apologizes, the labels in question shouldn't have an associated field. The orphaned labels in that form describe a list of radio fields. To fix them we recommend using an h1-6 tag instead. The tricky part is adding the appropriate h tag to any label styles that may already be present.
It shows that labels should be associated with each radio button. You shouldn't need to use the (incorrect) H1-H6 tags ... Zon (Matthew), is this a workaround for current FormAssembly limitations?
Cheers
Jessica Enders Principal, Formulate Information Design http://formulate.com.au
The problem is that we also use the label element for the question, as in:
<label>What is your favorite color?</label> <input type="radio" id="red" ... /> <label for="red">Red</label> etc...
In this case, the accessibility validators will raise an error because the first label is not associated to any particular input.
I would argue that it's more of a shortcoming of the specifications than an accessibility issue, since the label tag is the most semantically appropriate element here. For instance, if we had a free text field or select input, it would work just fine:
<label for="color">What is your favorite color?</label> <input type='text' id="color" ... />
In any case, if passing the automated accessibility tests is a requirement, as Zon suggested you should change the markup. For instance:
<h4>What is your favorite color?</h4> <input type="radio" id="red" ... /> <label for="red">Red</label> etc...