onSubmit error notification: focus on the heading, inside role="group" with a aria-labelledby

← Return to main list

This is a test case designed to determine whether assistive technologies announce an error message injected above a form.

Example

Code

<div
  class="error-notification"
  role="group"
  aria-labelledby="error"
>
  <h4 id="error" class="focus" tabindex="-1">
    Error: Please fix the following two errors...
  </h4>
  <ul>
    <li><a href="#name">Name: You must include a name</a></li>
    <li><a href="#email">Email: You must use a valid...</a></li>
  </ul>
</div>

Assistive technologies

← Return to main list