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>

View markup on github