ARIA: switch ロール

{{ariaref}}

ARIA の switch ロールは、checkbox ロールと機能的に同じですが、"checked" と "unchecked" の状態を表す代わりに、その意味ではかなり一般的なもので、switch ロールは、「オン」と「オフ」の状態を表します。

この例では、ウィジェットを作成し、ARIA の switch ロールを割り当てます。

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

説明

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

支援技術は、オン/オフスイッチの概念を反映するために、スイッチウィジェットを専門化したプレゼンテーションで表現することを選択することができます。

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

関連する ARIA のロール、ステート、プロパティ

aria-checked 属性

aria-checked 属性は、switch ロールを使用する場合に必要です。 これは、switch ロールが適用されているウィジェットの現在の状態を表すためです。 true の値は「オン」状態を表します。 false の値は「オフ」状態を表します。 mixed の値は switch ロールでサポートされておらず、false として扱われます。 デフォルト値は false です。

aria-readonly 属性

aria-readonly 属性は、switch ロールでサポートされています。 ウィジェットの状態がユーザーによって編集可能かどうかを示します。 false の値は、ユーザーがウィジェットの状態を変更できることを意味します。 true の値は、ユーザーがウィジェットの状態を変更できないことを意味します。 デフォルト値は false です。

必要な JavaScript 機能

click イベントのハンドラ

ユーザーがスイッチウィジェットをクリックすると、click イベントが発生します。 これは、ウィジェットの状態を変更するために処理する必要があります。

aria-checked 属性の変更

スイッチウィジェットで click イベントが発生した場合、ハンドラは aria-checked 属性の値を true から false やその逆に変更する必要があります。

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

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

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

支援技術は、switch ロールをサポートしている場合は、次のように応えます。

• スクリーンリーダーは、要素をスイッチとしてアナウンスする必要があります。 オプションでスイッチをアクティブにする方法についての指示を提供します。

例

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

ARIA で switch ロールを追加する

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

HTML

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

<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 の目的は、電源スイッチのパラダイムを思い起こさせるスイッチのルックアンドフィールを確立することです。

button.switch {
  margin: 0;
  padding: 0;
  width: 60px;
  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;}

[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 の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるということです。

結果

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

仕様

関連情報

• ARIA: checkbox ロール
• <input type="checkbox">