Yogesh Chauhan's Blog

Always add associated labels to your Form elements

in UI/UX on December 3, 2020

If you try to run an audit check from Google or any other services, you might get an accessibility error saying that, “Form elements do not have associated labels”.

Labels ensure that form controls are announced properly by assistive technologies like screen readers.

Assistive technology users rely on these labels to navigate forms.

Mouse and touchscreen users also benefit from labels because the label text makes a larger click target.

How to add labels to form elements

There are two ways to associate a label with a form element. Either place the input element inside a label element:


<label>
   Receive promotional offers?
  <input type="checkbox">
</label>

Or use the label’s for attribute and refer to the element’s ID:


<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

When the checkbox has been labeled correctly, assistive technologies report that the element has a role of checkbox, is in a checked state, and is named “Receive promotional offers?”

HTML label Tag

The label tag defines a label for several elements:


<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<meter>

Screen reader users will read out loud the label, when the user is focused on the element. So that users who have difficulty clicking on very small regions (such as checkboxes) – because when a user clicks the text within the label element, it toggles the input (this increases the hit area). 

The for attribute of the label tag should be equal to the id attribute of the related element to bind them together. 

Credit: Web Dev


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What Is a Graph Database?MiscellaneousHow to Create a Backup From Any Database in SQL?SQL/MySQLHow to vertically align a html radio button to it’s label?CSSHow to create a simple digital clock using JavaScript?JavaScriptWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscellaneousHow to create a simple stopwatch using JavaScript?JavaScript