The search function should be easily accessible from all pages, and the search result should be adapted to the specific site.
Autocomplete gives users relevant search results as quickly as possible. It gives a result that changes for every letter the user enters. Autocomplete should behave in a standardized way all over SVT's sites, but the styling could vary.
Show word suggestions from the first entered letter. It's recommended that for letter one and two you only show words that starts with those letters, to keep word suggestions relevant.
Show up to 5 items in the autocomplete list. It’s not recommend to divide the list into categories with headings.
The list should be sorted by relevance, but some services might want to sort by date, alphabetically or by popularity, and those are all fine.
Every service decides what content types should be included in the autocomplete function. Each item should have a landing page.
The autocomplete list can include item images to enhance understanding. Avoid placeholder images.
At the end of list, add a button to make a “normal” search on the entered keyword. It should look different from the other options in the list.
Keybord arrows are used to navigate in the result list. The selected option should be clearly marked, and different from the keyboard focus. Tab navigation in the list should be avoided.
The autocomplete list is a loop, so you can go directly from the last to the first item again.
Enter is used to activate the selected autocomplete result.
Esc is used to close the autocomplete result.
When focus leaves autocomplete, the list is closed.
Description of how the search is structured and how to make it accessible to as many people as possible.
- Do not put the
role="search"on the form element.
role="search"should be placed for example in a
<input>must have a descriptive label, in this example hidden visually but "visible" for screen readers
<input>must have attribute
<button type="submit">only contains a font icon. Make sure it is not read by screen readers
aria-hidden="true"as well as using a label that describes the button for screen readers
<div> which like the
<input> is hidden visually. The
<div> should have
aria-live="assertive" and in this
<div> we write the text that we want the screen reader to read out, such as number of results as well as the choice the user has highlighted in the autocomplete.
<input> should have these aria attributes:
aria-controls="a11y-autocomplete__result", pointing to the
<div>showing results from autocomplete.
<button>and the options in the autocomplete should have a clear focus state.