<input> with error message using aria-errormessage
← Return to main list
This is a test case designed to determine how an error message, associated with an input via the aria-errormessage attribute, is announced by various screen readers.
Example
Code
<div>
<label for="name">Name</label>
<input type="text" id="name" aria-errormessage="error-message">
<span id="error-message">Error: Make sure to include full name</span>
</div>
Assistive technologies
VoiceOver
- Chrome: Name. Invalid data. Edit text. [Error message not announced]
- Firefox: Name. Invalid data. Edit text. [Error message not announced]
- Safari: Name. Invalid data. Edit text. [Error message not announced]
NVDA
- Chrome: Name. Edit. Invalid entry. Blank. [Error message not announced]
- Firefox: Name. Edit. Invalid entry. Has autocomplete. Blank. [Error message not announced]
- Edge: Name. Edit. Invalid entry. Blank. [Error message not announced]
JAWS
- Chrome: Name. Edit. Invalid entry. Error. Colon. Make sure to include full name. Type in text.
- Firefox: Name. Edit. Invalid entry. Error. Colon. Make sure to include full name. Type in text.
- Edge: Name. Edit. Invalid entry. Error. Colon. Make sure to include full name. Type in text.
← Return to main list