Forms – Label Placement and Structure

A form with well labelled controls helps not only people with disabilities but any user to input the data correctly at the first go!

Form labels are used to identify the purpose of form controls such as text fields, checkboxes, and radio buttons.

Visual text used to label user interface controls should be a part of the accessible name for the respective control. In fact, the best practice is to have the visual text at the beginning of the accessible name to enable assistive technologies, such as speech recognition tools and text-to-speech software behave in a predictable manner and avoid confusion.

Required fields SHOULD indicated via the label. Additionally, the following recommendations SHOULD be observed.

• The required attribute MAY be used.
  Note: Caution when using this attribute as it will cause some browsers to show generic error messages.
• In addition to the required attribute, use aria-required="true" attribute inside the <input> field.
• Include the word “required” in the form field label rather than an "*".
• If you use an "*" to denote required fields, include instructions at the top of the page indicating that an asterisk means that a form field is required.
• When validation fails, ensure that focus is taken to the form fields that fail validation.

Below points MUST be considered when labelling a form control.

• Place the label in close visual proximity to the related form control.
  • The placement of the label SHOULD be Top Left Aligned for input fields and dropdowns. In DOM, it SHOULD be placed before the respective form control.
  • The placement of the label SHOULD be Right Aligned for radio buttons and checkboxes. In DOM, it SHOULD be placed after the respective form control.
• The labels for the form controls MUST be unique.
• The label MUST describe the purpose of the form control.
• Form control label text MUST have sufficient color contrast with its background.
  • Minimum requirement of 4.5:1 MUST be met for the standard text size labels.
  • Minimum requirement of 3:1 MUST be met for labels having larger text size i.e., 14pts with bold weight or more than 18 pts.

1. <label> element:
   • This element is used to define a label for form control.
   • The <label> element can be defined implicitly and explicitly.
     • For explicit association, the label is associated with the form control using for and id attributes.
       For example:

       

       <label for="firstname">First name (required)</label>
       <input type="text" name="firstname" id="firstname"><br>
       

       

       <input type="checkbox" name="remember" id="remember">
       <label for="remember">Remember Me</label>
       

     • For implicit association, the form control is defined within the <label> element. Here, no for and id attributes are used.
       For example:

       <label>
           First name (required)
           <input type="text" name="firstname">
       </label>
       

     • Form controls MUST have unique id attribute value.
   • A visually hidden text CAN also be specified within the label element to explicitly associate it with the form control in case of design constraints.
     • Hiding the label text CAN be achieved with CSS clip property and hidden: overflow property.
       Note: A visible label is ALWAYS advisable since it is beneficial for all users.
2. title attribute:
   • This attribute CAN be used to specify an accessible name for the form control ONLY when the visual text is not available.
     For example:

     <input title="Search" type="text" name="search">
     

   • On mouse hover, it will display the specified text in a form of tooltip.
   • This should NEVER be used ideally even though it is part of the accessible name calculation. It often leads developers to believe a valuable tooltip has been created which is not the case.
   • This attribute often leads to duplicated announcements by screen readers if a well-defined programmatic label is already present.
3. placeholder attribute:
   • It provides instruction or an example of required data format within the field that has not yet been edited by user.
   • It CAN be used as last resort along with an aria-label attribute to convey the purpose through a visual text for the field wherein there are design constraints or no visual label at all.
     For example:

     <input placeholder="Search your text" type="text" name="search" aria-label="Search">
     

   • Though it can provide an additional instruction or information, it MUST be avoided in scenarios wherein a well-defined programmatic label and instructions are provided for the form control.
   • Generally, has a very poor contrast than the text that has been input by user.
   • It disappears as soon as the user types anything within the field.
   • It is NOT to be considered as a replacement for labels.