Form Instructions and Help Text

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>

View markup on github