Dashes and Characters in Form Fields

Visual Example


Compliant Example:

Non-Compliant Example:

Acceptance Criteria

Don’t place characters, such as dashes “-----” or parenthesis ”( )” in the placeholder.

Those characters will be announced by the screen reader as follows:

“dash, dash, dash, dash, dash” and “close parent, open parent”

Provide form instructions either above or below the form control.

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

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

  • the screen reader should NOT announce dashes or any other characters

Markup and Code


<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