ボタンロールの使用

ボタンロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。role="button" だけで、どんな要素 (例えば <p>、<span> や <div>) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るために aria-pressed と組み合わせて使うことが出来ます。

ボタンはインタラクティブなコントールでなのでフォーカス可能です。もし button ロールがそれ自身ではフォーカス可能でない要素 (<span>、<div> もしくは <p> のような) に追加されたら、tabindex 属性がフォーカス可能なボタンを作るために使用されなければなりません。

ボタンはマウスユーザーとキーボードユーザーの両方が操作できます。ネイティブ HTML <button> 要素では、ボタンの onclick イベントはマウスクリックとフォーカスされている間に Space もしくは Enter が押されたときに発火します。しかし他のタグがカスタムボタンを作成するために使用されていたら、role="button" が使われていたとしても onclick イベントはマウスカーソルにクリックされたときにだけに発火するでしょう。このため、開発者は Space もしくは Enter キーが押されたときにトリガーされるために別のキーイベントハンドラを要素に追加しなければなりません。

警告: リンクをボタンロールによりマークアップする際は注意してください。ボタンは Space もしくは Enter キーを使ってトリガーされることが期待されますが、リンクは Enter キーが期待されます。 言い換えれば、リンクがボタンのように振る舞うようときは、role="button" が追加されるだけでは不十分です。ネイティブのボタンと矛盾しないために、Space キーをリッスンするキーイベントハンドラを追加する必要があります。

role="button" を使う利点は、トグルボタンの作成が許可されていることです。トグルボタンには、押された状態と押されていない状態の2つの状態があります。ボタンがトグルボタンであるかどうかは、 button ロールに加えて aria-pressed 属性で指定することができます。

• aria-pressed が使用されていない場合、ボタンはトグルボタンではありません。
• aria-pressed="false" が使用されている場合、ボタンは現在押されていないトグルボタンです。
• aria-pressed="true" が使用されている場合、ボタンは現在押されているトグルボタンです。
• aria-pressed="mixed" が使用されている場合、ボタンは部分的に押したとみなされます。

ボタンには常にアクセシブルな名前があるべきです。多くのボタンでは、この名前はボタンの中にあるテキストと同じです。場合によっては、例えばアイコンボタンでは、アクセシブルな名前は aria-label または aria-labelledby 属性を通して提供することができます。

button ロールが使用されているとき、ユーザーエージェントはその要素をオペレーティングシステムのアクセシビリティAPIにおけるボタンコントロールとして公開すべきです。スクリーンリーダーはその要素をボタンとして通知し、そのアクセシブルな名前を言述すべきです。音声認識ソフトウェアは「クリック」に続けてボタンのアクセシブルな名前を発声することでボタンを有効にすべきです。

以下のスニペットでは、 span 要素に button ロールが与えられています。 <span> 要素が使用されているため、ボタンをフォーカス可能にし、タブナビゲーション順の一部にするために tabindex 属性が必要です。このスニペットは、 <span> 要素をボタンのように見せるための CSS スタイルが提供され、 handleBtnClick と handleBtnKeyPress は、クリックされたときや Space  もしくは Enter  キーが押されたときにボタンのアクションを実行するイベントハンドラであることを示しています。

<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>

このスニペットでは <span> 要素が button ロールと aria-pressed 属性によってトグルボタンに変更されています。ボタンが作動したとき、 aria-pressed の値を true と false で切り替え続けます。

HTML

<button type="button" aria-pressed="false" onclick="handleBtnClick(event)">
  Native button toggle
</button>

<span role="button" tabindex="0"
 aria-pressed="false" onclick="handleBtnClick(event)"
 onKeyPress="handleBtnKeyPress(event)">
  Span button toggle
</span>

CSS

button,
[role="button"] {
    padding: 3px;
    border: 1px solid #CCC;
}

button:active,
button:focus,
[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
}

JavaScript

function handleBtnClick(event) {
  toggleButton(event.target);
}

function handleBtnKeyPress(event) {
  // スペースかエンターが押されているかを確認
  if (event.key === " " || event.key === "Enter") {
    // スペースが押されたときにスクロールさせないためにデフォルトの振る舞いをキャンセル
    event.preventDefault();
    toggleButton(event.target);
  }
}

function toggleButton(element) {
  // ボタンが押されているかを確認
  var pressed = (element.getAttribute("aria-pressed") === "true");
  // aria-pressed をの状態を反転
  element.setAttribute("aria-pressed", !pressed);
}

• button
• aria-pressed

• Strong native semantics in HTML5
• Notes on Using ARIA in HTML