onSubmit error notification: focus on the heading
← 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">
<h4 id="error" class="focus" tabindex="-1">
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
- Chrome: Heading level 4. Error: Please fix the following two errors and resubmit the form.
- Firefox: Heading level 4. Error: Please fix the following two errors and resubmit the form.
- Safari: Heading level 4. Error: Please fix the following two errors and resubmit the form.
NVDA: onsubmit
- Chrome: Error: Please fix the following two errors and resubmit the form Heading level 4.
- Firefox: Error: Please fix the following two errors and resubmit the form. Heading level 4.
- Edge: Error: Please fix the following two errors and resubmit the form. Heading level 4.
JAWS: onsubmit
- Chrome: Error: Please fix the following two errors and resubmit the form. Heading level 4.
- Firefox: Error: Please fix the following two errors and resubmit the form. Heading level 4.
- Edge: Error: Please fix the following two errors and resubmit the form. Heading level 4.
← Return to main list