Visual Example
The placeholder is text that appears inside a form control by default. In the below examples it’s the word “Search” and dashes.
Compliant Example:
...
Non-Compliant Example:
...
“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
...
the screen reader should announce the form label and then the text in the placeholderif the text in the placeholder is the same as the form label the placeholder will not be announced by the screen reader
the screen reader should announce the form instructions
the screen reader should NOT announce dashes or any other characters
...
Markup and Code
| Code Block |
|---|
<form id="sfgov-search-form" role="search" novalidate="novalidate" method="post"> <form> <div> <label for="searchphone-inputnumber">Search<>Phone Number</label> <input id="serchphone-inputnumber" type="text" aria-describedby="phoneinstructions"> <p placeholderid="Search" />phoneinstructions">Enter your 10 digit phone number including area code.</p> </div> </form> |