4. Interactive WAI-ARIA (Basic)
Suggestion Boxes
A suggestion box (aka, combo box or autocomplete box) is a type of selection menu that helps users enter a correct choice. They are typically made up of a text entry field and a list of choices based on a number of characters entered into the text field. In the example provided here, entering a few characters brings up a list of countries that contain those characters.
Because the text entry field is a standard form text input field, it will be accessible by default. No additional coding is required to make it accessible. What needs the most attention is the list of choices, which needs to announce itself when it appears and needs to be keyboard navigable.
WAI-ARIA roles, states, and properties used in a suggestion box
- role=’region’
- aria-live=’polite’
- aria-describedby='[id of instructions div]’
The following JSFiddle presents a typical suggestion box. Review the JavaScript and HTML markup, and test the suggestion box presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking “Edit in JSFiddle”, copying the accessibility/WAI-ARIA code described below to fix the accessibility of the suggestion box, before completing Activity 5, on the page that follows.
Define some instructions to make it clear there will be suggestions appearing when text is entered into the text input field.
When the suggestion box receives focus, generate the instructions for it by adding the notify() function to the onFocus() function to produce a live region with the instruction text. This instruction text is then read automatically when a screen reader encounters the suggestion box text field.
Within the init() function, create a <div> to use as a live region, adding aria-live="polite" to announce the list usage instructions defined above when the text field receives focus. Also, give it a role="region" so it can be found in the landmarks list.
Provide additional instructions when the suggestion box is populated, adding to the getSuggestions() function.
Adding Keyboard Operability
WAI-ARIA best practices defines all recommended suggestion box keyboard functionality, listed below. In our example, only the required keyboard events are included.
Suggestion Box Keyboard Interaction
When focus is in the textbox:
- Down Arrow: If the popup is available, moves focus into the popup:
- If the autocomplete behaviour automatically selected a suggestion before Down Arrow was pressed, focus is placed on the suggestion following the automatically selected suggestion.
- Otherwise, places focus on the first focusable element in the popup.
- Up Arrow (Optional): If the popup is available, places focus on the last focusable element in the popup.
- Esc: Dismisses the popup if it is visible. Optionally, clears the textbox.
- Enter: If an autocomplete suggestion is automatically selected, accepts the suggestion either by placing the input cursor at the end of the accepted value in the textbox or by performing a default action on the value. For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the textbox so the user can add another recipient.
- Printable Characters: Type characters in the textbox. Note that some implementations may regard certain characters as invalid and prevent their input.
- Standard single line text editing keys appropriate for the device platform (see note below).
- Alt+Down Arrow (Optional): If the popup is available but not displayed, displays the popup without moving focus.
- Alt+Up Arrow (Optional): If the popup is displayed:
- If the popup contains focus, returns focus to the textbox.
- Closes the popup.
Note: Standard single line text editing keys appropriate for the device platform:
- include keys for input, cursor movement, selection, and text manipulation.
- Standard key assignments for editing functions depend on the device operating system.
- The most robust approach for providing text editing functions is to rely on browsers, which supply them for HTML inputs with type text and for elements with the
contenteditableHTML attribute. - IMPORTANT: Be sure that JavaScript does not interfere with browser-provided text editing functions by capturing key events for the keys used to perform them.
The most significant effort in making the suggestion box accessible is adding keyboard operability. In our case, we’ll add Up and Down Arrow operability to the list box. Create a switch that captures the keypress event. If it’s a Down Arrow, select the next item down in the list. If it’s an Up Arrow, select the previous item. If it’s any character key, enter the value in the text field. Add this to the onKeyUp() function, while integrating the existing functionality in the function into the default for the switch statement.
Accessible Suggestion Box in Action
Watch the following video to see how ChromeVox interacts with a suggestion box. When the suggestion box receives focus, instructions are read. When the second letter is typed into the text field a list of suggestions appears below. Additional instructions are provided on how to make a selection from the list. Arrow keys are used to navigate through the suggestions, and the Enter key is used to select one of them. Aim to have the suggestion box you update in Activity 5 on the following page operate and announce like the one in the video.
Video: Accessible Suggest Box
