4. Interactive WAI-ARIA (Basic)

Toggle Buttons (Activity Example)

The remainder of the instruction here is hands-on. You’ll be 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.

Activity Element: Following the short introduction to the widget above, a list of the WAI-ARIA roles, states, and properties used with the widget are listed.

Roles, states, and properties for toggle buttons

  • role=”button”
  • tabindex=”0″
  • aria-label=”[button name]”
  • aria-pressed=”[true|false]”

Activity Element: Where available, a Suggested Reading is included that provides additional information about accessibility features for the widget being discussed, often linking to the W3C WAI-ARIA 1.1 Authoring Practice documentation, or to a similar resource. These readings are optional but recommended.
Suggested Reading: Read more about buttons in the ARIA Authoring Practices Guide.

Activity Element: Each widget will have an inaccessible JSFiddle version provided, like the one below. You can examine the JavaScript and HTML to observe how the widget was created. 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 the inaccessible version provided in the activity file accessible.

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. Test the buttons present 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” and 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

Key Point: The code that appears under the JavaScript tab is not exactly as it appears in the activity files. The $(document.ready{}) function at the top is copied from the associated HTML file for the widget, and the contents of ik_util.js have been appended, so the widget will function in JSFiddle. You will not need to include these in the JavaScript file from the activity files that you will be editing for each widget.
Activity Element: Following the JSFiddle will be a collection of code snippets hosted in PasteBin. These code snippets can be applied to the code presented in the JSFiddle and applied to the code in the activity files, which you will be submitting for marking.

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.

Adding Keyboard Operability

Keyboard access for the buttons is fairly simple, with no special key press events needing to be defined.

Activity Element: When the ARIA Authoring Practices Guide has a set of recommended keyboard interactions, they will be reproduced here. Widgets will typically follow the recommended practice, though in some cases keyboard interaction may vary.

Keyboard Interaction for Toggle Buttons

When the button has focus:

  • Space: Activates the button.
  • Enter: Activates the button.
  • Following button activation, focus is set depending on the type of action the button performs. For example:
    • If activating the button opens a dialog, the focus moves inside the dialog (see dialog pattern).
    • If activating the button closes a dialog, focus typically returns to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element. For example, activating a cancel button in a dialog returns focus to the button that opened the dialog. However, if the dialog were confirming the action of deleting the page from which it was opened, the focus would logically move to a new context.
    • If activating the button does not dismiss the current context, then focus typically remains on the button after activation, e.g., an Apply or Recalculate button.
    • If the button action indicates a context change, such as move to next step in a wizard or add another search criteria, then it is often appropriate to move focus to the starting point for that action.
    • If the button is activated with a shortcut key, the focus usually remains in the context from which the shortcut key was activated. For example, if Alt + U were assigned to an “Up” button that moves the currently focused item in a list one position higher in the list, pressing Alt + U when the focus is in the list would not move the focus from the list.

Source: W3C ARIA Authoring Practices Guide

Activity Element: Though this widget requires no keyboard interaction beyond that provided in ik_utils.js to handle space bar and Enter keys, other widgets will have a custom function provided here that defines possible keyboard interactions for those widgets. In most cases, that code can be copied as is into the widget’s JavaScript file.

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.

Accessible Toggle Buttons in Action

Activity Element: Each widget will have a short video of it interacting with ChromeVox. When completing the activities, aim to have your activity submission function as presented in the video.

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).

Video: Accessible Toggle Buttons


Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

Web Accessibility for Developers by The Chang School, Toronto Metropolitan University is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book