/
Form Instructions and Help Text
Form Instructions and Help Text
- Christina Lutz-Hatfield
Owned by Christina Lutz-Hatfield
Visual Example
Acceptance Criteria
As a screen reader and keyboard only user I should:
be provided with a form label
be able to use the TAB key on the keyboard to access the form control
be able to access important form instructions and help text
As a screen reader user I should:
be able to explicitly associate the text label with the form control
When the form field has keyboard focus:
the screen reader should announce the form label
the screen reader should announce the form instructions
Markup and Code
Use the “aria-describedby” attribute to associate the form instructions with the form control.
<form>
<div>
<label for="phone-number">Phone Number</label>
<input id="phone-number" type="text" aria-describedby="phoneinstructions">
<p id="phoneinstructions">Enter your 10 digit phone number including area code.</p>
</div>
</form>Related content
Accessible Form Elements, Acceptance Criteria and Markup
Accessible Form Elements, Acceptance Criteria and Markup
Read with this
Input Fields
Input Fields
More like this
Text Areas
More like this
Dashes and Characters in Form Fields
Dashes and Characters in Form Fields
More like this
Error Messaging
Error Messaging
More like this
Group of Form Elements
Group of Form Elements
More like this