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 user I should:
be provided with a form label
be able to explicitly associate the text label with the form control
When the form field has keyboard focus:
the screen reader should not announce dashes or any other characters.
Markup and Code
<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>