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:
...
...
Acceptance Criteria
Don’t place characters, such as dashes “-----” or parenthesis ”( )” in the placeholder.
...
“dash, dash, dash, dash, dash” and “close parent, open parent”
Provide form instructions either above or below the form control.
As a screen reader user I should:
...
When the form field has keyboard focus:
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 readernot announce dashes or any other characters.
...
Markup and Code
| Code Block |
|---|
<form id="sfgov-search-form" role="search" novalidate="novalidate" method="post"> <div> <label for="search-input">Search</label> <input id="serch-input" type="text" placeholder="Search" /> </div> </form> |
...