Lead:  << Your name/s >> << Select the status -  ongoing Waiting Done published on hold >>

Related Pages: << Links to related pages, if relevant >>

Description

Labels represent a caption for an item in a user interface. They are most often used in association with input fields of a form.

Usage & Behaviour

General guidelines

Structure

Placement and Positioning

Default State

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

Best practices

Accessibility compliance

Whenever possible, use the label element to associate text with form elements explicitly. The  for attribute of the label must exactly match the id of the form control.

Focus management

Labels are a visual indicator that cannot be focused on, however their associated form elements can.

Screen reader support 

Following the recommendations provided above will provide the necessary tools for screen reader support. Users are notified about the existence of the associated form element for the label. Make sure the corresponding content areas also supports screen readers for content and behaviour - see Screen Reader Guidelines

Design

Code