ボタンの例（ 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のソースコード

HTML ソースコード