Using Aria-Invalid to Indicate An Error Field2

Applicability

This technique applies to HTML with WAI-ARIA.

This technique relates to:

• Success Criterion 4.1.2 (Name, Role, Value)
• How to Meet 4.1.2 (Name, Role, Value)
• Understanding Success Criterion 4.1.2 (Name, Role, Value)

Description

The objective of this technique is to identify an input control with an input error by applying aria-invalid to convey the proper state for the control. This technique provides a way to convey the error state for the control programmatically, which will allow assistive technologies to convey to users that there is an input error. In order to meet other related success criteria such as 3.3.1 (Error Identification) and 3.3.3 (Error Suggestion) authors will need to refer to other sufficient techniques.

Examples include fields where a validation process determines that the value input in a field does not pass because of one of the following:

• Incorrect data format for date, email, phone numbers, etc
• Value outside of minimum – maximum range of expected values
• Empty value on a field marked as required

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 - 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. 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

• G83: Providing text descriptions to identify required fields that were not completed
• G85: Providing a text description when user input falls outside the required format or values
• G139: Creating a mechanism that allows users to jump to errors
• SCR32: Providing client-side validation and adding error text via the DOM
• ARIA18: Using aria-alertdialog to Identify Errors
• ARIA19: Using ARIA role=alert or Live Regions to Identify Errors

Test Procedure

For each control that requires specific input

1. Enter invalid data or leave the input empty if the control is set to required
2. Verify that aria-invalid has been set to true for the control only when a validation failure occurs

Expected Result

#2 is true