Unexpected Form Behaviors

Visual Example

Compliant Example:

Non-Compliant Example:

Acceptance Criteria

It’s important to provide screen reader and keyboard only users with a mechanism to initiate a change in page behavior.

For example if typing information in a form field or selecting an item within a drop down menu will trigger a sudden and unexpected change to the page.

This can be confusing and disorienting to screen reader and keyboard only users.

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” , “Submit” or “Apply” 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

When the form button has keyboard focus:

the screen reader should announce the button label

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