Technique ARIA21:Using aria-invalid to Indicate An Error Field

Example 1: Using aria-invalid on required fields

The aria-invalid attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.

A portion of the jQuery code and the HTML form markup follow:

<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>
  label.failed {
    border: red thin solid;
  }
</style>

<form name="signup" id="signup">
  <div>
    <label for="first">First Name (required)</label>
    <input type="text" name="first" id="first">
  </div>
  <div>
    <label for="last">Last Name (required)</label>
    <input type="text" name="last" id="last">
  </div>
  <div>
    <label for="email">Email (required)</label>
    <input type="text" name="email" id="email">
  </div>
  <div>
    <input type="submit" name="button" id="button" value="Submit">
  </div>
</form>

Working example: Using aria-invalid on required fields.

Example 2: Identifying errors in data format

Aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.

Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of sam@example.com), the HTML code is:

<div class="control">
  <div>
    <label for="email">Email address: [*]</label> 
    <input type="text" name="email" id="email" class="error"
     aria-invalid="true" aria-describedBy="err_1">
  </div>
  <span class="errtext" id="err_1">Error: Incorrect data</span>
</div>

And when no data is entered in the email field, the HTML code is:

<div class="control">
  <div><label for="email">Email address: [*]</label> 
    <input type="text" name="email" id="email" class="error"
     aria-invalid="true" aria-describedBy="err_2">
  </div>
  <span class="errtext" id="err_2">Error: Input data missing</span>
</div>

jQuery code: jQuery is used to add aria-invalid or aria-describedby attributes as well as the class attribute and append the error text. This is the code that inserts aria-invalid and class="error" but does not associate the error text "incorrect data" with the control programmatically:

$(errFld).attr("aria-invalid", "true").attr("class", "error");
// Suffix error text: 
$(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');

CSS Code:

input.error {
  border: red thin solid;
}

span.errtext {
  background-color: #EEEEFF;
  background-image:url('images/iconError.gif');
  background-position:right;	
  background-repeat:no-repeat;
  border: red thin solid;
  margin-bottom: 1em;
  padding: .25em 1.4em .25em .25em;
}

Working example: Identifying errors in data format.