From a3790a606c63a83d8316d4938b8137ae4e7f0990 Mon Sep 17 00:00:00 2001 From: Wind1808 <42607060+Wind1808@users.noreply.github.com> Date: Tue, 13 Jul 2021 02:12:55 +0900 Subject: ARIA: switch ロールの更新 (#1507) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../aria/roles/switch_role/index.html | 100 +++++++++++---------- 1 file changed, 53 insertions(+), 47 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/accessibility/aria/roles/switch_role/index.html b/files/ja/web/accessibility/aria/roles/switch_role/index.html index ea926c66ec..165bbb4f37 100644 --- a/files/ja/web/accessibility/aria/roles/switch_role/index.html +++ b/files/ja/web/accessibility/aria/roles/switch_role/index.html @@ -7,76 +7,74 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/Switch_role --- -

\{{ariaref}}

+

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

-

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

+

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

-

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

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

+

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 属性の値を動的に変更する必要があります。

+

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

-

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

+

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

aria-checked 属性
-
aria-checked 属性は、switch ロールを使用する場合に必要です。 これは、switch ロールが適用されているウィジェットの現在の状態を表すためです。 true の値は「オン」状態を表します。 false の値は「オフ」状態を表します。 mixed の値は switch ロールでサポートされておらず、false として扱われます。 デフォルト値は false です。
+
aria-checked 属性は、スイッチ (switch) ロールを使用する場合に必須です。 これは、スイッチ (switch) ロールが適用されているウィジェットの現在の状態を表すためです。 true の値は「オン」状態を表し、false の値は「オフ」状態を表します。 mixed の値はスイッチロールでサポートされておらず、false として扱われます。 デフォルト値は false です。 (訳注: ARIA in HTML によると、input type=checkbox 要素では、この属性を使用するべきではなく、checked 属性が使用できるそうです。)
aria-readonly 属性
-
aria-readonly 属性は、switch ロールでサポートされています。 ウィジェットの状態がユーザーによって編集可能かどうかを示します。 false の値は、ユーザーがウィジェットの状態を変更できることを意味します。 true の値は、ユーザーがウィジェットの状態を変更できないことを意味します。 デフォルト値は false です。
+
aria-readonly 属性は、スイッチ (switch) ロールでサポートされています。 これは、ウィジェットの状態がユーザーによって編集可能かどうかを示します。 false の値は、ユーザーがウィジェットの状態を変更できることを意味し、true の値は、ユーザーがウィジェットの状態を変更できないことを意味します。 デフォルト値は false です。 (訳注: ARIA in HTML によると、この属性は、readonly 属性や contenteditable 属性が使用できる要素と組み合わせる場合は注意が必要だそうです。)
-

必要な JavaScript 機能

+

必要な JavaScript 機能

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

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

+

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

-

switch ロールが要素に追加されると、{{Glossary("user agent","ユーザーエージェント")}}は次のようにそれを処理します。

+

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

-

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

+

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

-

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

+

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

-

例

+

例

-

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

+

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

-

ARIA で switch ロールを追加する

+

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

-

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

+

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

-

HTML

+

HTML

-

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

+

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

<button role="switch" aria-checked="true"
       id="speakerPower" class="switch">
@@ -86,7 +84,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Switch_role
 <label for="speakerPower" class="switch">Speaker power</label>
-

JavaScript

+

JavaScript

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

@@ -104,14 +102,14 @@ function handleClickEvent(evt) { } } -

CSS

+

CSS

-

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

+

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

button.switch {
   margin: 0;
   padding: 0;
-  width: 60px;
+  width: 70px;
   height: 26px;
   border: 2px solid black;
   display: inline-block;
@@ -123,7 +121,9 @@ function handleClickEvent(evt) {
 }
 
 button.switch span {
-  padding: 0 4px;}
+  padding: 0 4px;
+  pointer-events: none;
+}
 
 [role="switch"][aria-checked="false"] :first-child,
 [role="switch"][aria-checked="true"] :last-child {
@@ -147,15 +147,15 @@ label.switch {
   -o-user-select: none;
 }
-

最も興味深いのは、おそらく属性セレクタと {{cssxref(":first-child")}} と {{cssxref(":last-child")}} の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるということです。

+

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

-

結果

+

結果

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

{{EmbedLiveSample("Adding_the_switch_role_in_ARIA", 600, 40)}}

-

仕様

+

仕様

@@ -169,19 +169,25 @@ label.switch { - + - +
{{SpecName('ARIA', '#switch')}} {{Spec2('ARIA')}}一般的に ARIA をすべてのロール、プロパティなどとともに定義します。ARIA 全般を全てのロール、プロパティなどとともに定義します。
{{SpecName('ARIA in HTML', '#index-aria-switch')}} {{Spec2('ARIA in HTML')}}ARIA の機能を HTML に統合する方法について説明します。ARIA の機能がどのように HTML に統合されているかを説明します。
-

関連情報

+

関連情報

+ + -- cgit v1.2.3-54-g00ecf