7.2. Use the aria-label or title attribute to label form fields that don’t have a visible label

To label form fields that don’t have a visible label:

  1. Add aria-label or title to the field.
  2. Populate the attribute by specifying the field’s function.
<input type="search" aria-label="Your search" name="recherche" />
<input type="submit" value="Search" />
<select aria-label="Filter news" name="filter">
   <option>By Date</option>
   <option>By Topic</option>
   […]
</select>

Note

Fields that don’t have a visible label, can also be labeled with the <label> element and the for and id attributes.

Then hide the <label> off screen. For example using CSS “position: absolute;” and “left: -99999px;“.

Warning

The placeholder attribute cannot serve as a label.

It should only be used to provide additional assistance with text entry.

<input type="search" aria-label="Your search" placeholder="Enter keywords" />

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top