onSubmit error notification: focus on a container with no role or label
← 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"
>
<h4>
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.
- Name: You must include a name.
- Email: You must use a valid email address.
- Group.
- Firefox: Error: Please fix the following two errors and resubmit the form. And one more item. Group.
- Safari: Error: Please fix the following two errors and resubmit the form. And one more item. 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.
- Name: You must include a name.
- Email: You must use a valid email address.
- Firefox:
- Error: Please fix the following two errors and resubmit the form.
- Name: You must include a name.
- Email: You must use a valid email address.
- Heading level 4.
- Edge:
- Error: Please fix the following two errors and resubmit the form.
- Name: You must include a name.
- Email: You must use a valid email address.
- Heading level 4.
← Return to main list