_form_validation_implementation_advice.html

<h2 class="heading-medium implementation-advice">Implementation advice</h2>

<p class="lead-in">When an error occurs:</p>
<ul class="list list-bullet text">
  <li>
    prefix the <code>&lt;title&gt;</code> with "Error: "
  </li>
  <li>
    show an error summary at the top of the page
  </li>
  <li>
    move keyboard focus to the start of the summary
    <span class="panel panel-border-narrow">
      to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
    </span>
  </li>
  <li>
    ensure that the summary is announced to as many screen readers as possible
    <span class="panel panel-border-narrow">
      use <code>role="alert"</code> on the containing <code>div</code>
    </span>
  </li>
  <li>
    use a heading at the top of the summary
  </li>
  <li>
    associate the heading with the summary box
    <span class="panel panel-border-narrow">
      use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
    </span>
  </li>
  <li>
    link from the error list in the summary to the fields with errors
  </li>
  <li>
    add a 5px red left border to the field with the error
  </li>
  <li>
    show a red and bold error message between each question and field with an error
  </li>
  <li>
    associate each error message with the corresponding field by adding it to the label (or legend)
  </li>
</ul>

<p class="text">
  Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
</p>