ARIA: switch ロールの更新 (#1507)

1 files changed, 53 insertions, 47 deletions

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
 ---
-<p>\{{ariaref}}</p>
+<p><span class="seoSummary">ARIA のスイッチ (<strong><code>switch</code></strong>) ロールは、チェックボックス (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code>) ロールと機能的に同じですが、かなり一般的な意味を持つ「チェックされた」状態と「チェックされていない」状態を表す代わりに、スイッチ (<code>switch</code>) ロールは「オン」と「オフ」の状態を表す点が異なります。</span></p>
 
-<p><span class="seoSummary">ARIA の <code>switch</code> ロールは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code> ロールと機能的に同じですが、"checked" と "unchecked" の状態を表す代わりに、その意味ではかなり一般的なもので、<code>switch</code> ロールは、「オン」と「オフ」の状態を表します。</span></p>
+<p>この例では、ウィジェットを作成し、それに ARIA のスイッチ (<code>switch</code>) ロールを割り当てています。</p>
 
-<p>この例では、ウィジェットを作成し、ARIA の <code>switch</code> ロールを割り当てます。</p>
-
-<pre>&lt;button role="switch" aria-checked="true"
-       id="speakerPower" class="switch"&gt;
-   &lt;span&gt;オフ&lt;/span&gt;
-   &lt;span&gt;オン&lt;/span&gt;
- &lt;/button&gt;
- &lt;label for="speakerPower" class="switch"&gt;スピーカー電源&lt;/label&gt;</pre>
+<pre class="brush: html">&lt;button type="button" role="switch" aria-checked="true"
+    id="speakerPower" class="switch"&gt;
+    &lt;span&gt;オフ&lt;/span&gt;
+    &lt;span&gt;オン&lt;/span&gt;
+&lt;/button&gt;
+&lt;label for="speakerPower" class="switch"&gt;スピーカー出力&lt;/label&gt;</pre>
 
-<h2 id="Description" name="Description">説明</h2>
+<h2 id="Description">説明</h2>
 
-<p>ARIA の <code>switch</code> ロールは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code> ロールと同じですが、"checked" や "unchecked" ではなく、「オン」と「オフ」のどちらかです。 <code>checkbox</code> ロールと同様に、<code>aria-checked</code> 属性が必要です。 可能な2つの値は <code>true</code> と <code>false</code> です。 <code>&lt;checkbox&gt;</code> や <code>role="checkbox"</code> とは異なり、不確定な状態（<code>indeterminate</code>）や混在した状態（<code>mixed</code>）はありません。 <code>switch</code> ロールは、<code>aria-checked</code> 属性に <code>mixed</code> の値をサポートしていません。 <code>switch</code> に <code>mixed</code> の値を割り当てると、代わりに値を <code>false</code> に設定します。</p>
+<p>ARIA のスイッチ (<strong><code>switch</code></strong>) ロールは、チェックボックス (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code>) ロールと同じですが、「チェックされた」や「チェックされていない」ではなく、「オン」と「オフ」のどちらかになります。 チェックボックス (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code>) ロールと同様に、<code>aria-checked</code> 属性が必須です。 可能な値は <code>true</code> と <code>false</code> の2つです。 <code>&lt;checkbox&gt;</code> やチェックボックスロール (<code>role="checkbox"</code>) とは異なり、不確定な状態 (<code>indeterminate</code>) や混在した状態 (<code>mixed</code>) はありません。 スイッチ (<code>switch</code>) ロールは、<code>aria-checked</code> 属性に <code>mixed</code> という値をサポートしていません。 スイッチ (<code>switch</code>) に <code>mixed</code> という値を割り当てると、代わりに値が <code>false</code> に設定されます。</p>
 
-<p>支援技術は、オン/オフスイッチの概念を反映するために、スイッチウィジェットを専門化したプレゼンテーションで表現することを選択することができます。</p>
+<p>支援技術では、スイッチのオン/オフの概念を反映するために、スイッチ (<code>switch</code>) ウィジェットを特別な表現で表すことを選択できます。</p>
 
-<p>スイッチはインタラクティブなコントロールなので、フォーカス可能でキーボードによりアクセス可能でなければなりません。 ロールがフォーカス可能でない要素に適用されている場合は、<code>tabindex</code> 属性を使用してこれを変更します。 スイッチの値を切り替えるために必要なキーボードショートカットは<kbd>スペース</kbd>キーです。 開発者は、スイッチがトグルされたときに、<code>aria-checked</code> 属性の値を動的に変更する必要があります。</p>
+<p>スイッチはインタラクティブなコントロールなので、フォーカス可能でキーボードによりアクセス可能でなければなりません。 このロールがフォーカス可能でない要素に適用されている場合は、<code>tabindex</code> 属性を使用してこれを変更してください。 スイッチの値を切り替えるために期待されるキーボードショートカットは<kbd>スペース</kbd>キーです。 開発者は、スイッチがトグルされたときに、<code>aria-checked</code> 属性の値を動的に変更する必要があります。</p>
 
-<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3>
+<h3 id="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3>
 
 <dl>
  <dt><code>aria-checked</code> 属性</dt>
- <dd><code>aria-checked</code> 属性は、<code>switch</code> ロールを使用する場合に<strong>必要</strong>です。 これは、<code>switch</code> ロールが適用されているウィジェットの現在の状態を表すためです。 <code>true</code> の値は「オン」状態を表します。 <code>false</code> の値は「オフ」状態を表します。 <code>mixed</code> の値は <code>switch</code> ロールでサポートされておらず、<code>false</code> として扱われます。 デフォルト値は <code>false</code> です。</dd>
+ <dd><code>aria-checked</code> 属性は、スイッチ (<code>switch</code>) ロールを使用する場合に<strong>必須</strong>です。 これは、スイッチ (<code>switch</code>) ロールが適用されているウィジェットの現在の状態を表すためです。 <code>true</code> の値は「オン」状態を表し、<code>false</code> の値は「オフ」状態を表します。 <code>mixed</code> の値はスイッチロールでサポートされておらず、<code>false</code> として扱われます。 デフォルト値は <code>false</code> です。 (訳注: ARIA in HTML によると、input type=checkbox 要素では、この属性を使用するべきではなく、checked 属性が使用できるそうです。)</dd>
  <dt><code>aria-readonly</code> 属性</dt>
- <dd><code>aria-readonly</code> 属性は、<code>switch</code> ロールでサポートされています。 ウィジェットの状態がユーザーによって編集可能かどうかを示します。 <code>false</code> の値は、ユーザーがウィジェットの状態を変更できることを意味します。 <code>true</code> の値は、ユーザーがウィジェットの状態を変更できないことを意味します。 デフォルト値は <code>false</code> です。</dd>
+ <dd><code>aria-readonly</code> 属性は、スイッチ (<code>switch</code>) ロールでサポートされています。 これは、ウィジェットの状態がユーザーによって編集可能かどうかを示します。 <code>false</code> の値は、ユーザーがウィジェットの状態を変更<em>できる</em>ことを意味し、<code>true</code> の値は、ユーザーがウィジェットの状態を変更<em>できない</em>ことを意味します。 デフォルト値は <code>false</code> です。 (訳注: ARIA in HTML によると、この属性は、readonly 属性や contenteditable 属性が使用できる要素と組み合わせる場合は注意が必要だそうです。)</dd>
 </dl>
 
-<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>
+<h3 id="Required_JavaScript_features">必要な JavaScript 機能</h3>
 
 <dl>
- <dt><code>click</code> イベントのハンドラ</dt>
- <dd>ユーザーがスイッチウィジェットをクリックすると、<a href="/ja/docs/Web/Reference/Events/click"><code>click</code> イベント</a>が発生します。 これは、ウィジェットの状態を変更するために処理する必要があります。</dd>
+ <dt><code>click</code> イベントのハンドラー</dt>
+ <dd>ユーザーがスイッチウィジェットをクリックすると、<a href="/ja/docs/Web/API/Element/click_event"><code>click</code> イベント</a>が発生します。 これは、ウィジェットの状態を変更するために処理する必要があります。</dd>
  <dt><code>aria-checked</code> 属性の変更</dt>
- <dd>スイッチウィジェットで <code>click</code> イベントが発生した場合、ハンドラは <code>aria-checked</code> 属性の値を <code>true</code> から <code>false</code> やその逆に変更する必要があります。</dd>
+ <dd>スイッチウィジェットで <code>click</code> イベントが発生した場合、ハンドラーは <code>aria-checked</code> 属性の値を <code>true</code> から <code>false</code> やその逆に変更する必要があります。</dd>
 </dl>
 
-<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2>
+<h2 id="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2>
 
-<p><code>switch</code> ロールが要素に追加されると、{{Glossary("user agent","ユーザーエージェント")}}は次のようにそれを処理します。</p>
+<p>スイッチ (<code>switch</code>) ロールが要素に追加されると、{{Glossary("user agent","ユーザーエージェント")}}は次のようにそれを処理します。</p>
 
 <ul>
- <li>要素は、<code>switch</code> ロールを持つものとしてシステムのアクセシビリティインフラストラクチャに公開されます。</li>
- <li><code>aria-checked</code> 属性の値が変更されると、アクセス可能なイベントが使用可能で、<code>switch</code> ロールをサポートしている場合、アクセス可能なイベントがシステムのアクセシビリティ API を使用して起動されます。</li>
- <li>switch ロールが適用された要素の子孫であるすべての要素には、ロールのプレゼンテーションが自動的に割り当てられます。 これにより、スイッチを構築するために使用する要素が、支援技術によって個別に相互作用するのを防ぎます。 これらの要素のテキストは、{{cssxref("display", "display: none")}} または aria-hidden="true" を使用して明示的に隠されていない限り、ユーザーエージェントに表示されたままになり、ユーザーが読んだり、別の方法で届けられる可能性があります。</li>
+ <li>その要素は、スイッチ (<code>switch</code>) ロールを持つものとして、システムのアクセシビリティインフラストラクチャに公開されます。</li>
+ <li><code>aria-checked</code> 属性の値が変更されると、システムのアクセシビリティ API が使用可能で、それがスイッチ (<code>switch</code>) ロールをサポートしている場合、それを使用してアクセス可能なイベントが発生します。</li>
+ <li>スイッチ (<code>switch</code>) ロールが適用された要素の子孫である全ての要素には、プレゼンテーション (<code>presentation</code>) ロールが自動的に割り当てられます。 これにより、スイッチを構築するために使用された要素が、支援技術によって個別にインタラクションされることを防ぎます。 これらの要素内のテキストは、{{cssxref("display", "display: none")}} または <code>aria-hidden="true"</code> を使用して明示的に隠されていない限り、ユーザーエージェントに可視のままであり、読み上げやその他の方法でユーザーに届けられる可能性があります。</li>
 </ul>
 
-<p>支援技術は、<code>switch</code> ロールをサポートしている場合は、次のように応えます。</p>
+<p>支援技術では、スイッチ (<code>switch</code>) ロールをサポートしている場合、次のように対応します。</p>
 
 <ul>
- <li>スクリーンリーダーは、要素をスイッチとしてアナウンスする必要があります。 オプションでスイッチをアクティブにする方法についての指示を提供します。</li>
+ <li>スクリーンリーダーは、要素をスイッチとしてアナウンスし、任意でスイッチをアクティブ化する方法についての指示を提供するべきです。</li>
 </ul>
 
 <div class="note">
-<p>支援技術がこのロールをどのように処理すべきかについて、さまざまな意見があります。 上記は推奨される方法であり、他の情報源とは異なる場合があります。</p>
+<p>支援技術がこのロールをどのように扱うべきかについては、さまざまな意見があります。 上記は推奨される実践方法の1つであり、他の情報源とは異なる場合があります。</p>
 </div>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<p>次の例は、<code>switch</code> ロールを適用して使用する方法を理解するのに役立ちます。</p>
+<p>次の例は、スイッチ (<code>switch</code>) ロールを適用して使用する方法を理解するのに役立ちます。</p>
 
-<h3 id="Adding_the_switch_role_in_ARIA" name="Adding_the_switch_role_in_ARIA">ARIA で switch ロールを追加する</h3>
+<h3 id="Adding_the_switch_role_in_ARIA">ARIA でのスイッチロールの追加</h3>
 
-<p>この単純な例では、ウィジェットを作成して ARIA の <code>switch</code> ロールを割り当てます。 このボタンは、オン/オフの電源スイッチを連想させるような外観になっています。</p>
+<p>この単純な例では、ウィジェットを作成して、ARIA のスイッチ (<code>switch</code>) ロールを割り当てています。 このボタンは、電源スイッチのオン/オフを連想させるような外観でスタイリングされています。</p>
 
-<h4 id="HTML" name="HTML">HTML</h4>
+<h4 id="HTML">HTML</h4>
 
-<p>HTML はここではかなり簡単です。 スイッチは {{HTMLElement("button")}} 要素として実装され、最初に <code>aria-checked</code> 属性が <code>"true"</code> に設定されているかどうかチェックされます。 スイッチには、"off" と "on" のラベルを含む2つの子要素があり、スイッチを識別する {{HTMLElement("label")}} が続きます。</p>
+<p>ここでの HTML はかなり単純です。 スイッチは {{HTMLElement("button")}} 要素として実装され、<code>aria-checked</code> 属性が <code>"true"</code> に設定されているため、最初はチェックされています。 スイッチには、「off」と「on」のラベルを含む2つの子要素があり、その後にスイッチを識別する {{HTMLElement("label")}} が続きます。</p>
 
 <pre class="brush: html">&lt;button role="switch" aria-checked="true"
       id="speakerPower" class="switch"&gt;
@@ -86,7 +84,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Switch_role
 &lt;label for="speakerPower" class="switch"&gt;Speaker power&lt;/label&gt;
 </pre>
 
-<h4 id="JavaScript" name="JavaScript">JavaScript</h4>
+<h4 id="JavaScript">JavaScript</h4>
 
 <p>この JavaScript コードは、スイッチウィジェットの <code>click</code> イベントを処理する関数を定義して適用します。 この関数は、<code>aria-checked</code> 属性を <code>true</code> から <code>false</code> やその逆に変更します。</p>
 
@@ -104,14 +102,14 @@ function handleClickEvent(evt) {
   }
 }</pre>
 
-<h4 id="CSS" name="CSS">CSS</h4>
+<h4 id="CSS">CSS</h4>
 
-<p>CSS の目的は、電源スイッチのパラダイムを思い起こさせるスイッチのルックアンドフィールを確立することです。</p>
+<p>CSS の目的は、電源スイッチのパラダイムを連想させるスイッチのルックアンドフィールを確立することです。</p>
 
 <pre class="brush: 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;
 }</pre>
 
-<p>最も興味深いのは、おそらく属性セレクタと {{cssxref(":first-child")}} と {{cssxref(":last-child")}} の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるということです。</p>
+<p>最も興味深いのは、おそらく属性セレクターと {{cssxref(":first-child")}} と {{cssxref(":last-child")}} の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるという面倒な作業を全て行うことです。</p>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
 <p>結果は次のようになります。</p>
 
 <p>{{EmbedLiveSample("Adding_the_switch_role_in_ARIA", 600, 40)}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様</h2>
+<h2 id="Specifications">仕様</h2>
 
 <table class="standard-table">
  <thead>
@@ -169,19 +169,25 @@ label.switch {
   <tr>
    <td>{{SpecName('ARIA', '#switch')}}</td>
    <td>{{Spec2('ARIA')}}</td>
-   <td>一般的に ARIA をすべてのロール、プロパティなどとともに定義します。</td>
+   <td>ARIA 全般を全てのロール、プロパティなどとともに定義します。</td>
   </tr>
   <tr>
    <td>{{SpecName('ARIA in HTML', '#index-aria-switch')}}</td>
    <td>{{Spec2('ARIA in HTML')}}</td>
-   <td>ARIA の機能を HTML に統合する方法について説明します。</td>
+   <td>ARIA の機能がどのように HTML に統合されているかを説明します。</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">ARIA: checkbox ロール</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">ARIA: checkbox ロール</a></li>
  <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code></li>
 </ul>
+
+<section id="Quick_links">
+    <ol>
+        <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li>
+    </ol>
+</section>