Error Handling

Error handling is the means by which a user is informed of problems that have occurred in a form they are using.

Challenges disabled users face with error handling are:

  • Knowing what errors have occurred on the page

Example

Sample Registration Form

A * indicates a required field...



Enter your Full Name



Enter as first.last@agency.gov



Error information is properly associated with an input control

Modify page's title tag to indicate number of errors:

default.htm (excerpt)
<title>2 errors occurred | Error Handling Example</title>

Provide an error container to list the error(s) that occurred and, if possible, use JavaScript to move focus to that container:

default.htm (excerpt)
<div id="errorContainer">
    <h4 tabindex="0" id="errorHeader" role="alert">2 errors occurred below…</h4>
    <ul id="errorList">
        <li>
            <a title="Error | Name: Enter your full name" 
                onclick="document.getElementById('rName').focus();return false;"
                href="#rName">Name: Enter your full name</a>
        </li>
        <li>
           <a title="Error | Email: Enter as first.last@agency.gov"
                onclick="document.getElementById('rEmail').focus();return false;" 
                href="#rEmail">Email: Enter as first.last@agency.gov</a>
        </li>
    </ul>
</div><!-- end of #errorContainer -->

error_handling.js (excerpt)
/* Shift focus to Error Header */
$("#errorHeader").focus();

Let's break this code down:

  1. Make an error container to hold the errors:
    <div id="errorContainer">
    </div><!-- end #errorContainer -->
  2. Use a <h4> tag to mark off the number of errors:
    <h4 id="errorHeader">2 errors occurred below…</h4>
  3. Add a tabindex attribute to the <h4> so that focus can be shifted through JavaScript:
    <h4 tabindex="0" id="errorHeader">2 errors occurred below…</h4>
    /* Shift focus to Error Header */
    $("#errorHeader").focus();
  4. Provide hyperlinks to the error fields:
    <a onclick="document.getElementById('rName').focus();return false;"
       href="#rName">Name: Enter your full name</a>
    <a onclick="document.getElementById('rEmail').focus();return false;" 
       href="#rEmail">Email: Enter as first.last@agency.gov</a>

    NOTE: the onclick is used to ensure focus is shifted properly in FireFox.

  5. Add a title attribute to those hyperlinks:
    <a title="Error | Name: Enter your full name" …>Name: Enter your full name</a>
    <a title="Error | Email: Enter as first.last@agency.gov" …>Email: Enter as first.last@agency.gov</a>

Modify the <label> tag and add aria-invalid attribute for the error fields:

default.htm (excerpt)
<label for="rName">
  <span class="red">*</span>Name:<br />
  <span class="errorTxt red"> Enter your full name</span>
</label>
 <input id="rName" type="text" … aria-invalid="true">
…
<label for="rEmail">
  <span class="red">*</span>Email:<br />
  <span class="errorTxt red"> Enter as first.last@agency.gov</span>
</label>
 <input id="rEmail" type="text" … aria-invalid="true">

Let's break this code down:

  1. Wrap the <label> tag around the error text:
    <label for="rName">
     <span class="red">*</span>Name:<br />
     <span class="errorTxt red"> Enter your full name</span>
    </label>
    …
    <label for="rEmail">
     <span class="red">*</span>Email:<br />
     <span class="errorTxt red"> Enter as first.last@agency.gov</span>
    </label>
  2. Add the aria-invalid attribute on error fields:
    <input id="rName" type="text" … aria-invalid="true">
    <input id="rEmail" type="text" … aria-invalid="true">

Error information is properly associated with an input control

Keyboard
  1. Submit without filling in any required fields
  2. Number of errors should be visible on the screen
  3. Tab to the first error link and press Enter
  4. Ensure that focus goes to the first error field
  5. Ensure focus shifts properly with any subsequent error links
Web Accessibility Toolbar
  1. Submit without filling in any required fields
  2. Select Structure - Headings
  3. Verify <h4> marks off number of errors

Error information is properly associated with an input control

JAWS
  1. Submit without filling in any required fields
  2. JAWS should speak the number of errors
  3. Press Insert + F6 to verify a header exists for the number of errors on the page
  4. Tab to the first link to hear the first error and press Enter
  5. JAWS should speak the field in error along with the error message
  6. Press Insert + F7 to list the error links
  7. Work through any subsequent error links to ensure that field and error message are spoken
MAGic
  1. Turn magnification on and magnify 4 times
  2. Submit without filling in any required fields
  3. Focus should be on the number of errors
  4. Tab to the first link and press Enter to ensure focus shifts to the first error field
  5. Press Insert + F7 to list the error links
  6. Work through any subsequent error links to ensure that focus shifts properly to the field
  7. Ensure error message and field have focus. If not, pan around using CapsLock + Arrow Keys.