A11y tips: bind form controls and messages

As we saw before, the ARIA attribute aria-describedby can be used to establish a relationship between a form control and an element.

It is very important to establish this connection since, when a form control receives focus, screen readers enter the so-called form mode and from there only the control and its related elements are announced, for which there must be a good relationship established between them so that the user has all the necessary information at the time of filling it in.

This includes certain types of messages, such as hints about the format that the data must have (eg: passwords), links to other documents (eg: legal terms checkbox) or error messages of the data entered.

And what is the correct way to do it? Assigning the aria-describedby attribute of the form control the value of the id attribute of the message that we want to relate, as in this example:

<label for="password">
  Password
</label>
<input 
  type="password" 
  id="password"
  aria-describedby="password-desc" 
  autocomplete="off">
<p id="password-desc">
  Password must be at least 8 characters long and contain a number.
</p>

In case of having more than one related element, the aria-describedby attribute admits more than one value, separated with a space:

<label for="password">
  Password
</label>
<input 
  type="password" 
  id="password"
  aria-describedby="password-desc password-error" 
  autocomplete="off">
<p id="password-desc">
  Password must be at least 8 characters long and contain a number.
</p>
<p id="password-error">
  Your password does not comply with the required format
</p>