Search and Autocomplete

Visual Example

Search Default

Suggestion/Popup List Expanded

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 able to scroll through a list of search suggestions by using the up/down ↑/↓ arrow keys on the keyboard
be provided with a Search button as a mechanism to initiate the search and change in page behavior

As a screen reader user I should:

be provided with a search landmark role in the form element to help me identify the organization and structure of the web page
be able to explicitly associate the text label with the form control

When the search field has keyboard focus:

the screen reader should announce that this is the search region of the page
the screen reader should announce the form label
the screen reader should announce that the input field is an auto-suggest
the screen reader should announce that the user can select from the suggestion list or type their own input
the screen reader should announce that the user can scroll through the list of suggestions by using the arrow keys on the keyboard
when suggestions are arrowed through they are spoken aloud

Markup and Code

Markup

<form id="sfgov-search-form" class="sfgov-search-form" role="search" novalidate="novalidate" method="post">
  <div>
	<label for="edit-sfgov-search-input">Search</label>
	<input role="combobox" aria-autocomplete="both" aria-describedby="sfgov-search-describedby" aria-expanded="false" aria-owns="sfgov-search-autocomplete" aria-activedescendant="" type="text" id="edit-sfgov-search-input" name="search_input" value="" size="60" maxlength="128" placeholder="Search">
  </div>
  <div id="sfgov-search-describedby" class="visually-hidden">When autocomplete results are available use up and down arrows to review and enter to select, or type the value</div>
  <div id="sfgov-search-autocomplete" role="listbox" aria-label="Search autocomplete"></div>
	<input autocomplete="off" type="hidden" name="form_build_id" value="">
	<input type="hidden" name="form_id" value="sfgov_search_form">
  <div id="edit-actions"><input data-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Search">
  </div>
</form>

CSS

.sfgov-search-form label[for=edit-sfgov-search-input] {
    display: none;
}

View markup on github

ARIA Attributes to Make Search Functionality Fully Accessible to Screen Reader Users:

Add role=”combobox” to the <input> field to tell screen reader users that the input field is an auto-suggest.

Default text is “Edit Combo”

Add aria-autocomplete=”both” to the <input> field to tell screen reader users they can select from the suggestion list or type their own input.

This is the default text: “To set the value use the arrow keys or type the value”
You can customize this text by using the aria-describedby="initInstr"
Screen reader users can’t use the arrow keys until the autocomplete starts.
You may want to use a more customized message such as “When autocomplete results are available use up and down arrows to review and enter to select.”

Add aria-owns to the <input> field to link the suggestion list to the input field.

Add role=“listbox“ to the suggestion list <div> to tell screen reader users it contains a list of selectable items.

Add aria-activedescendant to the <input> element and populate it with the id of the currently highlighted list item. The aria-activedescendant value changes as the user presses the Up and Down arrows.

Add role=“option“ to each suggestion item, along with a unique id. That id is used by the aria-activedescendant attribute of the <input> element, whose value changes as users move through the list items with the arrow keys.

Add aria-expanded to indicate that the popup list is displayed.