Should I put the label before or after the input element?

Question

For visually impaired users using a screen reader does it matter if the label for an input control be placed before or after the input?

For example, is there a difference (as far as the screen reader is concerned) between:

<label for="name">Name:</label>
<input id="name" />

and

<input id="name" />
<label for="name">Name:</label>

I am a web developer who typically does the first method, however some new effects require the label to be after the input. Not sure of how screen readers work - would they read the label for the input regardless of the label position when it got to the input? Would it explain there is a form element here, THEN read the label?

When dealing with alternate displays, does it matter if the label for an input control is placed before or after the input, and if so, which should it be?

Answer 1

If you include the correct ID (unique name, used only on 1 set of input/label) for both elements, the order of elements doesn matter. Alternatively you can use aria to describe the input like this:

<input aria-labelledby='id-of-my-label-located-elsewhere'>

Answer 2

While the order matters in deciding the label position (whether label should appear before or after the input), it doesn't matter in code as long as the IDs in id and for are the same -- the input and label will still be linked -- see the example on this fiddle.

Alternatively, you could wrap the <input> inside the <label>:

<!-- nested, text before input -->
<label>Phone: <input id="phone" /></label>

<!-- nested, text after input -->
<label><input id="employed" type="checkbox" /> Employed?</label>