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