translate
  1. Learn
  2. Quicksheets
  3. Form Labels

Form Labels

Introduction

The purpose of forms is to collect information, but in order for someone to provide the information you are requesting, they need to know what you are asking for. This may seem like something that would be easy to accomplish, but there are a number of considerations to take into account, especially on the web.

Questions to ask

Does the label clearly indicate the desired response?

Clear instructions will result in more accurate responses and faster completion.

  • Use straightforward language
  • Consider writing the label as a question

Does the label have enough visual contrast with the background and surrounding elements?

If a sighted user cannot read the form label, they won’t be able to effectively fill in your form.

  • Ensure the label text is legible in terms of size, weight, and color
  • Make sure the text is presented against a solid background (i.e., not an image)
  • Keep surrounding visual noise to a minimum

Are the label and the form field associated with it visually connected?

You want it to be obvious that a given field and its label go together.

  • Provide ample space around a label and its associated field to ensure they are visually grouped
  • Label placement on top of the field is generally best

Are the field and label connected in non-visual ways as well?

Non-sighted users will not know what you are asking for if the label text is not explicitly associated with the field.

  • Use a label element for the label text
  • Use the HTML attributes for and id to associate the field with its label

<label for="name">What is your name?</label>
<input id="name" name="full-name">

Does the label remain visible when the user is filling in the field?

Some browsers "zoom" into a field when a user is entering a value into it. You will want your field label to remain visible so sighted users may reference it while filling out the form.

  • Avoid placing labels to the side of the field (they may get cut off)
  • Prefer label placement above the field

If there are supplementary instructions, are they connected both visually and non-visually?

If a particular field requires a bit more information, you want to make sure both sighted and non-sighted users have access to that information.

  • Make the supplementary text visually distinct from the field’s label (e.g., smaller or placed below the field as opposed to above it)
  • Ensure the supplementary text is legible in terms of size, weight, and color
  • Associate the supplementary text with the field using the aria-describedby attribute:

<label for="email">What is your email address?</label>
<input type="email" id="email" name="email" aria-describedby="email-note">
<em class="notes" id="email-note">
  We will only use your email address to respond to your message.
</em>

Is it clear which fields are required and which ones are optional?

Providing a clear indication of what is required and what isn’t will shorten completion times, increase accuracy, and reduce frustration.

  • Avoid optional fields whenever possible
  • If all fields are required, state that up front.
  • If only some fields are required, make it visually clear for sighted users
  • Use the required attribute to ensure the browser will inform the user that the field must be filled out
  • Use the aria-required attribute to ensure non-sighted users are informed that a field is required:

<label for="name">What is your name?</label>
<input id="name" name="full-name" required aria-required="true">

For less-obvious questions, have you provided a hint about the kind of response you desire?

The kind of information you are asking for may not be immediately obvious to your users. In these instances, consider providing a hint.

  • Ensure the hint is legible.
  • Use the placeholder attribute to provide the hint.

<label for="test">Enter three numbers followed by two letters</label>
<input id="test" name="test" placeholder="e.g. 123ab">

If there is an error with the form, have you clearly provided information about it?

Clearly articulating issues and how to resolve them will reduce user frustration.

  • When responding to an error from the server, collect all errors into a message at the top of the form.
  • Within that message, link directly to each field with an error, using its id as an anchor point.
  • Use color and/or iconography to make fields with errors visually distinct from other fields
  • Provide inline error messages following the supplementary instructions guidelines (above)
  • Indicate that the field has an error to non-sighted users via the aria-invalid attributes

<label for="name">What is your name?</label>
<input id="name" name="full-name" required aria-required="true"
       aria-invalid="true" aria-describedby="name-error">
<strong id="name-error" class="validation-error-message">
  Your name is required
</strong>

 

Bibliography

  1. Wroblewski L. Web Form Design: Filling in the Blanks, 2008.
  2. Gustafson A. Falling in Love With Forms (Video). URL: https://vimeo.com/144870932
  3. Smashing Editorial, Web Form Design: Showcases And Solutions, Smashing Magazine, URL: https://www.smashingmagazine.com/web-form-design-showcases-and-solutions/.
  4. Babich N. Designing More Efficient Forms: Structure, Inputs, Labels and Actions. UX Planet. URL: https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f
  5. W3C. Web Accessibility Tutorials: Forms, URL: https://www.w3.org/WAI/tutorials/forms/
  6. Web AIM. Creating Accessible Forms, URL: http://webaim.org/techniques/forms/.
  7. American Federation for the Blind. Designing Accessible Web Forms, URL: http://www.afb.org/info/programs-and-services/technology-evaluation/creating-accessible-websites/accessible-forms/1235