Understanding WCAG 3.3.2 Labels or Instructions
Version and Level: 2.0/2.1/2.2 (Level A)

Success Criterion 3.3.2 requires that labels or instructions are provided when user input is presented. This ensures that users can understand the purpose of each form field and how to complete it correctly. The success criterion does not apply to links or controls that are not related to data entry. Labels and instructions are essential for all users, especially those with cognitive disabilities, to navigate and interact with web forms effectively.

Benefits:

  1. Users with Cognitive, Learning, and Language Disabilities: This feature provides clear identification and instructions for form controls, ensuring that users understand what input is expected.
  2. Assisting All Users: Labels can prevent users from leaving data entries empty or filling them incorrectly, thereby preventing failed submissions and frustration for users.

Main Objective:

To ensure clarity and ease of use for all form fields and user controls, provide clear labels or instructions explaining their purpose and correct completion. Instructions should clarify data entries and inputs, as well as those with specific requirements, such as date pickers (e.g., YYYY/MM/DD format). While instructions are encouraged, avoid cluttering the document with excessive labels. Use concise labels and add alternative methods like title attributes or "aria-describedby"for additional descriptions.

This criterion does not specify correct markup or programming requirements; refer to Success Criterion 1.3.1 (Info and Relationships) for that. It also does not address label clarity, which is covered in Success Criterion 2.4.6 (Headings and Labels). Additionally, alternative label methods or accessible names are not discussed here, but in Success Criterion 4.1.2: Name, Role and Value.

This criterion mandates that all data entries and inputs in forms have either instructions or labels that clearly identify the controls, ensuring users understand what is expected of them.

Best Practices:

  • Visible Labels: Always provide visible labels for every form field and control, and ensure they are positioned correctly (e.g., before text inputs and after radio buttons or checkboxes).

  • Specific Instructions: Provide instructions for specific requirements, such as password criteria with specific character requirements or date formats that must follow a year/month/day format.

  • Group Level Labels: For fields requiring multiple inputs, provide a specific label for each input. For example, if a phone number is split into two input fields such as area code and number, provide a label for each input. Avoid assuming that users will understand based on context alone.

Examples & Explanation:

Example: Phone number inputs in a form

What Should Be Avoided

A form is provided with data entries for inputs to fill out a phone number. The inputs are wrapped with a <legend>, but each input individually does not contain a label.

HTML/CSS

              <style>
                /* Inline style for demonstration purposes */
                input[type="text"] {
                  display: inline-block;
                  width: 150px; /* Adjust width as needed */
                  margin-right: 10px; /* Add spacing between inputs */
                }
              
                #area_code {
                  width: 50px; /* Make area code input smaller */
                }
              </style>
              
              <form action="/submit-form" method="post">
                <fieldset>
                  <legend>Phone Number</legend>
                  <input type="text" name="area_code" id="area_code">
                  <input type="text" name="phone_number" id="phone_number">
                </fieldset>
                <input type="submit" value="Submit">
              </form>

Explanation:Without clear labels, users may not understand the requirements of each input field. This lack of clarity could result in form submission failures or incorrect data entries.

What Should Be Done

A form is provided with data entries for inputs to fill out a phone number. The inputs are wrapped with <fieldset>, and each input field is labeled with a <label> located above it.

HTML/CSS

              <style>
                /* Inline style for demonstration purposes */
                form {
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                }
              
                fieldset {
                  border: none; /* Remove border from fieldset */
                  padding: 0; /* Remove default padding */
                  margin: 0; /* Remove default margin */
                }
              
                label {
                  margin-bottom: 5px; /* Add spacing between labels */
                }
              
                input[type="text"] {
                  width: 150px; /* Adjust width as needed */
                  padding: 8px;
                  margin-bottom: 10px; /* Add spacing between inputs */
                }
              
                #area_code {
                  width: 50px; /* Make area code input smaller */
                  margin-right: 10px; /* Add spacing between area code and phone number */
                }
              
                input[type="submit"] {
                  margin-top: 10px; /* Add margin above submit button */
                }
              
                div {
                  display: inline-flex;
                  flex-direction: column;
                  margin-top: 2rem;
                }
              </style>
              
              <form action="/submit-form" method="post">
                <fieldset>
                  <legend>Phone Number</legend>
                  <div>
                    <label for="area_code">Area Code</label>
                    <input type="text" name="area_code" id="area_code">
                  </div>
                  <div>
                    <label for="phone_number">Number</label>
                    <input type="text" name="phone_number" id="phone_number">
                  </div>
                </fieldset>
                <input type="submit" value="Submit">
              </form>

Explanation:In the correct implementation, each input is accompanied by a <legend> and two <label> elements. One label specifies 'Area Code' and the other 'Number'. This setup helps users understand the purpose of each field, ensuring they can complete the task as expected. The labels are positioned above the input fields for design consistency using CSS.

Next Up

Enhance your knowledge with SC 3.3.3 - Error Suggestion. Learn to provide useful error suggestions for all users.

Go to SC 3.3.3