onSubmit error notification: focus on a container with no role

Return to main list

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

Example

Contact details

Code

<div
  class="error-notification"
  tabindex="-1"
  id="error"
  aria-labelledby="f1-label"
>
  <h4 id="f1-label">
    Error: Please fix the following two errors and...
  </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

VoiceOver: onsubmit

NVDA: onsubmit

JAWS: onsubmit

Return to main list