Input help

Impact: Strong to major

Users mainly impacted: Blind, severely visually impaired, visually impaired, mentally handicapped.

RGAA criteria: Criterion 11.10 - Criterion 11.11

Explanation

For all required fields that require a particular format, you must indicate this to the user.

For example, a date field waits for the day, month and year values to be distinguished by a slash to be compliant. You must therefore indicate “yyyy-mm-dd” which corresponds to the input format.

• in the label tag;
• in the title attribute;
• in the text passage related via the aria-labelledby attribute.

You also have the attribute aria-describedby which allows you to reference the value of the identifier of a text passage containing the format indication. The use of aria-describedby on the form field will restore the text passage in addition to the label regardless of the method used: <label>, title, etc. unlike aria-labelledby.

Data format in the label

<label for="birthday">Birthday (aaaa/mm/dd) <span aria-hidden="true">(required)</span></label>
<input type="text" name="birthday" id="birthday" required>

Data format with the aria-describedby attribute

<label for="birthday">Birthday <span aria-hidden="true">(required)</span></label>
<input type="text" name="birthday" id="birthday" aria-describedby="format-date" required>
<p id="format-date">aaaa/mm/dd</p>

Automatic filling of the fields with user data

People with language and memory impairments, motor impairments, or impairments that affect the performance of a function can spend a lot of time validating a form. In order to help the user to fill in the relevant fields more simply, it is necessary to use the attribute autocomplete.

Autocomplete field are described in the HTML 5.2 - Autofilling form controls: the autocomplete attribute and in the WCAG 2.1 - Input Purposes for User Interface Components.

Example:

<form method="post" action="step2">
  <div>
   <label for="title">Title</label>
   <select id="title" name="title" autocomplete="honorific-prefix">
       <option value="ms">Ms</option>
       <option value="mrs">Mrs</option>
       <option value="mr">Mr</option>
       <option value="mx">Mx</option>
   </select>
  </div>
  <div>
   <label for="fname">First Name</label>
   <input id="fname" type="text" autocomplete="given-name">
  </div>
  <div>
    <label for="lname">Last Name</label>
    <input id="lname" type="text" autocomplete="family-name">
  </div>
  <div>
    <label for="phone">Phone</label>
    <input id="phone" type="tel" autocomplete="tel">
  </div>
  <div>
    <button type="submit">Sign up</button>
  </div>
</form>