ボタン パターン

このパターンについて

ボタン は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などの利用者のアクションやイベントのトリガを可能にするウィジェットです。 ボタンがダイアログを起動することを利用者に知らせるための一般的な方法は、ボタンラベルに "…"（省略記号）を付加することです。例： "名前を付けて保存…"

通常のボタンウィジェットに加えて、WAI-ARIA は2種類のボタンをサポートしています：

• トグルボタン：オフ（押されていない状態）とオン（押された状態）の2つの状態を持つボタン。 ボタンがトグルボタンであることを支援技術に伝えるには、aria-pressed 属性に値を指定します。 例えば、オーディオプレーヤーのミュートというラベルのボタンは、押された状態を true に設定することで、音がミュートされていることを示すことができます。 重要：トグルボタンのラベルは、その状態が変化しても変化しないことが重要です。 この例では、押された状態が true のとき、ラベルは "ミュート" のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています" のように言うでしょう。 そうではなく、ボタンのラベルが "ミュート" から "ミュート解除" に変わるようなデザインであれば、aria-pressed 属性は必要ありません。
• メニューボタン： メニューボタン パターン で説明されているように、ボタンが支援技術にメニューボタンとして認識されるためには、aria-haspopup プロパティが menu 又は true に設定されている必要があります。

例

• ボタンの例 ：クリック可能なHTMLの div 要素及び span 要素を使って、アクセシブルなコマンドボタン及びトグルボタンを作った例。
• ボタンの例（IDL） ：クリック可能なHTMLの div 要素及び span 要素を使って、アクセシブルなコマンド及びトグルボタンを作った例。 この例では IDLインターフェイス を用いています。

キーボード操作

ボタンにフォーカスがある場合：

• Space ：ボタンをアクティブにします。
• Enter ：ボタンをアクティブにします。
• ボタンをアクティブにした後、フォーカスの設定はボタンが実行するアクションの種類によって異なります。例えば：
  • ボタンを押すとダイアログが開く場合、フォーカスはダイアログ内に移動します。 （ ダイアログ パターン を参照）
  • ボタンを押すとダイアログが閉じる場合、ダイアログのコンテキストで実行された機能が論理的に別の要素につながらない限り、フォーカスは通常、ダイアログを開いたボタンに戻ります。 例えば、ダイアログのキャンセルボタンを押すと、フォーカスはダイアログを開いたボタンに戻ります。 しかし、ダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。
  • ボタンを押しても現在のコンテキストがなくならない場合、フォーカスは通常、押した後もボタン上に残ります（例：適用ボタン又は再計算ボタン）。
  • もしボタンのアクションが、ウィザードで次のステップに進む、または別の検索条件を追加するなどのコンテキスト変更を示している場合、そのアクションの開始点にフォーカスを移動することが適切です。
  • ボタンがショートカットキーで起動された場合、フォーカスは通常、ショートカットキーが起動されたコンテキストに残ります。 例えば、Alt + U がリストの現在フォーカスのある項目を1つ上の位置に移動させる "Up" ボタンに割り当てられている場合、フォーカスがリストにあるときに Alt + U を押しても、フォーカスはリストから移動しません。

WAI-ARIAの役割、状態、およびプロパティ

• ボタンは button の役割を持っています。
• button はアクセシブルなラベルを持ちます。 デフォルトでは、アクセシブルな名前はボタン要素内のテキストから計算されます。 しかし、aria-labelledby 又は aria-label で指定することもできます。
• ボタンの機能に関する説明がある場合、ボタン要素の aria-describedby には、説明を含む要素のIDが設定されます。
• ボタンに関連するアクションが利用できない場合、ボタンは aria-disabled に true が設定されます。
• ボタンがトグルボタンの場合、ボタンは aria-pressed の状態を持ちます。 ボタンがオンに切り替えられると、この状態の値は true になり、オフに切り替えられると、この状態の値は false になります。