Widget: Button

Example

Standard Button Element

An HTML button element satisfies accessibility requirements, so use one if you can. If for some reason you can't, though, use this widget to ensure that your button adheres to screen reader standards, responds appropriately to keyboard commands and acts like a standard button element.

Primary

Non-button Element with Button Role

Secondary

Non-button Element with Button Role

Toggle Button

There are also two special kinds of button roles specified by ARIA. The first is a toggle button, which toggles some state on and off when pressed. Use the aria-pressed attribute to specify the current state, and do not change the label of the button when it toggles.

Toggle (nonstandard)

Submenu Button

The other type of button is a menu button. See the menu example for a button with the aria-haspopup attribute.

Details

Implementing This Widget

Implementing the Button widget (either the Standard, Toggle, or Submenu button) is done when you are not able use an HTML button element to satisfy accessibility requirements.

Prerequisites:

Before you begin, you must first have the function you want executed when the button is activated in order to implement either of the button widgets.

To implement the Standard Button widget:

  • Call deque.button.initializeButton with:
    1. the element you want to behave like a button
    2. a function you want executed when the button is activated

Note: If your element is a button, this simply wires it up to the handler - but if it's a non-button element, role="button"is set and bindings are created for space bar and enter key activation in addition to click.

To implement the Toggle Button widget:

  • Call deque.button.initializeToggleButtonwith both of the following:
    1. the element you want to behave like a button
    2. the function you want executed when the button is activated

    Note: The difference is that in this case your function must return either true or false, because its return value determines the value of aria-pressed on the button element.

Expected Operation and Accessibility Features

There are three subtypes of button (Standard, Toggle, and Submenu), so the javascript provides three different functions depending on the type of button you want. The standard button responds appropriately to keyboard commands and acts like an HTML button element. The toggle button switches between two states when pressed, but the label of the button remains the same regardless of state. The submenu button functions as a popup menu to display menu items.

Validation and Developer Notes

In order to validate this widget, your button must adhere to screen reader standards and respond appropriately to keyboard commands. For example, pressing the Enter key activates or toggles the button.

Notes for the Developer:

An HTML button element satisfies accessibility requirements, so use one if you can.

Example Implementation Reference

To view an implementation of these widgets, see Button widget examples.

To view an implementation of the Submenu button, see the Menu widget example, which shows a button with the aria-haspopup attribute.