Adding instructions for form fields

Option 1 - instructions outside label, after input
Option 2 - instructions inside label, after input
Option 3 - instructions outside label, after input, using describedby
Option 4 - instructions outside label, after input, using labelledby
Option 5 - instructions using placeholder

Option 1 - instructions outside label, after input

Test

Instructions should be visible on the page
Instructions should be announced to screen readers with label information

Example

Code sample

<div>
	<label for="a">Email</label>
	<input type="text" id="a">
	<span>Make sure you use a valid email address</span>
</div>

Support chart
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	"Email. Edit. Blank"	"Email. Edit. Type in text"
Windows 7	IE 8	"Email. Edit. Blank"	"Email. Edit. Type in text"
Windows 7	Chrome 39	"Email. Edit. Blank"	"Email. Edit. Type in text"
Windows 7	Firefox 34	"Email. Edit with autocomplete. Blank"	"Email. Edit. Type in text"
OSX 10.9	Chrome 39			"Email. Edit. Text"
OSX 10.9	Firefox 34			"Email. Text"
OSX 10.9	Safari 7			"Email. Edit. Text"

Option 2 - instructions inside label, after input

Test

Instructions should be visible on the page
Instructions should be announced to screen readers with label information

Example

Code sample

<div>
	<label for="b">
		Phone
		<input type="text" id="b">
		<span>Include area code</span>
	</label>
</div>

Support chart
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	"Phone. Include area code. Edit. Blank"	"Phone. Include area code. Edit. Type in text"
Windows 7	IE 8	"Phone. Include area code. Edit. Blank"	"Phone. Include area code. Edit. Type in text"
Windows 7	Chrome 39	"Phone. Include area code. Edit. Blank"	"Phone. Include area code. Edit. Type in text"
Windows 7	Firefox 34	"Phone. Include area code. Edit with autocomplete. Blank"	"Phone. Include area code. Edit. Type in text"
OSX 10.9	Chrome 39			"Phone. Include area code. Edit. Text"
OSX 10.9	Firefox 34			"Phone. Include area code. Phone. Instructions. Text"
OSX 10.9	Safari 7			"Phone. Include area code. Edit. Text"

Option 3 - instructions outside label, after input, using describedby

Test

Instructions should be visible on the page
Instructions should be announced to screen readers with label information

Example

Code sample

<div>
	<label for="c">Address</label>
	<input type="text" id="c" aria-describedby="instructions3">
	<span id="instructions3">Include full address</span>
</div>

Support chart
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	"Address. Edit. Include full address. Blank"	"Address. Edit. Include full address. Type in text"
Windows 7	IE 8	"Address. Edit. Include full address. Blank"	"Address. Edit. Include full address. Type in text"
Windows 7	Chrome 39	"Address. Edit. Include full address. Blank"	"Address. Edit. Include full address. Type in text"
Windows 7	Firefox 34	"Address. Edit with autocomplete. Include full address. Blank"	"Address. Edit. Include full address. Type in text"
OSX 10.9	Chrome 39			"Address. Edit. Text"
OSX 10.9	Firefox 34			"Address. Include full address. Text"
OSX 10.9	Safari 7			"Address. Edit. Text"

Option 4 - instructions outside label, after input, using labelledby

Test

Instructions should be visible on the page
Instructions should be announced to screen readers with label information

Example

Code sample

<div>
	<label for="d">Account no.</label>
	<input type="text" id="d" aria-labelledby="instructions4">
	<span id="instructions4">Use 10 digit number</span>
</div>

Support chart
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	"Use 10 digit number. Edit. Blank"	"Use 10 digit number. Edit. Blank"
Windows 7	IE 8	"Use 10 digit number. Edit. Blank"	"Use 10 digit number. Edit. Blank"
Windows 7	Chrome 39	"Use 10 digit number. Edit. Blank"	"Use 10 digit number. Edit. Blank"
Windows 7	Firefox 34	"Use 10 digit number. Edit with autocomplete. Blank"	"Use 10 digit number. Edit. Blank"
OSX 10.9	Chrome 39			"Account no. Use 10 digit number. Edit. Text"
OSX 10.9	Firefox 34			"Use 10 digit number. Text"
OSX 10.9	Safari 7			"Account no. Use 10 digit number. Edit. Text"

Option 5 - instructions using placeholder

The placeholder should be visible on the page
The placeholder value should be announced on focus

Example

Code sample

<input type="text" placeholder="Add your name">

OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	"Name. Edit. Blank"	"Name. Edit. Type in text"
Windows 7	IE 8	"Name. Edit. Blank"	"Name. Edit. Type in text"
Windows 7	Chrome 39	"Name. Edit. Add your name"	"Name. Edit. Add your name. Type in text"
Windows 7	Firefox 34	"Name. Edit with autocomplete. Blank"	"Name. Edit. Type in text"
OSX 10.9	Chrome 39			"Name. Edit. Text."
OSX 10.9	Firefox 34			"Name. Text."
OSX 10.9	Safari 7			"Add you name. Name. Edit. Text."

Bottom of page - Back to home