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
の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるということです。
結果
結果は次のようになります。
仕様
仕様 | 状態 | コメント |
---|---|---|
Accessible Rich Internet Applications (WAI-ARIA) 1.1 | 勧告 | 一般的に ARIA をすべてのロール、プロパティなどとともに定義します。 |
ARIA in HTML | 草案 | ARIA の機能を HTML に統合する方法について説明します。 |