Inline error method 5: The aria-labelledby attribute

Home | Full results | Github page

In some cases, it is not possible to wrap the label around the form control or error message. The aria-labelledby can be used to explicitly associate the error message with the form control using matching aria-labelledby and id values.

Example

Markup

<div class="form-container">
  <label class="form-label" for="error4">Phone number</label>
  <input class="form-input form-input--error" id="error4" type="text" aria-labelledby="label1">
  <span class="error" id="label1">Error: Must be a valid phone number</span>
</div>

Results

In all cases, the aria-labelledby content is announced but the label content is ignored.

Home | Full results | Github page