ボタンの例（ IDL バージョン）

この例について

以下のボタンパターンの例は、ARIA 属性をコーディングするための新しい JavaScript 構文のデモンストレーションです。

このページの例のボタンに対する JavaScript は、ARIA 1.2で定義された IDL インターフェイスを使用しています。これらの例の目的は、ARIA 属性リフレクションの使用方法を示し、ブラウザと支援技術の相互運用性のテストケースを提供することです。具体的には、role 及び ariaPressed 属性は、setAttribute() 及び getAttribute() の代わりにドット表記法を使用してアクセスされます。その他の点では、これらの例はボタンの例と同一です。

例

重要

この例は、ARIA 仕様のバージョン 1.2 まで導入されなかった構文を使用してコーディングされています。 ARIA 属性リフレクションに対応していないブラウザを使用する場合、ボタンは正しくスタイル設定されません。

この印刷アクションボタンは div 要素を使用しています。

ページを印刷

このミュートトグルボタンは a 要素を使用しています。

ミュート

キーボードサポート

キー	機能
`Enter`	ボタンを作動させる。
`Space`	ボタンを作動させる。

ロール、プロパティ、ステート、及び tabindex 属性

ロール	属性	要素	使用法
`button`		`div`, `a`	JavaScriptで `element.role = 'button';` と設定します。この設定は、要素を `button` ウィジェットとして識別します。ボタンのアクセシブル名は、要素のテキストコンテンツによって定義されます。
	`tabindex="0"`	`div`, `a`	要素をタブの順序に含めます。 `href` 属性を持たない `a` 要素に必要です。
	`aria-pressed="false"`	`a`	JavaScript で `button.ariaPressed = 'false';` と設定します。この設定は、ボタンをトグルボタンとして識別します。トグルボタンが押されていないことを示します。
	`aria-pressed="true"`	`a`	JavaScript で`button.ariaPressed = 'true';` と設定します。この設定は、ボタンをトグルボタンとして識別します。トグルボタンが押されていることを示します。
	`aria-hidden="true"`	`svg`	ボタンのアクセシブルな名前の計算から SVG を除外します。

JavaScript 及び CSSのソースコード

CSS: button.css
Javascript: button_idl.js

HTML ソースコード

<div class="advisement">
  <h3>
    重要
  </h3>
  <p>
    この例は、ARIA 仕様のバージョン 1.2 まで導入されなかった構文を使用してコーディングされています。
    <a href="https://github.com/w3c/aria-practices/issues/1692" target="_blank">
      ARIA 属性リフレクションに対応していないブラウザ
    </a>
    を使用する場合、ボタンは正しくスタイル設定されません。
  </p>
</div>
<p>
  この
  <q>
    印刷
  </q>
  アクションボタンは
  <code>
    div
  </code>
  要素を使用しています。
</p>
<div tabindex="0" id="action">
  ページを印刷
</div>
<p>
  この
  <q>
    ミュート
  </q>
  トグルボタンは
  <code>
    a
  </code>
  要素を使用しています。
</p>
<a tabindex="0" id="toggle">
  ミュート
  <svg aria-hidden="true" focusable="false">
    <use xlink:href="#icon-sound"></use>
  </svg>
</a>