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

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>

Answer 1

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.