Main Content

Structure

Forms

In most, if not all, web forms, the text (or label) should precede the input method (textbox, dropdown, radio button, etc.), either directly above or to the left.  Placing the label either to the right or below the input field causes the user to arrive at the input without knowing what is being asked of them.  This is true both visually as well as with a screen reader.  A screen reader will identify items from top to bottom and left to right similar to a book.  Placing a label above an input field works better in most cases.  Placing the labels above the input field is preferred for all users, but for users with cognitive disabilities, having the label just above the input allows them to follow the form more fluently. 

If you place the label to the left of the input field you should use right alignment of the labels to eliminate large amounts of white space between the label and the input.  Large amounts of white space can cause issues for users who have cognitive disabilities such as dyslexia or other vision related disabilities.

Label placement for drop-down list boxes — To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.


Top of page