Visual Example
Acceptance Criteria
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
be provided with a mechanism to initiate that change in page behavior, such as an “Update” or “Submit” button
When the form field has keyboard focus:
the screen reader should announce the form label and then the text in the placeholder
if the text in the placeholder is the same as the form label the placeholder will not be announced by the screen reader
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>