Give a form field an accessible name with a label

Each form field requires a label, linked to the form field with a for/id relationship.
The label text then becomes the form field’s accessible name.

Why is this important?

  • Screen reader users will hear this name read aloud when the field receives keyboard focus.
  • Voice recognition (voice control) users can focus the field by announcing this name.
  • Mouse and touchscreen users can click the label to give the form field focus.

The purpose of a label is to ensure the user understands the question. An effective label is clear and descriptive. If further explanation is needed, use a description.

The for/id relationship

The HTML basics:

  • Give the form field an ID.
  • Give the label the for attribute, with the value being the ID of the corresponding form field.

The IDs used must be unique for the page; otherwise, the wrong input fields may be announced or get focus. A quick test to see if the connection is working: click the label and see if the field receives focus.

Basic example with input type=”text”


<label for="color2">Your favorite color</label>
<input type="text" id="color2" name="color">

Basic example with a select


<label for="color4">Your favorite color</label>
<select id="color4" name="favoritecolor">
  <option>Red</option>
  <option>Blue</option>
  <option>White</option>
</select>

Basic example with a fieldset

Choose your size 
<fieldset>
  <legend>Choose your size</legend>
  <input id="size-s2" name="size" type="radio" value="small" />
  <label for="size-s2">Small</label>
  <input id="size-m2" name="size" type="radio" value="medium" />
  <label for="size-m2">Medium</label>
  <input id="size-l2" name="size" type="radio" value="large" />
  <label for="size-l2">Large</label>
</fieldset>

Other ways to provide an accessible name

The first rule of ARIA is, don’t use ARIA if there is a native HTML element for the job. But it’s valid to use aria-label or aria-labelledby to give an accessible name for a form control.

If you have to, here are the basics:


<input type="search" name="s" aria-label="Search">
<button>Search</button>

Search this website 

<span id="search-text">Search this website</span>
<input type="text" name="s" aria-labelledby="search-text">
<button>Go</button>

Visual text or equivalent, like a search icon, should always be visible, so sighted users don’t have to guess what they need to fill out.

If you must hide a label or control from vision, use the CSS class .screen-reader-text or equivalent.

Don’t use the CSS display: none, visibility: hidden or the HTML attribute hidden on a label, as that also removes the element, and its accessible name, from the accessibility tree.

<!-- this in incorrect code, the visual text Go is not describing what you need to fill out -->
<label for="search-text" class="screen-reader-text">Search this website</label>
<input type="text" name="s" id="search-text">
<button>Go</button>

<!-- this in incorrect code, label is removed from the accessibility tree, the input field has no accessible name -->
<label for="search-text" hidden>Search this website</label>
<input type="text" name="s" id="search-text">
<button>Search</button>

Always add a visible hint about how to fill out the form field.

<label for="search-text" class="screen-reader-text">Search this website</label>
<input type="text" name="s" id="search-text">
<button>Search</button>

How to test for a proper accessible name

Good tools to check the accessible name of a form input:

  • Your browser’s accessibility tree.
  • A screen reader, such as NVDA for Windows or VoiceOver/Safari for macOS.

Resources

WCAG Success Criteria for accessible names in forms

Giving a form control an accessible name is necessary to meet the WCAG success criteria:

Accessible names in WP Form plugins

Gravity Forms accessibility documentation: Labels and Placeholders.

Help wanted: We want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, settings, and screenshots. Please contact us if you want to help us with this additional content.

Other resources