Place the label above the form field

Note: this is best practice and not a WCAG requirement.

Place the label above the form field, like a text input, textarea or select. Not next to it, below it, or inside the form field, but on the line above the form field. Do this consistently for all form fields.

This placement has several advantages:

• It provides sufficient space for labels of varying lengths. Users may be using translation software on the page, which can cause labels to be longer or shorter than expected.
• This works better for users who zoom in on the text.
• Aligning labels, form fields, and actions vertically creates a natural “scan line”. This makes it easier for people to focus on this line.

Why is this important?

People read from the top down and expect information to be presented in that order.

Your brain automatically connects what’s placed together, so make sure the label is visually close to the form field. This makes it clear what belongs together.

Floating labels

Place labels outside the form field, not inside. This way, the label always has a fixed position and can be displayed at a readable size.

Floating labels are harder to understand for users. Read the research on: Material Design Text Fields Are Badly Designed by Smashing Magazine.

Be consistent

As this is best practice you are not required to place the label above the form field. But whatever you decide, be consistent. That way the users understand better and faster how to fill out the form.

Resources

• Adrian Roselli: Avoid Messages Under Fields.
• Smashing Magazine Material Design Text Fields Are Badly Designed.