Inline error method 4: The aria-errormessage attribute

Home | Full results | Github page

Inline error messages can be programmatically associated with the form control using a matching aria-errormessage and id values. Authors must use the aria-invalid attribute in conjunction with the aria-errormessage attribute.

The aria-errormessage is new to ARIA 1.1 and not yet fully supported. This means that the error message is not programatically associated with the form control.

Example

Markup

<div class="form-container">
  <label class="form-label" for="error3">Mobile number</label>
  <input class="form-input form-input--error" id="error3" aria-errormessage="msg01" type="text" aria-invalid="true">
  <span class="error" id="msg01" aria-live="assertive">Error: Must be a valid mobile number</span>
</div>

Results

Home | Full results | Github page