In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
132. “Autocomplete” is a software
function that provides
relevant suggestions based on
input by the user.
133. For this presentation, we’re
going to focus on an example
autocomplete associated with
searching for towns in
Australia.
134. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component
Label
135. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component
Input
136. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component
Clear mechanism
137. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component
Submit button
138. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component
Drop-down suggestions list
139. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component
Scroll bar (if needed)
140. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component
Results area below
141. How do we make an
autocomplete widget
accessible?
142. Some of this is going to sound
awfully familiar…
145. 1. Use the TAB keystroke to
move focus into the search
input field from a previous
element with focus.
146. Search towns in Australia
Diagram showing input in focus
TAB
147. 2. Use the TAB keystroke to
move focus from the search
input to the “clear” button.
148. Search towns in Australia
Adaminaby, NSW
Diagram showing clear button in focus
TAB
149. 3. Use the ENTER keystroke to
trigger the “clear” button.
150. Search towns in Australia
Adaminaby, NSW
Diagram showing selected clear button
ENTER
151. Note: When the “clear” button
has been triggered, the search
input field should be cleared
and focus should shift to this
field again.
152. Search towns in Australia
Diagram showing focus move for clear button back to search input
153. 4. Use the TAB keystroke to
move focus from the clear
button to the submit button.
154. Adaminaby, NSW
Search towns in Australia
Diagram showing focus move form the clear button to the submit button
TAB
155. 5. Use the ENTER keystroke to
trigger the submit button.
156. Search towns in Australia
Adaminaby, NSW
Diagram showing selected submit button
ENTER
157. Note: When the submit button
has been triggered, focus
should shift to the first search
result below the autocomplete
search widget.
158. Search towns in Australia
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
Diagram showing focus move from submit button to first search result
159. 6. Use the DOWN ARROW
keystroke to move focus from
the search input field to the
first item in list of
autocomplete suggestions.
160. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing focus move from input to first suggestion
DOWN ARROW
161. 7. Use the UP ARROW and DOWN
ARROW keystrokes to navigate
backwards and forwards
through suggestions.
162. 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
DOWN ARROW
UP ARROW
163. 8: Users should not be able to
DOWN ARROW past the last
suggestion option.
164. 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
DOWN ARROW
165. 9. Some developers allow DOWN
ARROW keystrokes to loop from
the last suggestion directly
back to the initial input box.
166. However, I have found that
some users find this
confusing. They may not be
aware that they have returning
to the input field.
167. 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
DOWN ARROW
168. I prefer to follow the default
<select> behaviour where
focus loops through all
options only.
From last back to first etc.
169. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing last selection in focus and focus jumping to the first option
DOWN ARROW
170. 10. Use the ENTER keystrokes to
select an autocomplete
suggestion.
171. Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing selected suggest option
ENTER
172. Note: When the ENTER
keystroke has been triggered,
focus should shift back to the
search input field.
173. Search towns in Australia
Armadale, WA
Diagram showing focus move from selected suggestion to search input field
174. 11. 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).
175. Search towns in Australia
ar
Diagram showing focus returning to input
ESC
198. More importantly, this native
“clear” button often cannot be
accessed via the TAB
keystroke, so it is inaccessible
for many Assistive Technology
users.
199. So, it is better to use a separate
<button> element for clearing
the field.
202. This points to a matching ID
value inside the hidden <div>
element below.
203. <label for="search">Search towns in Australia</label>
<input
id="search"
type="text"
aria-describedby="instructions"
>
<div id="instructions" aria-live="assertive"
style="display: none;">
When autocomplete options are available, use up and
down arrows to review and enter to select.
</div>
205. The aria-owns attribute
defines a “parent/child
contextual relationship to
assistive technologies that is
otherwise impossible to infer
from the DOM”.
206. In other words, we can define
the <input> element as the
parent, and the <ul> element
as the child element.
255. The aria-live attribute is set
to "assertive". This informs
assistive technologies as soon
as anything inside this element
is dynamically changed.