The remainder of the course is hands-on, taking inaccessible widgets, like the example of toggle buttons described here, and making them accessible by adding appropriate WAI-ARIA and keyboard operability. The toggle buttons widget demonstrated here is provided as an example for the ten widgets you will be working on over the next three units, describing the Activity Elements you will find in each exercise.
Roles, states, and properties for toggle buttons
Activity Element: Each widget will have an inaccessible JSFiddle version provided, like that below. You can examine the JavaScript and HTML to observe how the widget was created, and under the Result tab, view and try out the widget to see how it functions. CSS is also provided, though you will not be working with CSS as part of the activities. In the JSFiddle here, the accessibility elements are included but commented out so you can see how the code snippets below have been applied. In the activities that follow the accessibility elements will not be present. Your task will be to apply the code snippets yourself to make accessible the inaccessible version provided in the course file.
At the top right, you may choose to "Edit in JSFiddle" and test the code snippets that will be provided below, to understand how they add accessibility to the widget. You can start by uncommenting the accessibility elements for the toggle buttons, and testing the resulting version with ChromeVox.
The following JSFiddle presents a typical toggle button. Review the JavaScript and HTML markup, and test the buttons presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added (if it functions at all). 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 toggle buttons, before completing the Activity on the page that follows (there is no activity that follows in this example case). Skip JSFiddle
Add a tabindex
to each button to make them keyboard focusable, define the role="button"
and add a label with aria-label="[button name]"
and set the default state to “not pressed” with aria-pressed="false"
.
Add in equivalent keyboard access where mouse access is provided, referencing the onActivate()
function, described below, with jQuery .on('keydown')
.
Set aria-pressed = "[true | false]"
for buttons when activated or deactivated to announce the button’s state to screen readers.
Keyboard access for the buttons is fairly simple, with no special key press events needing to be defined.
When the button has focus:
Source: W3C WAI-ARIA 1.1 Authoring Practices
No added keyboard interaction is required for the toggle buttons beyond the standard space bar and Enter key defined in the ik_utils.js file. Reference to these key events is added to the onActivate()
function.
The buttons are accessed initially with the Tab key, and the Tab key is used to move between buttons. The space bar or Enter keys are used to activate and deactivate buttons. Aim to have the widget you edit in the associated activity function like that presented in the video (there is no associated activity for this example).
A suggestion box (aka combo box, 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
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.Skip JSFiddle
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 instruction for it by adding the notify()
function to the onFocus()
function to produce a live region with the instruction text, that reads automatically when a screen reader encounters 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.
WAI-ARIA best practices defines all recommended suggestion box keyboard functionality, listed below. In our example, only the required keyboard events are included.
When focus is in the textbox:
contenteditable
HTML attribute.Source: W3C WAI-ARIA 1.1 Best Practices
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.
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.