Download - Anatomy of an accessible auto suggest
Anatomy of an accessible auto suggest
Adem Cifcioglu Director of Accessible Technologies
Tweet me at: @ademcifci
Code for this presentation: www.ademc.me/respond17
creating an inclusive digital world
intopia.digital
Step 1 - Understand the requirements
Needs the following:
• a descriptive label
• a role="combobox"
• an aria-autocomplete attribute
• an aria-owns attribute
• an aria-activedescendant attribute that changes value with each selection
Search field
The auto-suggest must be able to be operated using only a keyboard
Focus must always be visible when users tab round a page
The suggestions that appear must be able to be navigated using standard keyboard commands (Up and Down arrow keys)
Pressing the Down Arrow and Up Arrow keys should move through the list of options highlighting the currently selected option
Keyboard Access
Pressing Enter must select the highlighted option and close the list
Using Down Arrow and Up Arrow should wrap through the text box when at the top or bottom of the list
Pressing Escape when the drop down is visible must close the list and leave the user typed text in the textbox
Keyboard Access
If suggestions available they must be displayed directly below the input field
Suggestions must come directly after the input field in the page source
If no suggestions are available, the list must not appear
Suggestions
The container for the suggestions must have a role='listbox' attribute
Each individual suggestion must have a role='option' attribute and an idattribute with a unique id
When selected a suggestion must have aria-selected='true'
The number of available suggestions must be announced to screen readers
Suggestions
Step 2 - Understand the code
HTML Mark-up
JavaScript: DOM ready
JavaScript: Do Search
JavaScript: Do Keypress
JavaScript: Do Keypress
Not Shown: function moveDown() does the reverse of the above
JavaScript: Move Up
JavaScript: Select Option
Step 3 - Seeing it in action
Demo 1: Inaccessible Auto-suggest
Demo 2: Accessible Auto-suggest
Accessible auto-suggest checklistThe search field
The auto-suggest input field must havea descriptive label
The input field must have arole="combobox" attribute
The input field must have anaria-autocomplete attribute
The input field must have an aria-owns attribute
The input field must have an aria-activedescendant attribute that changes value with each selection
Keyboard Access
The auto-suggest must be able to be operated using only a keyboard
Focus must always be visible
Suggestions can be selected using Up Arrow and Down Arrow keys (wrapping through the text box when the top or bottom of the list is reached)
Up Arrow and Down Arrow keys move through suggestions highlighting the current option
Enter key selects the highlighted option and closes the list
ESC when suggestions visible closes the list and leaves the user typed text in the textbox
Suggestions
Available suggestions must be displayed directly below the input field and come directly after the input field in the page source
Number of available suggestions must be announced to screen readers
Suggestions container has role="listbox" attribute
Individual suggestion has role="option" attribute and an id attribute with a unique id
When selected a suggestion has aria-selected="true"
Let's continue the conversationAdem Cifcioglu Director of Accessible Technologies
Tweet me at: @ademcifci
Tweet us at: @intopiadigital
Code for this presentation: www.ademc.me/respond17
creating an inclusive digital world
intopia.digital