Not signed in (Sign In)

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorrforgo
    • CommentTimeAug 16th 2008
     
    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.

    -Rik
    • CommentAuthorrforgo
    • CommentTimeAug 16th 2008
     
    Sorry, the site is here:
    http://www.riseprogram.com/rise_registration_form.htm
    • CommentAuthorzon
    • CommentTimeAug 21st 2008
     
    Labels are associated with fields one of two ways. Labels can simply wrap a field.

    <label>Address <input name="address" type="text" /></label>

    Additionally, a label can put a field id into it's for attribute.

    <label for="address">Address</label> <input id="address" name="address" type="text" />

    To fix the accessibly problems with the form export, you'll need to make sure every label is associated with a field.

    For FormAssembly we'll be looking into improving our labels, so our forms are more accessible by default.
    • CommentAuthorzon
    • CommentTimeAug 21st 2008
     
    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.
    • CommentAuthorFormulate
    • CommentTimeSep 23rd 2008
     
    This article from WebAIM about accessibility of forms, including radio buttons, might be of assistance:

    http://www.webaim.org/techniques/forms/controls.php#radio

    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
    • CommentAuthorcedsav
    • CommentTimeSep 25th 2008
     
    Jessica,

    FormAssembly correctly associates the label element to radio inputs. For instance:

    <input type="radio" id="red" ... /> <label for="red">Red</label>
    <input type="radio" id="blue" ... /> <label for="blue">Blue</label>

    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...
    • CommentAuthorFormulate
    • CommentTimeSep 28th 2008
     
    Hi Cedric & Matthew

    You are completely right and I was wrong to say the H1-H6 was inappropriate to use for the stub of a radio button question.

    My sincere apologies!

    Jessica Enders
    Principal, Formulate Information Design
    http://formulate.com.au
    • CommentAuthorcedsav
    • CommentTimeOct 2nd 2008
     
    No need to apologize, it wasn't exactly clear what we where talking about in the first few messages...