Using Aria-Invalid to Indicate An Error Field V0

From WCAG WG

Applicability

This technique applies to HTML with WAI-ARIA.

This technique relates to:


Description

The objective of this technique is to expose a field that has failed validation mainly to assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. This technique may be relied upon to identify failed field(s) to this user group in situations where:

  • The identity of the failed field is so obvious visually, and
  • No explicit description of the error may be really necessary

Examples include fields whose label / instructional text explicitly indicate:

  • Data format for date, email, phone numbers etc
  • Minimum – maximum range of expected values
  • Aria-invalid may also be set on “required” fields when a user omits to complete the field

When visible text is used to programmatically identify a failed field, setting aria-invalid to "true" is superfluous from a compliance standpoint. Likewise, when the purpose of a failed submission requires a more elaborate description,setting an aria-invalid attribute on the field is unnecessary.

When a field has aria-invalid set to “true”, VoiceOver in Safari announces “invalid data” when the field gets focus; JAWS and NVDA notify the error as an “invalid entry”.

This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting aria-invalid to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.

Examples

Example 1

Aria-invalid has been used on required fields that have no input. A message above the form conveys that form submission has failed due to this. Example-1

Code Block

Portion of the jQuery code and the HTML form markup folllow: 

<code>
<script>
...
...
		if ($('#first').val() === '') {
			$('#first').attr("aria-invalid", "true");
$("label[for='first']").addClass('failed');
		}
		if ($('#last').val() === '') {
			$('#last').attr("aria-invalid", "true");
$("label[for='last']").addClass('failed');
		} 
		if ($('#email').val() === '') {
			$('#email').attr("aria-invalid", "true");
$("label[for='email']").addClass('failed');
		} 
...
...
</script>
<style type="text/css">
label.failed {
	border: red thin solid;
}
</style>
<form name="signup" id="signup" method="post" action="#">
 <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>
</code>

Example 2

Aria-invalid is used when the personal identification number (PIN), email address, or start date are not in the expected format. An error message is associated with the field using aria-describedby when there’s no input for the first three fields or the requested start date is in the past. Example-2

Resources

  1. Supported States and Properties: WAI-ARIA 1.1
  2. Using Aria-invalid for Error Indication

Related Techniques

Test Procedure

  1. No text description is required to identify the field in error or describe the failure visually. The input data format/ range of expected values / "required" nature of the field is clearly evident from the field's label or instructional text
  2. Aria-invalid has been set to true for a field only when a validation failure occurs

Expected Result

Conditions 1 and 2 are true

Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Using_Aria-Invalid_to_Indicate_An_Error_Field_V0&oldid=4292"