Button Examples (IDL Version)

The following examples of the button design pattern demonstrate a new JavaScript syntax for coding ARIA attributes.

The JavaScript for the example buttons on this page uses the IDL Interface defined in ARIA 1.2. The purpose of these examples is to illustrate how to use IDL for ARIA Attribute Reflection and provide a test case for browser and assistive technology interoperability. Specifically, the role and ariaPressed attributes are accessed using dot notation instead of setAttribute() and getAttribute(). In all other respects, these examples are identical to the Button Examples.

Example

IMPORTANT: This example uses features of the draft ARIA 1.2 specification. As a draft specification, it is subject to change. Support provided by browsers or assistive technologies is experimental.

This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

Mute

Keyboard Support

Key Function
Enter Activates the button.
Space Activates the button.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
button div, a
  • Set in javascript with element.role = 'button';.
  • Identifies the element as a button widget.
  • Accessible name for the button is defined by the text content of the element.
tabindex="0" div, a
  • Includes the element in the tab sequence.
  • Needed on the a element because it does not have a href attribute.
aria-pressed="false" a
  • Set in javascript with button.ariaPressed = 'false';.
  • Identifies the button as a toggle button.
  • Indicates the toggle button is not pressed.
aria-pressed="true" a
  • Set in javascript with button.ariaPressed = 'true';.
  • Identifies the button as a toggle button.
  • Indicates the toggle button is pressed.
aria-hidden="true" svg Excludes SVG from accessible name calculation for the button.

Javascript and CSS Source Code

HTML Source Code