Button Examples (IDL Version)

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

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 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 is coded using syntax that was not introduced until version 1.2 of the ARIA specification. When using a browser that does not yet provide support for ARIA attribute reflection, the buttons will not be styled correctly.

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

CSS: button.css
Javascript: button_idl.js

HTML Source Code

<p class="advisement">
  <strong>
    IMPORTANT:
  </strong>
  This example is coded using syntax that was not introduced until version 1.2 of the ARIA specification.
  When using a
  <a href="https://github.com/w3c/aria-practices/issues/1692" target="_blank">
    browser that does not yet provide support for ARIA attribute reflection
  </a>
  , the buttons will not be styled correctly.
</p>
<p>
  This
  <q>
    Print
  </q>
  action button uses a
  <code>
    div
  </code>
  element.
</p>
<div tabindex="0" id="action">
  Print Page
</div>
<p>
  This
  <q>
    Mute
  </q>
  toggle button uses an
  <code>
    a
  </code>
  element.
</p>
<a tabindex="0" id="toggle">
  Mute
  <svg aria-hidden="true" focusable="false">
    <use xlink:href="#icon-sound"></use>
  </svg>
</a>