Adding additional help to form fields
Test
- Instructions should be visible on the page
- Instructions should be announced to screen readers with label information
- Help information should be announced to screen readers as a link, separate to the label
- Help information should be displayed as a tool tip when clicked on
Example
Code sample
<form action="#">
<div>
<label for="b">
<span class="label">Phone number</span>
<input class="input" type="text" name="b" id="b">
<span class="hint-message">Phone number must include area code</span>
</label>
<a href="#">
<span aria-hidden="true">?</span>
<span class="sr-only">Help: How to fill in the Phone number field</span>
</a>
</div>
</form>
| OS | Browser | NVDA 2014.4 | JAWS 16 | VoiceOver |
|---|---|---|---|---|
| Windows 7 | IE 11 |
"Phone number. Must include area code. Blank" "Help. How to fill in the phone number field. Link" |
"Phone number. Must include area code. Edit. Type in text" "Help. Colon. How to fill in the phone number field. Link" |
|
| Windows 7 | IE 8 |
"Phone number. Must include area code. Blank" "Help. How to fill in the phone number field. Link" |
"Phone number. Must include area code. Edit. Type in text" "Help. Colon. How to fill in the phone number field. Link" |
|
| Windows 7 | Chrome 39 |
"Phone number. Must include area code. Edit. Blank" "Help. How to fill in the phone number field. Link" |
"Phone number. Must include area code. Edit. Type in text" "Help. Colon. How to fill in the phone number field. Link" |
|
| Windows 7 | Firefox 34 |
"Phone number. Must include area code. Edit. With autocomplete. Blank" "Help. How to fill in the phone number field. Link" |
"Phone number. Must include area code. Edit. Type in text" "Help. Colon. How to fill in the phone number field. Link" |
|
| OSX 10.9 | Chrome 39 |
"Phone number. Must include area code. Edit. Text" "Collapsed. Internal link. Help. How to fill in the phone number field" |
||
| OSX 10.9 | Firefox 34 |
"Phone number. Must include area code.. Text" "Link. Question mark. Help. How to fill in the phone number field" |
||
| OSX 10.9 | Safari 7 |
"Phone number. Must include area code. Edit. Text" "Internal link. Help. How to fill in the phone number field" |