SSA Accessibility Best Practices Library

Error information is properly associated with an input control

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

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

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

/* 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 title attribute for the error fields:

<label for="rName">
  <span class="red">*</span>Name:<br />
  <span class="errorTxt red"> Enter your full name</span>
</label>
 <input id="rName" type="text" … title="Error | Name: Enter your full name">
…
<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" … title="Error | Email: Enter as first.last@agency.gov">

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. Modify the title attribute on error fields:

   <input id="rName" type="text" … title="Error | Name: Enter your full name">
   <input id="rEmail" type="text" … title="Error | Email: Enter as first.last@agency.gov">

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 Doc Info - Show Titles
3. Verify title attributes are accurate on the error links and fields
4. Select Structure - Headings
5. 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.