Dashes and Characters in Form Fields
- Christina Lutz-Hatfield
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>