This presentation will take a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
8. Before diving into accessibility,
we’ll look at some common UX
patterns associated with
autocomplete search.
9. 1. There should be clear wording or
visual indicators to describe the
purpose of the search.
10. For example, are users searching
across the entire site, an aspect of
the site, or is it a specific search
function?
11. Search towns in Australia
Diagram showing highlighted label “Search towns in Australia”
12. 2. If additional instructions are
required, they should be located in
close proximity to the field.
13. Diagram showing information under the input “You can filter by Town or by State”
Search towns in Australia
You can filter by Town or by State
14. 3. The placeholder attribute
should not be used for complex
instructions.
15. This attribute it is often displayed in
a faint colour which fails WCAG
colour contrast guidelines.
16. It is also wiped as soon as the
user begins typing so instructions
become unavailable.
17. Search
Search Towns in Australia
Diagram showing placeholder “Search towns in Australia” with red cross beside placeholder
18. 4. The list of autocomplete
suggestions could highlight the
string typed by the user.
19. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options highlighting the user string
20. Or, the list could the highlight
everything apart from the string
typed by the user.
21. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options highlighting the non-user string
22. Both of these methods are
beneficial as they help users
understand the relationship
between their string and the
resulting options.
23. 5. Users should be able to quickly
identify what type of strings will
trigger the autocomplete?
24. Does the search work based on the
initial characters of suggestions…
25. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options highlighting the user string at the start of each item
27. Search towns in Australia
ara
Araluen, NSW
Bargara, QLD
Bingara, NSW
Coonabarabran, NSW
Diagram showing autosuggest options highlighting the user string within each item
29. Users should not be presented with
suggestions that do not match
their typed strings.
30. Search towns in Australia
Banana
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options that do not match the user string
?
31. 7. Users should be able to easily
clear the search form of previously
typed strings.
32. Search towns in Australia
Adaminaby, NSW
Diagram showing highlighted clear component
33. 8. Ideally, there should be some
clearly defined submit action
associated with the search.
53. 1. Use the TAB keystroke to move
focus into the search input field
from a previous element with focus.
54. Search towns in Australia
Diagram showing input in focus
TAB
55. 2. Use the TAB keystroke to move
focus from the search input to the
“clear” button.
56. Search towns in Australia
Adaminaby, NSW
Diagram showing clear button in focus
TAB
57. 3. Use the ENTER keystroke to
trigger the “clear” button.
58. Search towns in Australia
Adaminaby, NSW
Diagram showing selected clear button
ENTER
59. Note: When the “clear” button has
been triggered, the search input
field should be cleared and focus
should shift to this field again.
60. Search towns in Australia
Diagram showing focus move for clear button back to search input
61. 4. Use the TAB keystroke to move
focus from the clear button to the
submit button.
62. Adaminaby, NSW
Search towns in Australia
Diagram showing focus move form the clear button to the submit button
TAB
63. 5. Use the ENTER keystroke to
trigger the submit button.
64. Search towns in Australia
Adaminaby, NSW
Diagram showing selected submit button
ENTER
65. Note: When the submit button has
been triggered, focus should shift
to the search result area below the
autocomplete search widget.
66. Diagram showing focus move from submit button to search results
Search towns in Australia
Search Results
Bell, NSW
Bell is a small rural and residential village in the
Blue Mountains region of New South Wales.
Bells Beach, VIC
Bells Beach is a coastal locality of Victoria,
Australia iand a renowned surf beach.
Bell
67. 6. Use the DOWN ARROW keystroke to
move focus from the search input
field to the first item in list of
autocomplete suggestions.
68. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing focus move from input to first suggestion
↓ARROW
69. 7. Use the UP ARROW and DOWN
ARROW keystrokes to navigate
backwards and forwards through
suggestions.
70. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing second selection in focus and arrows to indicate focus can move backwards or forwards
↓ARROW
↑ARROW
71. Note: The autosuggest item in focus
should always be in view if there is
a scrolling mechanism in place.
72. 8: Users should not be able to DOWN
ARROW past the last suggestion
option.
73. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing last selection in focus and red cross to indicate focus cannot go forward
↓ARROW
74. 9. Some developers allow DOWN
ARROW keystrokes to loop from the
last suggestion directly back to the
initial input box.
75. However, I have found that some
users find this confusing. They
may not be aware that they have
returning to the input field.
76. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing last selection in focus and red cross to indicate focus cannot jump to search input
↓ARROW
77. 10. However, users should be able
to UP ARROW from the first
suggestion back into the search
input field.
78. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing focus move from autosuggest dropdown to search input
↑ARROW
79. 11. Use the ENTER keystrokes to
select an autocomplete
suggestion.
80. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing selected suggest option
ENTER
81. Note: When the ENTER keystroke
has been triggered, focus should
shift back to the search input
field.
82. Search towns in Australia
Armadale, WA
Diagram showing focus move from selected suggestion to search input field
83. 12. Use the ESC keystroke to close
the suggestion list and return
focus to the initial input (i.e. if none
of the suggestions are relevant).
84. Search towns in Australia
ar
Diagram showing focus returning to input
ESC
107. However, it is important to consider
how the “clear” button will
operate.
108. Some browsers, like Chrome and
Safari will display an <input> type
of "search" with a native “clear”
button at the right side of the input.
Other browses like Firefox, do
not.
110. More importantly, this native “clear”
button often cannot be accessed
via the TAB keystroke, so it is
inaccessible for many Assistive
Technology users.
111. So, if you want to use a robust and
accessible “clear” button, it is
better to use a separate <button>
element.
112. Using CSS, you can make the clear
button look like it sits inside the
<input> element.
113. Diagram showing three different elements - the input, the clear and the submit button
Search towns in Australia
Search towns in Australia
114. Then make sure to set the type to
"text" rather than "search".
117. The aria-describedby attribute
allows us to describe the purpose
of the current element. It points the
current element to a new element
with a matching ID value.
122. The aria-owns attribute allows us
to define “a parent/child
contextual relationship to assistive
technologies that is otherwise
impossible to infer from the DOM”.
123. In other words, we can define the
<input> element as the parent, and
the <ul> element as the child
element.
146. The role attribute can be set with a
value of "listbox", which informs
assistive technologies that the
element is a widget that allows the
user to select one or more items
from a list of choices.
157. Each of the <li> elements can be
given a role attribute with a value
of "option" with informs assistive
technologies that they are
selectable items in a select list.
171. The aria-live attribute is set to
"assertive". This informs assistive
technologies as soon as anything
inside this element is dynamically
changed.
182. One of my favourite accessible
autocomplete search widgets is the
haltersweb version:
https://haltersweb.github.io/Accessibility/
autocomplete.html
183. However, there are a wide range of
different solutions available, such as:
http://www.visionaustralia.org/digital-access-autocomplete
https://a11y.nicolas-hoffmann.net/autocomplete-list/
https://alphagov.github.io/accessible-autocomplete/examples/
http://oaa-accessibility.org/examplep/combobox2/