Form elements require Labels
Updated over a week ago

Form elements should always have labels even if it seems obvious as to what input the form field is requiring.

There are a couple ways in which form fields can now be labeled.

One is by using the form's label element.

This would look like the following:

<label for="first-name">First name</label>
<input id="first-name" name="first-name" type="text"/>

The second way is using aria attribute of aria-label or aria-labelledby.

<input id="first-name" name="first-name" aria-label="First name" type="text"/>

Note: placeholder text may be read by some screen readers but is not considered the best practice for applying labels to fields. There are usability concerns for using placeholder text that are not just accessibility related. This includes some browsers automatically filling in form content where the user may not be completely sure that the correct content was filled in without being able to find a label for the field.

Did this answer your question?