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
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
- Chrome: Error: Please fix the following two errors and resubmit the form. Group.
- Firefox: Error: Please fix the following two errors and resubmit the form. And 1 more item. Group.
- Safari: Error: Please fix the following two errors and resubmit the form. Group.
NVDA: onsubmit
- Chrome:
- Error: Please fix the following two errors and resubmit the form. Heading level 4.
- List.
- Name: You must include a name. Link.
- Email: You must use a valid email address.
- Firefox:
- Error: Please fix the following two errors and resubmit the form. Heading level 4.
- List.
- Name: You must include a name. Link.
- Email: You must use a valid email address.
- Edge:
- Error: Please fix the following two errors and resubmit the form. Heading level 4.
- List.
- Name: You must include a name. Link.
- Email: You must use a valid email address.
JAWS: onsubmit
- Chrome: Error: Please fix the following two errors and resubmit the form.
- Firefox: Error: Please fix the following two errors and resubmit the form.
- Edge: Error: Please fix the following two errors and resubmit the form. Heading level 4.
← Return to main list