Form labels and input elements in separate div's

Question

we are trying to layout 3 columns of a form like the second row in the image below

enter image description here

The label text and form elements' can vary in size and type so it's proving difficult to align as required that works cross browser. We are trying a number of solutions and one possibility is having a separate row for the labels and a separate row for the input elements. We can then vertically align the labels to the bottom and align the input elements to the top.

Would it be enough for screen readers if we included the necessary 'for' and 'aria' attributes on the label to associate it to the input element even though the label and input element are not beside each other in the source ? Accessibility is something we must consider.

Thank you for any advice. Fiddle below

http://jsfiddle.net/wYdZr/5/

    <div class="container_12" style="background:green;">
    <div class="grid_4 lbl"   >
          <label for="firstName">TR 1 TD 1</label>
    </div>
    <div class="grid_4 lbl">
            <label for="lastName" >Bonorum Fermentum Tortor Adipiscing Pharetra</label>
    </div>
    <div class="grid_4 lbl">
            <label>Bonorum Fermentum Tortor Adipiscing Pharetra Bonorum Fermentum Tortor Adipiscing Pharetra</label>

    </div>
    <div class="clear"></div> 
</div>
<div class="container_12" style="background:yellow;">
    <div class="grid_4">
          <input type="text" id="firstName"/>
    </div>
    <div class="grid_4"><textarea id="lastName"></textarea>
    </div>
    <div class="grid_4">
            <input type="text" id="phone" />
    </div>
</div>

jsfiddle.net/wYdZr/6 That fiddle will give you part of what you want, but I'm working on getting the text positioned correctly. — Jacques ジャック
This: jsfiddle.net/wYdZr/8 will work, but you have to have a height set on .lbl. — Jacques ジャック
Thanks for the reply and updated fiddle but all i want to know is if it's ok to place a label in a separate div to the input element it relates to ! — grimmus
Sorry, I went to your fiddle and it was not formatting correctly. But yes, you can do that. The label does not have to be directly beside the input. But that is best practice. — Jacques ジャック

unor unor · Accepted Answer · 2013-10-10T08:39:01

Would it be enough for screen readers if we included the necessary 'for' and 'aria' attributes on the label to associate it to the input element even though the label and input element are not beside each other in the source ?

Yes, that’s why there is the for attribute in the first place.

Of course there is always the possibility that some screen reader (versions) don’t support for, but that should be a minority and the error would be clearly on their side.

The for method is also mentioned in the WCAG 2.0 technique H44: Using label elements to associate text labels with form controls. Note that the test for this particular technique checks the position of the label:

label before input (text, file, password), textarea, select
label after input (checkbox, radio)

But this is only a requirement for this particular technique, so you don’t necessarily have to comply with it, as there are other techniques and ways to fullfil the relevant success criterions.

Form labels and input elements in separate div's

2 Answers