Chapter 16: Form labels

Form elements play a vital role on web pages. These are also the complex elements that need to be coded with care. The interaction with the web is purely dependent on usable and accessible form elements.
For a great accessible experience, every form element on the page must contain a label. The form elements referred for this purpose are input text elements, text area elements, radio buttons, checkboxes, dropdowns.
The label as per accessibility is something which is always visible on the screen. The label can be assigned to a form element either by <label> element or any other techniques that the markup supports. Attributes such as placeholders, title, aria-label are not considered as labels for the accessibility purposes until they adhere to the meaning of label.
Some exceptions where placeholders, aria-label or title can be used is when the purpose of the form element is otherwise apparent such as a magnifier image for search. If an image is substituted as a label for sighted users, the programmatic elements such as aria-label can be an additional label specifically for screen reader users.

Bad Example

<input aria-label=‘first Name’ id=‘fname’ type=‘text’ />
In the example above screen reader reads ‘First Name’ when the user navigates to the field but sighted users will not have any clue about the form label.

Good Example:

<label>First Name</label>
<input id=‘fname’ type=‘text’ />
In the example above the label is visible on the screen. Users will apparently know what is expected for it. However, this label will not be read by the screen reader while navigating with the tab key. Technically the label is not associated with the form element.
The label and form association will be discussed in the next chapters.