Building an accessible auto-complete - #ID24

Accessible 
Autocomplete
Building an

“Autocomplete” is a software
function that provides relevant
suggestions based on input by the
user.

For this presentation, we’re going to
focus on accessible autocomplete
associated with search.

Search towns in Australia
ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest search component

The aim is to provide some
information to consider if you’re
thinking about building an
accessible autocomplete search.

Before diving into accessibility,  
we’ll look at some common UX
patterns associated with
autocomplete search.

1. There should be clear wording or
visual indicators to describe the
purpose of the search.

For example, are users searching
across the entire site, an aspect of
the site, or is it a speciﬁc search
function?

Diagram showing highlighted label “Search towns in Australia”

2. If additional instructions are
required, they should be located in
close proximity to the ﬁeld.

Diagram showing information under the input “You can ﬁlter by Town or by State”
You can filter by Town or by State

3. The placeholder attribute
should not be used for complex
instructions.

This attribute it is often displayed in
a faint colour which fails WCAG
colour contrast guidelines.

It is also wiped as soon as the
user begins typing so instructions
become unavailable.

Search
Search Towns in Australia
Diagram showing placeholder “Search towns in Australia” with red cross beside placeholder

4. The list of autocomplete
suggestions could highlight the
string typed by the user.

ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options highlighting the user string

Or, the list could the highlight
everything apart from the string
typed by the user.

ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options highlighting the non-user string

Both of these methods are
beneﬁcial as they help users
understand the relationship
between their string and the
resulting options.

5. Users should be able to quickly
identify what type of strings will
trigger the autocomplete?

Does the search work based on the
initial characters of suggestions…

ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options highlighting the user string at the start of each item

Or any characters within the
suggestion?

ara
Araluen, NSW
Bargara, QLD
Bingara, NSW
Coonabarabran, NSW
Diagram showing autosuggest options highlighting the user string within each item

6. Any autocomplete suggestions
should be accurate.

Users should not be presented with
suggestions that do not match
their typed strings.

Banana
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing autosuggest options that do not match the user string
?

7. Users should be able to easily
clear the search form of previously
typed strings.

Adaminaby, NSW
Diagram showing highlighted clear component

8. Ideally, there should be some
clearly deﬁned submit action
associated with the search.

Diagram showing highlighted submit component
Adaminaby, NSW

Some search functions return “live
ﬁltering results”. These are results
that dynamically change as the
user types.

In these cases, a submit button may
seem redundant as there is nothing
to submit.

However, Screen Reader users may
not be aware that their typed strings
have already delivered a result in a
diﬀerent area of the page.

While it’s possible to inform users
that changes have occurred, a
submit button is an easy method to
get around this problem.

Regardless of the method used to
build an auto-complete, it should be
accessible to keyboard-only
users.

Any web page or web app should
have clear visual indicators to help
keyboard-only users determine
which element is currently in focus.

This could just be the default
browser focus ring…

Diagram showing input in focus - indicated with blue focus ring

Or using your own visual indicator
methodology.

Diagram showing input in focus - indicated with black dotted lines

It should never be hard or
impossible for keyboard-only users
to see what is in focus.

/* Bad practice */
input:focus {
outline: none;
}

Ideally, the visual indicator
methodology should be consistent
across all focusable elements.

Users should not have to learn
diﬀerent visual indicators just to
understand what is currently in
focus.

Keyboard-only users should be able
to perform any of the following
actions…

1. Use the TAB keystroke to move
focus into the search input ﬁeld
from a previous element with focus.

Diagram showing input in focus
TAB

focus from the search input to the
“clear” button.

Adaminaby, NSW
Diagram showing clear button in focus
TAB

3. Use the ENTER keystroke to
trigger the “clear” button.

Adaminaby, NSW
Diagram showing selected clear button
ENTER

Note: When the “clear” button has
been triggered, the search input
ﬁeld should be cleared and focus
should shift to this ﬁeld again.

Diagram showing focus move for clear button back to search input

focus from the clear button to the
submit button.

Adaminaby, NSW
Diagram showing focus move form the clear button to the submit button
TAB

5. Use the ENTER keystroke to
trigger the submit button.

Adaminaby, NSW
Diagram showing selected submit button
ENTER

Note: When the submit button has
been triggered, focus should shift
to the search result area below the
autocomplete search widget.

Diagram showing focus move from submit button to search results
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

6. Use the DOWN ARROW keystroke to
move focus from the search input
ﬁeld to the ﬁrst item in list of
autocomplete suggestions.

ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing focus move from input to ﬁrst suggestion
↓ARROW

7. Use the UP ARROW and DOWN
ARROW keystrokes to navigate
backwards and forwards through
suggestions.

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

Note: The autosuggest item in focus
should always be in view if there is
a scrolling mechanism in place.

8: Users should not be able to DOWN
ARROW past the last suggestion
option.

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

9. Some developers allow DOWN
ARROW keystrokes to loop from the
last suggestion directly back to the
initial input box.

However, I have found that some
users ﬁnd this confusing. They
may not be aware that they have
returning to the input ﬁeld.

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

10. However, users should be able
to UP ARROW from the ﬁrst
suggestion back into the search
input ﬁeld.

ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing focus move from autosuggest dropdown to search input
↑ARROW

11. Use the ENTER keystrokes to
select an autocomplete
suggestion.

ar
Arltunga, NT
Armadale, WA
Armidale, NSW
Arno Bay, SA
Diagram showing selected suggest option
ENTER

Note: When the ENTER keystroke
has been triggered, focus should
shift back to the search input
ﬁeld.

Armadale, WA
Diagram showing focus move from selected suggestion to search input ﬁeld

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).

ar
Diagram showing focus returning to input
ESC

There are a wide range of diﬀerent
ways to mark up an accessible
auto-suggest widget. Here are
some suggestions.

A quick overall view of the
markup components

The widget should be wrapped
inside a <form> element.

The <label> and <input>
elements are the core of the search
button.

In our example, one <button>
element will be used to “clear” user
input.

And a second <button> element
will be used to submit the form.

The <ul> allows us to display the
list of suggestions when
appropriate.

The <div> element allows us to
provide hidden instructions for
screen reader users.

In order to explicitly associate

the <label> element with the
<input> element, we should use

for and id attributes.

<label for="search">Search towns in Australia</label>
<input
id="search"
type="text"
aria-describedby="instructions"
aria-owns="results"
aria-expanded="false"
>

The <input> element’s type
attribute could be set to a value of
"text" or "search".

However, it is important to consider
how the “clear” button will
operate.

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.

Chrome
Firefox
Safari
Diagram showing Chrome and Safari’s clear button. Firefox has no clear button.

More importantly, this native “clear”
button often cannot be accessed
via the TAB keystroke, so it is
inaccessible for many Assistive
Technology users.

So, if you want to use a robust and
accessible “clear” button, it is
better to use a separate <button>
element.

Using CSS, you can make the clear
button look like it sits inside the
<input> element.

Diagram showing three diﬀerent elements - the input, the clear and the submit button

Then make sure to set the type to
"text" rather than "search".

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.

This allows us to provide basic
instructions on the use of the
widget for assistive technologies.

<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>

The aria-owns attribute allows us
to deﬁne “a parent/child
contextual relationship to assistive
technologies that is otherwise
impossible to infer from the DOM”.

In other words, we can deﬁne the
<input> element as the parent, and
the <ul> element as the child
element.

The aria-expanded attribute allows
us to inform assistive technologies
when the autocomplete dropdown
is present. It is initially set to
"false".

This value needs to dynamically
change to "true" as soon as the
autocomplete suggestions are
present.

Directly after the input, we need two
<button> elements.

The ﬁrst <button> should be a type
of "button" and allow users to
clear the input.

The second <button> should be a
type of "submit" and allow users to
submit the form.

You may want to use icons instead
of text for one or both of the
buttons. In this case we are using
“clear” and “search” icons.

Diagram showing clear and search icons

However, if you user icons instead
of text, you will need to provide
additional context for Assistive
Technologies.

In this case, we can use aria-
label attributes to provide hidden
labels for both buttons.

After the two button elements, we
need to add the <ul> element which
will be used to display the
autocomplete suggestions.

<ul
id="results"
role="listbox"
tabindex="-1"
style="display: none;"
>
<li role="option" aria-selected="false">apple</li>
<li role="option" aria-selected="false">banana</li>
<li role="option" aria-selected="false">pear</li>
</ul>

As mentioned before, the ID
attribute’s value of "results"
allows us to determine that this
element is “owned” by the parent
<input> element.

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.

To make sure the element cannot
be brought into focus before it is
triggered, we can set the tabindex
attribute to "-1".

change to "0" as soon as the
autocomplete suggestions are
present.

<ul
id="results"
role="listbox"
tabindex="0"
style="display: block;"
>
<li role="option" aria-selected="false">apple</li>
</ul>

To make sure the element is initially
hidden we can set the style
attribute to "display:none".

change to something like
"display:block" as soon as the
autocomplete options are triggered.

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.

Each of the <li> elements needs to
have an aria-selected attribute
initially set to "false".

change to "true" if the individual
option is selected.

<ul
id="results"
role="listbox"
tabindex="-1"
style="display: none;"
>
<li role="option" aria-selected="true">apple</li>
</ul>

After the <ul> element, we have the
<div> element, which has the
instructions for assistive
technologies.

<div
id="instructions"
class="off-left"
aria-live="assertive"
>
When autocomplete options are available, use up and down
</div>

As mentioned before, the ID value
allows us to point the <input>
element to this <div> element via
the aria-describedby attribute.

The <div> element needs to be
visually hidden, but still available to
screen readers.

This can be achieved by setting it
“oﬀ-left” using CSS. So, we can
give it a pretend “oﬀ-left” class here.

The aria-live attribute is set to
"assertive". This informs assistive
technologies as soon as anything
inside this element is dynamically
changed.

We need this because the
instructions will dynamically
change as soon as the
autocomplete options are triggered.

<div
id="instructions"
class="off-left"
>
When autocomplete results are available use up and down
</div>

<div
id="instructions"
class="off-left"
>
6 options available. Use up and down arrows to review and
enter to select.
</div>

The instructions should also
immediately change as users type
if the number of suggestions
changes.

<div
id="instructions"
class="off-left"
>
3 options available. Use up and down arrows to review and
enter to select.
</div>

As mentioned before, this is just
one method that could be used.

Before deciding, make sure you
check out diﬀerent methods and
test them - with real users, and
across diﬀerent assistive
technologies.

One of my favourite accessible
autocomplete search widgets is the
haltersweb version:

https://haltersweb.github.io/Accessibility/
autocomplete.html

However, there are a wide range of
diﬀerent solutions available, such as:

http://www.visionaustralia.org/digital-access-autocomplete
https://a11y.nicolas-hoﬀmann.net/autocomplete-list/
https://alphagov.github.io/accessible-autocomplete/examples/
http://oaa-accessibility.org/examplep/combobox2/

Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

Building an accessible auto-complete - #ID24

More Related Content

More from Russ Weakley (20)

Recently uploaded (20)

Building an accessible auto-complete - #ID24