ARIA: switch ロール

ARIA のスイッチ (switch) ロールは、チェックボックス (checkbox) ロールと機能的に同じですが、かなり一般的な意味を持つ「チェックされた」状態と「チェックされていない」状態を表す代わりに、スイッチ (switch) ロールは「オン」と「オフ」の状態を表す点が異なります。

この例では、ウィジェットを作成し、それに ARIA のスイッチ (switch) ロールを割り当てています。

html

<button
  type="button"
  role="switch"
  aria-checked="true"
  id="speakerPower"
  class="switch">
  <span>オフ</span>
  <span>オン</span>
</button>
<label for="speakerPower" class="switch">スピーカー出力</label>

説明

ARIA のスイッチ (switch) ロールは、チェックボックス (checkbox) ロールと同じですが、「チェックされた」や「チェックされていない」ではなく、「オン」と「オフ」のどちらかになります。チェックボックス (checkbox) ロールと同様に、aria-checked 属性が必須です。可能な値は true と false の 2 つです。 <checkbox> やチェックボックスロール (role="checkbox") とは異なり、不確定な状態 (indeterminate) や混在した状態 (mixed) はありません。スイッチ (switch) ロールは、aria-checked 属性に mixed という値をサポートしていません。スイッチ (switch) に mixed という値を割り当てると、代わりに値が false に設定されます。

支援技術では、スイッチのオン/オフの概念を反映するために、スイッチ (switch) ウィジェットを特別な表現で表すことを選択できます。

スイッチはインタラクティブなコントロールなので、フォーカス可能でキーボードによりアクセス可能でなければなりません。このロールがフォーカス可能でない要素に適用されている場合は、tabindex 属性を使用してこれを変更してください。スイッチの値を切り替えるために期待されるキーボードショートカットはスペースキーです。開発者は、スイッチがトグルされたときに、aria-checked 属性の値を動的に変更する必要があります。

必要な JavaScript 機能

click イベントのハンドラー: ユーザーがスイッチウィジェットをクリックすると、click イベントが発生します。これは、ウィジェットの状態を変更するために処理する必要があります。
aria-checked 属性の変更: スイッチウィジェットで click イベントが発生した場合、ハンドラーは aria-checked 属性の値を true から false やその逆に変更する必要があります。

ユーザーエージェントと支援技術への影響

スイッチ (switch) ロールが要素に追加されると、ユーザーエージェントは次のようにそれを処理します。

その要素は、スイッチ (switch) ロールを持つものとして、システムのアクセシビリティインフラストラクチャに公開されます。
aria-checked 属性の値が変更されると、システムのアクセシビリティ API が使用可能で、それがスイッチ (switch) ロールをサポートしている場合、それを使用してアクセス可能なイベントが発生します。
スイッチ (switch) ロールが適用された要素の子孫である全ての要素には、プレゼンテーション (presentation) ロールが自動的に割り当てられます。これにより、スイッチを構築するために使用された要素が、支援技術によって個別にインタラクションされることを防ぎます。これらの要素内のテキストは、display: none または aria-hidden="true" を使用して明示的に隠されていない限り、ユーザーエージェントに可視のままであり、読み上げやその他の方法でユーザーに届けられる可能性があります。

支援技術では、スイッチ (switch) ロールをサポートしている場合、次のように対応します。

スクリーンリーダーは、要素をスイッチとしてアナウンスし、任意でスイッチをアクティブ化する方法についての指示を提供するべきです。

メモ: 支援技術がこのロールをどのように扱うべきかについては、さまざまな意見があります。上記は推奨される実践方法の 1 つであり、他の情報源とは異なる場合があります。

例

次の例は、スイッチ (switch) ロールを適用して使用する方法を理解するのに役立ちます。

ARIA でのスイッチロールの追加

この単純な例では、ウィジェットを作成して、ARIA のスイッチ (switch) ロールを割り当てています。このボタンは、電源スイッチのオン/オフを連想させるような外観でスタイリングされています。

HTML

ここでの HTML はかなり単純です。スイッチは <button> 要素として実装され、aria-checked 属性が "true" に設定されているため、最初はチェックされています。スイッチには、「off」と「on」のラベルを含む 2 つの子要素があり、その後にスイッチを識別する <label> が続きます。

html

<button role="switch" aria-checked="true" id="speakerPower" class="switch">
  <span>off</span>
  <span>on</span>
</button>
<label for="speakerPower" class="switch">Speaker power</label>

JavaScript

この JavaScript コードは、スイッチウィジェットの click イベントを処理する関数を定義して適用します。この関数は、aria-checked 属性を true から false やその逆に変更します。

document.querySelectorAll(".switch").forEach(function (theSwitch) {
  theSwitch.addEventListener("click", handleClickEvent, false);
});

function handleClickEvent(evt) {
  let el = evt.target;

  if (el.getAttribute("aria-checked") == "true") {
    el.setAttribute("aria-checked", "false");
  } else {
    el.setAttribute("aria-checked", "true");
  }
}

CSS

CSS の目的は、電源スイッチのパラダイムを連想させるスイッチのルックアンドフィールを確立することです。

css

button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  font:
    12px "Open Sans",
    "Arial",
    serif;
}

button.switch span {
  padding: 0 4px;
  pointer-events: none;
}

[role="switch"][aria-checked="false"] :first-child,
[role="switch"][aria-checked="true"] :last-child {
  background: #262;
  color: #eef;
}

[role="switch"][aria-checked="false"] :last-child,
[role="switch"][aria-checked="true"] :first-child {
  color: #bbd;
}

label.switch {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
  line-height: 20px;
  user-select: none;
  vertical-align: middle;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

最も興味深いのは、おそらく属性セレクターと :first-child と :last-child の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるという面倒な作業を全て行うことです。

結果

結果は次のようになります。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA) # switch
ARIA in HTML # index-aria-switch