Use absolute positioning to visually place error messages after the form control they are associated with while keeping them as part of the form control’s label.

The techniques used in the Required Form Fields example to place the asterisk after the input control can easily be reused to apply to an equally important scenario: displaying error messages for a form.

In this case, the error message is emphasized within the label for the form field. Semantically this makes sense – we highlight error messages with colour, different text weight or other visual means in order to emphasize them anyway. Using a <label>... <em></em></label> not only provides us the elements for styling but also makes sense – the label (and therefore the error message) is specifically associated with the form field using the for attribute.

Screen shot of form field with label, showing the error message placed to the right of the text box.

This technique is essentially an extension of the one used for denoting required fields. The exception is the HTML:

<div>
<label for="uname">Username
<em>must not contain spaces</em>
</label>
<input id="uname" type="text" name="uname" value="" />
</div>

Placing the error message to the right of the field for easy scanning is useful, and the fact that it is still part of the label, and found before the text box in source order allows it to be read out by screen readers. This is a case where a zoom layout could also be used to provide a version to low vision users.

View the Error Messages Example