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