onSubmit error notification: focus on a container with role="alert"
← Return to main list
This is a test case designed to determine whether assistive technologies announce an error message injected above a form - with the addition of role="alert".
Example
Code
<div
class="error-notification"
tabindex="-1"
id="error"
role="alert"
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.
- 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.
- Safari:
- Error: Please fix the following two errors and resubmit the form.
- 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.
NVDA: onsubmit
- Chrome:
- Error: Please fix the following two errors and resubmit the form.
- Alert.
- Name: You must include a name. Link.
- Email: You must use a valid email address. Link.
- 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.
- Alert.
- Name: You must include a name. Link.
- Email: You must use a valid email address. Link.
- 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.
- Alert.
- Name: You must include a name. Link.
- Email: You must use a valid email address. Link.
- 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:
- Alert.
- Error: Please fix the following two errors and resubmit the form.
- Error: Please fix the following two errors and resubmit the form.
- 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:
- Alert.
- Error: Please fix the following two errors and resubmit the form.
- Error: Please fix the following two errors and resubmit the form.
- 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.
- Error: Please fix the following two errors and resubmit the form. Heading level 4.
- Edge:
- Alert.
- Error: Please fix the following two errors and resubmit the form.
- Error: Please fix the following two errors and resubmit the form. Heading level 4.
← Return to main list