In-Page Search Functionality
Visual Example
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
When the form field has keyboard focus:
the screen reader should announce the form label and then the text in the placeholder
don’t place critical form instructions in the placeholder (in the above example the placeholder does not include critical instructions)
Markup and Code
<form role="search" method="post">
<div>
<label for="filter-input">Filter</label>
<input id="filter-input" type="text" placeholder="Filter by department name">
<button>Update</button>
</div>
</form>