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>