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
The placeholder attribute does not take the place of a <label>.
In this case you would need to add either a visible or an invisible form label for screen reader users.
One issue with the placeholder is that it disappears once information has been entered into the field, making it more difficult for users to make corrections.
Don’t place important form instructions in the placeholder.
Ensure that important form instructions are available even when the user fills the data.
The placeholder attribute is announced by most screen reader and browser combinations.
...
Acceptance Criteria
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 provided with a mechanism to initiate the change in page behavior, such as an “Update” or “Submit” button
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 don’t place critical form instructions in the placeholder is the same as the form label the placeholder will not be announced by the screen reader(in the above example the placeholder does not include critical instructions)
...
Markup and Code
| Code Block |
|---|
<form id="sfgov-search-form" role="search" novalidate="novalidate" method="post"> <div> <label for="searchfilter-input">Search<>Filter</label> <input id="serchfilter-input" type="text" placeholder="Search" />Filter by department name"> <button>Update</button> </div> </form> |