Download - Building an accessible auto-complete - #ID24
![Page 1: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/1.jpg)
AccessibleAutocomplete
Building an
![Page 2: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/2.jpg)
What is Autocomplete?
![Page 3: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/3.jpg)
“Autocomplete” is a software function that provides relevant
suggestions based on input by the user.
![Page 4: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/4.jpg)
For this presentation, we’re going to focus on accessible autocomplete
associated with search.
![Page 5: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/5.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing autosuggest search component
![Page 6: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/6.jpg)
The aim is to provide some information to consider if you’re
thinking about building an accessible autocomplete search.
![Page 7: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/7.jpg)
User Experience
![Page 8: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/8.jpg)
Before diving into accessibility, we’ll look at some common UX
patterns associated with autocomplete search.
![Page 9: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/9.jpg)
1. There should be clear wording or visual indicators to describe the
purpose of the search.
![Page 10: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/10.jpg)
For example, are users searching across the entire site, an aspect of the site, or is it a specific search
function?
![Page 11: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/11.jpg)
Search towns in Australia
Diagram showing highlighted label “Search towns in Australia”
![Page 12: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/12.jpg)
2. If additional instructions are required, they should be located in
close proximity to the field.
![Page 13: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/13.jpg)
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
![Page 14: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/14.jpg)
3. The placeholder attribute should not be used for complex
instructions.
![Page 15: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/15.jpg)
This attribute it is often displayed in a faint colour which fails WCAG
colour contrast guidelines.
![Page 16: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/16.jpg)
It is also wiped as soon as the user begins typing so instructions
become unavailable.
![Page 17: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/17.jpg)
SearchSearch Towns in Australia
Diagram showing placeholder “Search towns in Australia” with red cross beside placeholder
![Page 18: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/18.jpg)
4. The list of autocomplete suggestions could highlight the
string typed by the user.
![Page 19: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/19.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing autosuggest options highlighting the user string
![Page 20: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/20.jpg)
Or, the list could the highlight everything apart from the string
typed by the user.
![Page 21: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/21.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing autosuggest options highlighting the non-user string
![Page 22: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/22.jpg)
Both of these methods are beneficial as they help users understand the relationship between their string and the
resulting options.
![Page 23: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/23.jpg)
5. Users should be able to quickly identify what type of strings will
trigger the autocomplete?
![Page 24: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/24.jpg)
Does the search work based on the initial characters of suggestions…
![Page 25: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/25.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing autosuggest options highlighting the user string at the start of each item
![Page 26: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/26.jpg)
Or any characters within the suggestion?
![Page 27: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/27.jpg)
Search towns in Australiaara
Araluen, NSWBargara, QLDBingara, NSWCoonabarabran, NSW
Diagram showing autosuggest options highlighting the user string within each item
![Page 28: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/28.jpg)
6. Any autocomplete suggestions should be accurate.
![Page 29: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/29.jpg)
Users should not be presented with suggestions that do not match
their typed strings.
![Page 30: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/30.jpg)
Search towns in AustraliaBanana
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing autosuggest options that do not match the user string
?
![Page 31: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/31.jpg)
7. Users should be able to easily clear the search form of previously
typed strings.
![Page 32: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/32.jpg)
Search towns in AustraliaAdaminaby, NSW
Diagram showing highlighted clear component
![Page 33: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/33.jpg)
8. Ideally, there should be some clearly defined submit action
associated with the search.
![Page 34: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/34.jpg)
Diagram showing highlighted submit component
Search towns in AustraliaAdaminaby, NSW
![Page 35: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/35.jpg)
Some search functions return “live filtering results”. These are results that dynamically change as the
user types.
![Page 36: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/36.jpg)
In these cases, a submit button may seem redundant as there is nothing
to submit.
![Page 37: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/37.jpg)
However, Screen Reader users may not be aware that their typed strings have already delivered a result in a
different area of the page.
![Page 38: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/38.jpg)
While it’s possible to inform users that changes have occurred, a
submit button is an easy method to get around this problem.
![Page 39: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/39.jpg)
Keyboard-only
![Page 40: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/40.jpg)
Regardless of the method used to build an auto-complete, it should be
accessible to keyboard-only users.
![Page 41: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/41.jpg)
Focus
![Page 42: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/42.jpg)
Any web page or web app should have clear visual indicators to help
keyboard-only users determine which element is currently in focus.
![Page 43: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/43.jpg)
This could just be the default browser focus ring…
![Page 44: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/44.jpg)
Diagram showing input in focus - indicated with blue focus ring
Search towns in Australia
![Page 45: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/45.jpg)
Or using your own visual indicator methodology.
![Page 46: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/46.jpg)
Search towns in Australia
Diagram showing input in focus - indicated with black dotted lines
![Page 47: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/47.jpg)
It should never be hard or impossible for keyboard-only users
to see what is in focus.
![Page 48: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/48.jpg)
/* Bad practice */ input:focus {
outline: none; }
![Page 49: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/49.jpg)
Ideally, the visual indicator methodology should be consistent
across all focusable elements.
![Page 50: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/50.jpg)
Users should not have to learn different visual indicators just to understand what is currently in
focus.
![Page 51: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/51.jpg)
Keystrokes
![Page 52: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/52.jpg)
Keyboard-only users should be able to perform any of the following
actions…
![Page 53: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/53.jpg)
1. Use the TAB keystroke to move focus into the search input field
from a previous element with focus.
![Page 54: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/54.jpg)
Search towns in Australia
Diagram showing input in focus
TAB
![Page 55: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/55.jpg)
2. Use the TAB keystroke to move focus from the search input to the
“clear” button.
![Page 56: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/56.jpg)
Search towns in AustraliaAdaminaby, NSW
Diagram showing clear button in focus
TAB
![Page 57: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/57.jpg)
3. Use the ENTER keystroke to trigger the “clear” button.
![Page 58: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/58.jpg)
Search towns in AustraliaAdaminaby, NSW
Diagram showing selected clear button
ENTER
![Page 59: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/59.jpg)
Note: When the “clear” button has been triggered, the search input
field should be cleared and focus should shift to this field again.
![Page 60: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/60.jpg)
Search towns in Australia
Diagram showing focus move for clear button back to search input
![Page 61: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/61.jpg)
4. Use the TAB keystroke to move focus from the clear button to the
submit button.
![Page 62: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/62.jpg)
Adaminaby, NSW
Search towns in Australia
Diagram showing focus move form the clear button to the submit button
TAB
![Page 63: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/63.jpg)
5. Use the ENTER keystroke to trigger the submit button.
![Page 64: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/64.jpg)
Search towns in AustraliaAdaminaby, NSW
Diagram showing selected submit button
ENTER
![Page 65: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/65.jpg)
Note: When the submit button has been triggered, focus should shift
to the search result area below the autocomplete search widget.
![Page 66: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/66.jpg)
Diagram showing focus move from submit button to search results
Search towns in Australia
Search Results
Bell, NSWBell is a small rural and residential village in theBlue Mountains region of New South Wales.
Bells Beach, VICBells Beach is a coastal locality of Victoria,Australia iand a renowned surf beach.
Bell
![Page 67: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/67.jpg)
6. Use the DOWN ARROW keystroke to move focus from the search input
field to the first item in list of autocomplete suggestions.
![Page 68: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/68.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing focus move from input to first suggestion
↓ARROW
![Page 69: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/69.jpg)
7. Use the UP ARROW and DOWN ARROW keystrokes to navigate
backwards and forwards through suggestions.
![Page 70: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/70.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing second selection in focus and arrows to indicate focus can move backwards or forwards
↓ARROW
↑ARROW
![Page 71: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/71.jpg)
Note: The autosuggest item in focus should always be in view if there is
a scrolling mechanism in place.
![Page 72: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/72.jpg)
8: Users should not be able to DOWN ARROW past the last suggestion
option.
![Page 73: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/73.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing last selection in focus and red cross to indicate focus cannot go forward
↓ARROW
![Page 74: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/74.jpg)
9. Some developers allow DOWN ARROW keystrokes to loop from the
last suggestion directly back to the initial input box.
![Page 75: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/75.jpg)
However, I have found that some users find this confusing. They may not be aware that they have
returning to the input field.
![Page 76: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/76.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing last selection in focus and red cross to indicate focus cannot jump to search input
↓ARROW
![Page 77: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/77.jpg)
10. However, users should be able to UP ARROW from the first
suggestion back into the search input field.
![Page 78: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/78.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing focus move from autosuggest dropdown to search input
↑ARROW
![Page 79: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/79.jpg)
11. Use the ENTER keystrokes to select an autocomplete
suggestion.
![Page 80: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/80.jpg)
Search towns in Australiaar
Arltunga, NTArmadale, WAArmidale, NSWArno Bay, SA
Diagram showing selected suggest option
ENTER
![Page 81: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/81.jpg)
Note: When the ENTER keystroke has been triggered, focus should shift back to the search input
field.
![Page 82: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/82.jpg)
Search towns in AustraliaArmadale, WA
Diagram showing focus move from selected suggestion to search input field
![Page 83: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/83.jpg)
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).
![Page 84: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/84.jpg)
Search towns in Australiaar
Diagram showing focus returning to input
ESC
![Page 85: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/85.jpg)
Markup for screen readers
![Page 86: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/86.jpg)
There are a wide range of different ways to mark up an accessible auto-suggest widget. Here are
some suggestions.
![Page 87: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/87.jpg)
A quick overall view of the markup components
![Page 88: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/88.jpg)
The widget should be wrapped inside a <form> element.
![Page 89: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/89.jpg)
<form action="#"> </form>
![Page 90: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/90.jpg)
The <label> and <input> elements are the core of the search
button.
![Page 91: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/91.jpg)
<form action="#"> <label></label>
<input> </form>
![Page 92: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/92.jpg)
In our example, one <button> element will be used to “clear” user
input.
![Page 93: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/93.jpg)
<form action="#"> <label></label>
<input> <button></button>
</form>
![Page 94: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/94.jpg)
And a second <button> element will be used to submit the form.
![Page 95: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/95.jpg)
<form action="#"> <label></label>
<input> <button></button>
<button></button> </form>
![Page 96: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/96.jpg)
The <ul> allows us to display the list of suggestions when
appropriate.
![Page 97: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/97.jpg)
<form action="#"> <label></label>
<input> <button></button>
<button></button> <ul>
<li></li> <li></li> <li></li>
</ul> </form>
![Page 98: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/98.jpg)
The <div> element allows us to provide hidden instructions for
screen reader users.
![Page 99: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/99.jpg)
<form action="#"> <label></label>
<input> <button></button>
<button></button> <ul>
<li></li> <li></li> <li></li>
</ul> <div></div>
</form>
![Page 100: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/100.jpg)
FOR and ID attributes
![Page 101: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/101.jpg)
In order to explicitly associate the <label> element with the
<input> element, we should use for and id attributes.
![Page 102: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/102.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="text"
aria-describedby="instructions" aria-owns="results"
aria-expanded="false" >
![Page 103: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/103.jpg)
TYPE attribute
![Page 104: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/104.jpg)
The <input> element’s type attribute could be set to a value of
"text" or "search".
![Page 105: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/105.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="text"
aria-describedby="instructions" aria-owns="results"
aria-expanded="false" >
![Page 106: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/106.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="search"
aria-describedby="instructions" aria-owns="results"
aria-expanded="false" >
![Page 107: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/107.jpg)
However, it is important to consider how the “clear” button will
operate.
![Page 108: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/108.jpg)
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.
![Page 109: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/109.jpg)
Chrome
Firefox
Safari
Diagram showing Chrome and Safari’s clear button. Firefox has no clear button.
![Page 110: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/110.jpg)
More importantly, this native “clear” button often cannot be accessed
via the TAB keystroke, so it is inaccessible for many Assistive
Technology users.
![Page 111: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/111.jpg)
So, if you want to use a robust and accessible “clear” button, it is
better to use a separate <button> element.
![Page 112: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/112.jpg)
Using CSS, you can make the clear button look like it sits inside the
<input> element.
![Page 113: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/113.jpg)
Diagram showing three different elements - the input, the clear and the submit button
Search towns in Australia
Search towns in Australia
![Page 114: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/114.jpg)
Then make sure to set the type to "text" rather than "search".
![Page 115: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/115.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="text"
aria-describedby="instructions" aria-owns="results"
aria-expanded="false" >
![Page 116: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/116.jpg)
ARIA-DESCRIBEDBY attribute
![Page 117: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/117.jpg)
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.
![Page 118: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/118.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="text"
aria-describedby="instructions" aria-owns="results"
aria-expanded="false" >
<div id="instructions" aria-live="assertive" style="display: none;">
... </div>
![Page 119: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/119.jpg)
This allows us to provide basic instructions on the use of the
widget for assistive technologies.
![Page 120: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/120.jpg)
<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>
![Page 121: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/121.jpg)
ARIA-OWNS attribute
![Page 122: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/122.jpg)
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”.
![Page 123: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/123.jpg)
In other words, we can define the <input> element as the parent, and
the <ul> element as the child element.
![Page 124: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/124.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="text"
aria-describedby="instructions" aria-owns="results"
aria-expanded="false" >
<ul id="results"> ...
</ul>
![Page 125: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/125.jpg)
ARIA-EXPANDED attribute
![Page 126: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/126.jpg)
The aria-expanded attribute allows us to inform assistive technologies when the autocomplete dropdown
is present. It is initially set to "false".
![Page 127: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/127.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="text"
aria-describedby="instructions" aria-owns="results"
aria-expanded="false" >
![Page 128: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/128.jpg)
This value needs to dynamically change to "true" as soon as the
autocomplete suggestions are present.
![Page 129: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/129.jpg)
<label for="search">Search towns in Australia</label> <input
id="search" type="text"
aria-describedby="instructions" aria-owns="results"
aria-expanded="true" >
![Page 130: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/130.jpg)
Buttons
![Page 131: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/131.jpg)
Directly after the input, we need two <button> elements.
![Page 132: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/132.jpg)
The first <button> should be a type of "button" and allow users to
clear the input.
![Page 133: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/133.jpg)
<button type="button" aria-label="Clear"></button> <button type="submit" aria-label="Search"></button>
![Page 134: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/134.jpg)
The second <button> should be a type of "submit" and allow users to
submit the form.
![Page 135: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/135.jpg)
<button type="button" aria-label="Clear"></button> <button type="submit" aria-label="Search"></button>
![Page 136: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/136.jpg)
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.
![Page 137: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/137.jpg)
Search towns in Australia
Diagram showing clear and search icons
![Page 138: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/138.jpg)
However, if you user icons instead of text, you will need to provide additional context for Assistive
Technologies.
![Page 139: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/139.jpg)
In this case, we can use aria-label attributes to provide hidden
labels for both buttons.
![Page 140: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/140.jpg)
<button type="button" aria-label="Clear"></button> <button type="submit" aria-label="Search"></button>
![Page 141: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/141.jpg)
Unordered list
![Page 142: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/142.jpg)
After the two button elements, we need to add the <ul> element which
will be used to display the autocomplete suggestions.
![Page 143: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/143.jpg)
<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>
![Page 144: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/144.jpg)
As mentioned before, the ID attribute’s value of "results" allows us to determine that this
element is “owned” by the parent <input> element.
![Page 145: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/145.jpg)
<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>
![Page 146: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/146.jpg)
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.
![Page 147: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/147.jpg)
<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>
![Page 148: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/148.jpg)
To make sure the element cannot be brought into focus before it is
triggered, we can set the tabindex attribute to "-1".
![Page 149: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/149.jpg)
<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>
![Page 150: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/150.jpg)
This value needs to dynamically change to "0" as soon as the autocomplete suggestions are
present.
![Page 151: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/151.jpg)
<ul id="results"
role="listbox" tabindex="0"
style="display: block;" >
<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>
![Page 152: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/152.jpg)
To make sure the element is initially hidden we can set the style attribute to "display:none".
![Page 153: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/153.jpg)
<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>
![Page 154: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/154.jpg)
This value needs to dynamically change to something like
"display:block" as soon as the autocomplete options are triggered.
![Page 155: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/155.jpg)
<ul id="results"
role="listbox" tabindex="0"
style="display: block;" >
<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>
![Page 156: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/156.jpg)
List items
![Page 157: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/157.jpg)
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.
![Page 158: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/158.jpg)
<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>
![Page 159: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/159.jpg)
Each of the <li> elements needs to have an aria-selected attribute
initially set to "false".
![Page 160: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/160.jpg)
<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>
![Page 161: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/161.jpg)
This value needs to dynamically change to "true" if the individual
option is selected.
![Page 162: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/162.jpg)
<ul id="results"
role="listbox" tabindex="-1"
style="display: none;" >
<li role="option" aria-selected="true">apple</li> <li role="option" aria-selected="false">banana</li> <li role="option" aria-selected="false">pear</li>
</ul>
![Page 163: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/163.jpg)
The hidden DIV
![Page 164: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/164.jpg)
After the <ul> element, we have the <div> element, which has the
instructions for assistive technologies.
![Page 165: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/165.jpg)
<div id="instructions"
class="off-left" aria-live="assertive"
> When autocomplete options are available, use up and down
arrows to review and enter to select. </div>
![Page 166: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/166.jpg)
As mentioned before, the ID value allows us to point the <input>
element to this <div> element via the aria-describedby attribute.
![Page 167: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/167.jpg)
<div id="instructions"
class="off-left" aria-live="assertive"
> When autocomplete options are available, use up and down
arrows to review and enter to select. </div>
![Page 168: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/168.jpg)
The <div> element needs to be visually hidden, but still available to
screen readers.
![Page 169: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/169.jpg)
This can be achieved by setting it “off-left” using CSS. So, we can
give it a pretend “off-left” class here.
![Page 170: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/170.jpg)
<div id="instructions"
class="off-left" aria-live="assertive"
> When autocomplete options are available, use up and down
arrows to review and enter to select. </div>
![Page 171: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/171.jpg)
The aria-live attribute is set to "assertive". This informs assistive
technologies as soon as anything inside this element is dynamically
changed.
![Page 172: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/172.jpg)
<div id="instructions"
class="off-left" aria-live="assertive"
> When autocomplete options are available, use up and down
arrows to review and enter to select. </div>
![Page 173: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/173.jpg)
We need this because the instructions will dynamically
change as soon as the autocomplete options are triggered.
![Page 174: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/174.jpg)
<div id="instructions"
class="off-left" aria-live="assertive"
> When autocomplete results are available use up and down
arrows to review and enter to select. </div>
![Page 175: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/175.jpg)
<div id="instructions"
class="off-left" aria-live="assertive"
> 6 options available. Use up and down arrows to review and
enter to select. </div>
![Page 176: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/176.jpg)
The instructions should also immediately change as users type
if the number of suggestions changes.
![Page 177: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/177.jpg)
<div id="instructions"
class="off-left" aria-live="assertive"
> 3 options available. Use up and down arrows to review and
enter to select. </div>
![Page 178: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/178.jpg)
The ideal method?
![Page 179: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/179.jpg)
As mentioned before, this is just one method that could be used.
![Page 180: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/180.jpg)
Before deciding, make sure you check out different methods and
test them - with real users, and across different assistive
technologies.
![Page 181: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/181.jpg)
Good examples
![Page 182: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/182.jpg)
One of my favourite accessible autocomplete search widgets is the
haltersweb version:
https://haltersweb.github.io/Accessibility/autocomplete.html
![Page 183: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/183.jpg)
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/
![Page 184: Building an accessible auto-complete - #ID24](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a669bd87f8b9ad4438b4aa9/html5/thumbnails/184.jpg)
Russ Weakley Max Design
Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley