3.3.2 Label or Instructions Level A

[View on W3C.org]

Labels or instructions are provided when content requires user input.

Testing & Remediation

How to test: Open your website in your browser of choice and examine each page for the presence of content that requires user input. For each input, does it have an appropriate label? For inputs that have restrictions/requirements, are there instructions provided for the user? How to remediate: All content that requires user input must have an appropriate label or instructions for the user. There are a number of ways to accomplish this:
  • Provide instructions at the beginning of the form
  • Use the aria-describedby property to provide a descriptive label
  • Use aria-labelledby to concatenate a label from several text nodes
  • Position labels to maximize predictability of relationships
  • Indicate required form controls using labels or a legend
  • Use label elements to associate text labels with form controls
There are other techniques mentioned on the W3C link above as well.

Questions and Answers

What is the difference between legend and label elements?

Legend is a broad label used for a group of objects. Label is used for labeling specific elements.

How do I know if my websites structure is layed out correctly?

Your site should have the correct semantic elements (header, main, footer, article, etc) in the order that they are intended to be read. This means that sometimes this isn't the order that makes styling the page the easiest. You must also ensure that all your heading levels are hit in the order. This means that you should not skip from an h1 to an h4, and so on.

Is there a form element meant to provide instruction?

There are many form specific elements that can be used to describe what's going on. As you've already mentioned, each input requires that it has a corresponding label. If you would like to further organize and give meaning to your form, you can use the 'fieldset' element to group related inputs.   Within each fieldset, you can create a 'legend' that describes the inputs. For instance, let's say we have a form that asks a user for their personal information, and details about an order. The source code could look something like this. 
<form>
  <fieldset>
    <legend>Enter Your Information</legend>
    <label for="first">First Name</label>
    <input type="text" name="first">
    <!-- etc -->
  </fieldset>
  <fieldset>
    <legend>Order Details</legend>
    <label for="size">Size</label>
    <select name="size">
      <!-- sizes -->
    </select>
    <!-- etc. -->
  </fieldset>
</form>

What is an orphaned form label?

This warning refers to form labels that exist in the web pages markup but is not appropriately associated with a corresponding field. Best practice dictates that within a form every input element has a matching label element, this can be done by attributing the for field of the label with the same element id of the desired input.

How to resolve this:

Consider the following markup, this code passes accessibility scanners: 
<form>
<label for="name">Your Name:</label>
<input id="name" type="text" placeholder="Enter your Name">
<input type="submit" value="Submit"> 
</form>

Note:
  • The text-input field has the id parameter "name"
  • The label field associated with the text field has the for parameter "name"

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.