WCAG 1.3.1: Info and Relationships (Form Elements)

How to

• 

  Give form fields a name

  Form fields (<input>) do not have a name in the accessibility tree by default. That’s why they need text that is programmatically associated with the input. The recommended way is to use a <label>:

  <label for="firstname">First name:</label> <input id="firstname" name="firstname" type="text">

  However, a <label> is not always possible. In that case, it can be done using aria-label or aria-labelledby.

  This can be the case with a slider: <p>Please select the <span id="slider-label">number of days.</span></p> <div id="mysldr" role="slider" aria-labelledby="slider-label"></div>

  Technique(s):

  • H44:Using label elements to associate text labels with form controls
  • ARIA16:Using aria-labelledby to provide a name for user interface controls

• 

  Group related form fields

  Form fields such as checkboxes and radio groups that belong together and are visually grouped must also be programmatically identifiable as a single unit.

  To achieve this, they must be marked up either as a <fieldset> or as a <div> with role="group".

  If the label of the group is important for understanding, the group also needs a description.

  For a <fieldset>, this is done using <legend>.

  For a <div> with role="group", you need a heading that is linked using aria-labelledby. Each individual <input> field additionally requires a connected <label>.

  Technique(s):

  • H71:Providing a description for groups of form controls using fieldset and legend elements
  • ARIA17:Using grouping roles to identify related form controls