From ced5e7803e7b11f925833303db76ca6cc6044354 Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Mon, 28 Aug 2023 07:20:55 +0900
Subject: [PATCH 1/5] =?UTF-8?q?Carousel=20Pattern=E3=81=AE=E6=97=A5?=
 =?UTF-8?q?=E6=9C=AC=E8=AA=9E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/index/index.html                      |  30 +-
 .../patterns/carousel/carousel-pattern.html   | 185 ++++-----
 .../examples/carousel-1-prev-next.html        | 270 ++++++-------
 .../carousel/examples/carousel-2-tablist.html | 355 +++++++++---------
 4 files changed, 421 insertions(+), 419 deletions(-)

diff --git a/content/index/index.html b/content/index/index.html
index e9f3c4d4..d5f4917e 100644
--- a/content/index/index.html
+++ b/content/index/index.html
@@ -156,7 +156,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>group</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
+                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/checkbox/examples/checkbox.html">Checkbox  (Two State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/listbox/examples/listbox-grouped.html">Listbox  with Grouped Options</a></li>
                 <li><a href="../patterns/menubar/examples/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -309,8 +309,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td>
               <ul>
                 <li><a href="../patterns/accordion/examples/accordion.html">Accordion</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセルの例</a></li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/menubar/examples/menubar-navigation.html">Navigation Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/treeview/examples/treeview-navigation.html">Navigation Treeview</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/landmarks/examples/region.html">Region Landmark</a></li>
@@ -375,7 +375,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>tab</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
               </ul>
@@ -389,7 +389,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>tablist</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
               </ul>
@@ -399,7 +399,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>tabpanel</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
               </ul>
@@ -513,8 +513,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="../patterns/accordion/examples/accordion.html">Accordion</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセルの例</a></li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/checkbox/examples/checkbox-mixed.html">Checkbox  (Mixed-State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -640,8 +640,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="../patterns/breadcrumb/examples/breadcrumb.html">Breadcrumb</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセルの例</a></li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -721,8 +721,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="../patterns/alert/examples/alert.html">Alert</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセルの例</a></li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
               </ul>
@@ -775,8 +775,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-roledescription</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセルの例</a></li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
               </ul>
             </td>
           </tr>
@@ -802,7 +802,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-selected</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/carousel/examples/carousel-2-tablist.html">スライド制御のタブを持つ自動回転イメージカルーセルの例</a></li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/combobox/examples/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
index 6dd1c48a..84d166c1 100644
--- a/content/patterns/carousel/carousel-pattern.html
+++ b/content/patterns/carousel/carousel-pattern.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
@@ -14,171 +14,172 @@
   </head>
   <body>
     <main>
-      <h1>Carousel (Slide Show or Image Rotator) Pattern</h1>
+      <h1>カルーセル（スライドショーまたは画像ローテーター）パターン</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
 
       <section id="about">
-        <h2>About This Pattern</h2>
+        <h2>このパターンについて</h2>
         <p>
-          A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
-          Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and &quot;rotates&quot; the next or previous slide into view.
-          In some implementations, rotation automatically starts when the page loads, and it may also automatically stop once all the slides have been displayed.
-          While a slide may contain any type of content, image carousels where each slide contains nothing more than a single image are common.
+          カルーセルは、スライドとして参照される一連のアイテムを提示し、1つ以上のスライドのサブセットを順次表示します。
+          通常、一度に1つのスライドが表示され、ユーザーは現在のスライドを隠し、次または前のスライドを「回転」させて表示するコントロールを作動することができます。
+          一部の実装では、ページの読み込み時に自動的に回転が開始され、すべてのスライドが表示されると自動的に停止することもあります。
+          スライドには任意のタイプのコンテンツを含めることができますが、各スライドに単一の画像しか含まれていない画像カルーセルは一般的です。
         </p>
         <p>
-          Ensuring all users can easily control and are not adversely affected by slide rotation is an essential aspect of making carousels accessible.
-          For instance, the screen reader experience can be confusing and disorienting if slides that are not visible on screen are incorrectly hidden, e.g., displayed off-screen.
-          Similarly, if slides rotate automatically and a screen reader user is not aware of the rotation, the user may read an element on slide one, execute the screen reader command for next element, and, instead of hearing the next element on slide one, hear an element from slide 2 without any knowledge that the element just announced is from an entirely new context.
+          すべてのユーザーがスライドの回転を簡単に制御し、スライドの回転によって不利益を受けないようにすることは、カルーセルをアクセス可能にするための本質的な側面です。
+          例えば、画面上に表示されていないスライドが誤って非表示になっている場合、スクリーンリーダーの体験は混乱しやすくなります。例えば、オフスクリーンに表示されるなど。
+          同様に、スライドが自動的に回転し、スクリーンリーダーユーザーが回転を認識していない場合、ユーザーはスライド1の要素を読み、次の要素のスクリーンリーダーコマンドを実行すると、スライド1の次の要素を聞く代わりに、完全に新しいコンテキストからの要素であるスライド2の要素を知らずに聞くことになります。
         </p>
-        <p>Features needed to provide sufficient rotation control include:</p>
+        <p>十分な回転制御を提供するための機能には以下が含まれます：</p>
         <ul>
-          <li>Buttons for displaying the previous and next slides.</li>
+          <li>前のスライドと次のスライドを表示するボタン。</li>
           <li>
-            Optionally, a control, or group of controls, for choosing a specific slide to display.
-            For example, slide picker controls can be marked up as tabs in a tablist with the slide represented by a tabpanel element.
+            必要に応じて、特定のスライドを表示するためのコントロール、またはコントロールのグループ。
+            例えば、スライドピッカーコントロールは、tabpanel要素で表されるスライドとしてタブリスト内のタブとしてマークアップすることができます。
           </li>
           <li>
-            If the carousel can automatically rotate, it also:
+            カルーセルが自動的に回転する場合、それはまた：
             <ul>
               <li>
-                Has a button for stopping and restarting rotation.
-                This is particularly important for supporting assistive technologies operating in a mode that does not move either keyboard focus or the mouse.
+                回転を停止し再開するボタンを持っています。
+                これは、キーボードフォーカスやマウスを移動しないモードでの支援技術の動作をサポートするために特に重要です。
               </li>
               <li>
-                Stops rotating when keyboard focus enters the carousel.
-                It does not restart unless the user explicitly requests it to do so.
+                キーボードフォーカスがカルーセルに入ると回転が停止します。
+                ユーザーが明示的にそれを要求しない限り、再開しません。
               </li>
-              <li>Stops rotating whenever the mouse is hovering over the carousel.</li>
+              <li>マウスがカルーセルの上にホバーしているときいつでも回転が停止します。</li>
             </ul>
           </li>
         </ul>
       </section>
 
       <section id="examples">
-        <h2>Examples</h2>
+        <h2>例</h2>
         <ul>
-          <li><a href="examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with buttons for previous and next slide.</li>
-          <li><a href="examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control:</a> An image carousel that demonstrates accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with a set of tabs.</li>
+          <li><a href="examples/carousel-1-prev-next.html">スライドコントロールのボタンを持つ自動回転画像カルーセル：</a> ページの読み込み時に自動的に回転するカルーセルのアクセシビリティ機能を示す基本的な画像カルーセルで、ユーザーが前のスライドと次のスライドのボタンで表示するスライドを選択できます。</li>
+          <li><a href="examples/carousel-2-tablist.html">スライドコントロールのタブを持つ自動回転画像カルーセル：</a> ページの読み込み時に自動的に回転するカルーセルのアクセシビリティ機能を示す画像カルーセルで、ユーザーが一連のタブで表示するスライドを選択できます。</li>
         </ul>
       </section>
 
       <section id="terms">
-        <h2>Terms</h2>
-        <p>The following terms are used to describe components of a carousel.</p>
+        <h2>用語</h2>
+        <p>カルーセルのコンポーネントを説明するために以下の用語が使用されています。</p>
         <dl>
-          <dt>Slide</dt>
-          <dd>A single content container within a set of content containers that hold the content to be presented by the carousel.</dd>
-          <dt>Rotation Control</dt>
-          <dd>An interactive element that stops and starts automatic slide rotation.</dd>
-          <dt>Next Slide Control</dt>
-          <dd>An interactive element, often styled as an arrow, that displays the next slide in the rotation sequence.</dd>
-          <dt>Previous Slide Control</dt>
-          <dd>An interactive element, often styled as an arrow, that displays the previous slide in the rotation sequence.</dd>
-          <dt>Slide Picker Controls</dt>
-          <dd>A group of elements, often styled as small dots, that enable the user to pick a specific slide in the rotation sequence to display.</dd>
+          <dt>スライド</dt>
+          <dd>カルーセルによって提示されるコンテンツを保持する一連のコンテンツコンテナ内の単一のコンテンツコンテナ。</dd>
+          <dt>回転コントロール</dt>
+          <dd>自動スライド回転を停止および開始するインタラクティブな要素。</dd>
+          <dt>次のスライドコントロール</dt>
+          <dd>回転シーケンスの次のスライドを表示する、しばしば矢印としてスタイル付けされたインタラクティブな要素。</dd>
+          <dt>前のスライドコントロール</dt>
+          <dd>回転シーケンスの前のスライドを表示する、しばしば矢印としてスタイル付けされたインタラクティブな要素。</dd>
+          <dt>スライドピッカーコントロール</dt>
+          <dd>ユーザーが回転シーケンスで表示する特定のスライドを選択できるようにする、しばしば小さなドットとしてスタイル付けされた要素のグループ。</dd>
         </dl>
       </section>
 
       <section id="keyboard_interaction">
-        <h2>Keyboard Interaction</h2>
+        <h2>キーボードのインタラクション</h2>
         <ul>
           <li>
-            If the carousel has an auto-rotate feature, automatic slide rotation stops when any element in the carousel receives keyboard focus.
-            It does not resume unless the user activates the rotation control.
+            カルーセルに自動回転機能がある場合、カルーセル内の任意の要素がキーボードフォーカスを受け取ると、自動スライド回転が停止します。
+            ユーザーが回転コントロールを作動するまで再開しません。
           </li>
-          <li><kbd>Tab</kbd> and <kbd>Shift + Tab</kbd>: Move focus through the interactive elements of the carousel as specified by the page tab sequence -- scripting for <kbd>Tab</kbd> is not necessary.</li>
+          <li><kbd>Tab</kbd> および <kbd>Shift + Tab</kbd>: ページのタブ順序で指定されたカルーセルのインタラクティブな要素を通じてフォーカスを移動します -- <kbd>Tab</kbd> のためのスクリプトは必要ありません。</li>
           <li>
-            Button elements implement the keyboard interaction defined in the <a href="../button/button-pattern.html">button pattern</a>.
-            Note: Activating the rotation control, next slide, and previous slide do not move focus, so users may easily repetitively activate them as many times as desired.
+            ボタン要素は、<a href="../button/button-pattern.html">ボタンパターン</a>で定義されたキーボードインタラクションを実装します。
+            注：回転コントロール、次のスライド、前のスライドを作動することはフォーカスを移動しませんので、ユーザーは望むだけ何度も繰り返し作動することができます。
           </li>
           <li>
-            If present, the rotation control is the first element in the <kbd>Tab</kbd> sequence inside the carousel.
-            It is essential that it precede the rotating content so it can be easily located.
+            存在する場合、回転コントロールはカルーセル内の<kbd>Tab</kbd>シーケンスの最初の要素です。
+            回転するコンテンツよりも前にあることが重要です。
           </li>
-          <li>If tab elements are used for slide picker controls, they implement the keyboard interaction defined in the <a href="../tabs/tabs-pattern.html">Tabs Pattern.</a></li>
+          <li>スライドピッカーコントロールのためにタブ要素が使用されている場合、それらは<a href="../tabs/tabs-pattern.html">タブパターン</a>で定義されたキーボードインタラクションを実装します。</li>
         </ul>
       </section>
 
       <section id="roles_states_properties">
-        <h2>WAI-ARIA Roles, States, and Properties</h2>
-        <p>This section describes the element composition for three styles of carousels:</p>
+        <h2>WAI-ARIAの役割、状態、およびプロパティ</h2>
+        <p>このセクションでは、3つのスタイルのカルーセルの要素構成について説明します：</p>
         <ul>
-          <li>Basic: Has rotation, previous slide, and next slide controls but no slide picker controls.</li>
-          <li>Tabbed: Has basic controls plus a single tab stop for slide picker controls implemented using the <a href="../tabs/tabs-pattern.html">tabs pattern.</a></li>
+          <li>基本：回転、前のスライド、次のスライドのコントロールはあるが、スライドピッカーコントロールはない。</li>
+          <li>タブ付き：基本のコントロールに加えて、<a href="../tabs/tabs-pattern.html">タブのパターン</a>を使用して実装されたスライドピッカーコントロールのための単一のタブ停止がある。</li>
           <li>
-            Grouped: Has basic controls plus a series of tab stops in a group of slide picker controls where each control implements the <a href="../button/button-pattern.html">button pattern.</a>
-            Because each slide selector button adds an element to the page tab sequence, this style is the least friendly for keyboard users.
+            グループ化：基本のコントロールに加えて、各コントロールが<a href="../button/button-pattern.html">ボタンのパターン</a>を実装するスライドピッカーコントロールのグループ内の一連のタブ停止がある。
+            各スライドセレクターボタンがページのタブシーケンスに要素を追加するため、このスタイルはキーボードユーザーにとって最も使いにくい。
           </li>
         </ul>
-        <h3>Basic carousel elements</h3>
+        <h3>基本的なカルーセルの要素</h3>
         <ul>
           <li>
-            A carousel container element that encompasses all components of the carousel, including both carousel controls and slides, has either role <a href="#region" class="role-reference">region</a> or role <a href="#group" class="role-reference">group.</a>
-            The most appropriate role for the carousel container depends on the information architecture of the page.
-            See the
-            <a href="../../practices/landmark-regions/landmark-regions-practice.html">Landmark Regions Practice</a>
-            to determine whether the carousel warrants being designated as a landmark region.
+            カルーセルのコントロールとスライドの両方を含むカルーセルのコンテナ要素は、役割<a href="#region" class="role-reference">region</a>または役割<a href="#group" class="role-reference">group</a>のいずれかを持っています。
+            カルーセルコンテナの最も適切な役割は、ページの情報アーキテクチャに依存します。
+            カルーセルがランドマークリージョンとして指定されるかどうかを判断するために、
+            <a href="../../practices/landmark-regions/landmark-regions-practice.html">ランドマークリージョンの実践</a>
+            を参照してください。
           </li>
-          <li>The carousel container has the <a href="#aria-roledescription" class="property-reference">aria-roledescription</a> property set to <code>carousel</code>.</li>
+          <li>カルーセルのコンテナは、<a href="#aria-roledescription" class="property-reference">aria-roledescription</a>プロパティを<code>carousel</code>に設定しています。</li>
           <li>
-            If the carousel has a visible label, its accessible label is provided by the property <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> on the carousel container set to the ID of the element containing the visible label.
-            Otherwise, an accessible label is provided by the property <a href="#aria-label" class="property-reference">aria-label</a> set on the carousel container.
-            Note that since the <code>aria-roledescription</code> is set to &quot;carousel&quot;, the label does not contain the word &quot;carousel&quot;.
+            カルーセルに表示されるラベルがある場合、そのアクセシブルなラベルは、カルーセルコンテナのプロパティ<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>によって提供され、表示されるラベルを含む要素のIDに設定されます。
+            それ以外の場合、アクセシブルなラベルは、カルーセルコンテナに設定されたプロパティ<a href="#aria-label" class="property-reference">aria-label</a>によって提供されます。
+            <code>aria-roledescription</code>が「carousel」と設定されているため、ラベルに「carousel」という言葉は含まれていません。
           </li>
-          <li>The rotation control, next slide control, and previous slide control are either native button elements (recommended) or implement the <a href="../button/button-pattern.html">button pattern</a>.</li>
+          <li>回転コントロール、次のスライドコントロール、および前のスライドコントロールは、ネイティブのボタン要素（推奨）であるか、<a href="../button/button-pattern.html">ボタンのパターン</a>を実装しています。</li>
           <li>
-            The rotation control has an accessible label provided by either its inner text or <a href="#aria-label" class="property-reference">aria-label</a>.
-            The label changes to match the action the button will perform, e.g., &quot;Stop slide rotation&quot; or &quot;Start slide rotation&quot;.
-            A label that changes when the button is activated clearly communicates both that slide content can change automatically and when it is doing so.
-            Note that since the label changes, the rotation control does not have any states, e.g., <code>aria-pressed</code>, specified.
+            回転コントロールには、内部テキストまたは<a href="#aria-label" class="property-reference">aria-label</a>によって提供されるアクセシブルなラベルがあります。
+            ラベルは、ボタンが実行するアクションに合わせて変更されます。例えば、「スライド回転を停止」または「スライド回転を開始」。
+            ボタンが作動するとラベルが変わることで、スライドのコンテンツが自動的に変わる可能性があり、それが実際に行われていることを明確に伝えることができます。
+            ラベルが変わるため、回転コントロールには、例えば<code>aria-pressed</code>などの状態が指定されていません。
           </li>
-          <li>Each slide container has role <a href="#group" class="role-reference">group</a> with the property <a href="#aria-roledescription" class="property-reference">aria-roledescription</a> set to <code>slide</code>.</li>
+          <li>各スライドコンテナは、役割<a href="#group" class="role-reference">group</a>を持ち、プロパティ<a href="#aria-roledescription" class="property-reference">aria-roledescription</a>を<code>slide</code>に設定しています。</li>
           <li>
-            Each slide has an accessible name:
+            各スライドにはアクセシブルな名前があります：
             <ul>
-              <li>If a slide has a visible label, its accessible label is provided by the property <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> on the slide container set to the ID of the element containing the visible label.</li>
-              <li>Otherwise, an accessible label is provided by the property <a href="#aria-label" class="property-reference">aria-label</a> set on the slide container.</li>
-              <li>If unique names that identify the slide content are not available, a number and set size can serve as a meaningful alternative, e.g., &quot;3 of 10&quot;. Note: Normally, including set position and size information in an accessible name is not appropriate. An exception is helpful in this implementation because group elements do not support <a href="#aria-setsize" class="property-reference">aria-setsize</a> or <a href="#aria-posinset" class="property-reference">aria-posinset</a>. The tabbed carousel implementation pattern does not have this limitation.</li>
-              <li>Note that since the <code>aria-roledescription</code> is set to &quot;slide&quot;, the label does not contain the word &quot;slide.&quot;</li>
+              <li>スライドに表示されるラベルがある場合、そのアクセシブルなラベルは、スライドコンテナのプロパティ<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>によって提供され、表示されるラベルを含む要素のIDに設定されます。</li>
+              <li>それ以外の場合、アクセシブルなラベルは、スライドコンテナに設定されたプロパティ<a href="#aria-label" class="property-reference">aria-label</a>によって提供されます。</li>
+              <li>スライドのコンテンツを識別するユニークな名前が利用できない場合、番号とセットサイズを意味のある代替手段として使用できます。例：「3/10」。注：通常、アクセシブルな名前にセット位置とサイズ情報を含めることは適切ではありません。この実装では例外が役立ちます。なぜなら、group要素は<a href="#aria-setsize" class="property-reference">aria-setsize</a>または<a href="#aria-posinset" class="property-reference">aria-posinset</a>をサポートしていないからです。タブ付きのカルーセル実装パターンにはこの制限がありません。</li>
+              <li><code>aria-roledescription</code>が「slide」と設定されているため、ラベルに「slide」という言葉は含まれていません。</li>
             </ul>
           </li>
           <li>
-            Optionally, an element wrapping the set of slide elements has <a href="#aria-atomic" class="property-reference">aria-atomic</a> set to <code>false</code> and <a href="#aria-live" class="property-reference">aria-live</a> set to:
+            任意で、スライド要素のセットをラッピングする要素には、<a href="#aria-atomic" class="property-reference">aria-atomic</a>が<code>false</code>に設定され、<a href="#aria-live" class="property-reference">aria-live</a>が以下に設定されています：
             <ul>
-              <li><code>off</code>: if the carousel is automatically rotating.</li>
-              <li><code>polite</code>: if the carousel is <strong>NOT</strong> automatically rotating.</li>
+              <li><code>off</code>：カルーセルが自動的に回転している場合。</li>
+              <li><code>polite</code>：カルーセルが<strong>自動的に回転していない</strong>場合。</li>
             </ul>
           </li>
         </ul>
-        <h3>Tabbed Carousel Elements</h3>
-        <p>The structure of a tabbed carousel is the same as a basic carousel except that:</p>
+        <h3>タブ付きカルーセルの要素</h3>
+        <p>タブ付きのカルーセルの構造は、基本的なカルーセルと同じですが、以下の点が異なります：</p>
         <ul>
-          <li>Each slide container has role <a href="#tabpanel" class="role-reference">tabpanel</a> in lieu of <code>group</code>, and it does not have the <code>aria-roledescription</code> property.</li>
+          <li>各スライドコンテナは、<code>group</code>の代わりに役割<a href="#tabpanel" class="role-reference">tabpanel</a>を持ち、<code>aria-roledescription</code>プロパティを持っていません。</li>
           <li>
-            It has slide picker controls implemented using the <a href="../tabs/tabs-pattern.html">tabs pattern</a> where:
+            <a href="../tabs/tabs-pattern.html">タブのパターン</a>を使用して実装されたスライドピッカーコントロールがあり、以下のようになります：
             <ul>
-              <li>Each control is a <code>tab</code> element, so activating a tab displays the slide associated with that tab.</li>
+              <li>各コントロールは<code>tab</code>要素であり、タブを作動すると、そのタブに関連付けられたスライドが表示されます。</li>
               <li>
-                The accessible name of each <code>tab</code> indicates which slide it will display by including the name or number of the slide, e.g., &quot;Slide 3&quot;.
-                Slide names are preferable if each slide has a unique name.
+                各<code>tab</code>のアクセシブルな名前は、スライドの名前または番号を含むことで、どのスライドを表示するかを示します。例：「スライド3」。
+                各スライドにユニークな名前がある場合、スライドの名前が望ましい。
               </li>
-              <li>The set of controls is grouped in a <code>tablist</code> element with an accessible name provided by the value of <a href="#aria-label" class="property-reference">aria-label</a> that identifies the purpose of the tabs, e.g., &quot;Choose slide to display.&quot;</li>
-              <li>The <code>tab</code>, <code>tablist</code>, and <code>tabpanel</code> implement the properties specified in the <a href="../tabs/tabs-pattern.html">tabs pattern</a>.</li>
+              <li>コントロールのセットは、タブの目的を識別する<a href="#aria-label" class="property-reference">aria-label</a>の値によって提供されるアクセシブルな名前を持つ<code>tablist</code>要素にグループ化されます。例：「表示するスライドを選択」。</li>
+              <li><code>tab</code>、<code>tablist</code>、および<code>tabpanel</code>は、<a href="../tabs/tabs-pattern.html">タブのパターン</a>で指定されたプロパティを実装しています。</li>
             </ul>
           </li>
         </ul>
-        <h3>Grouped Carousel Elements</h3>
-        <p>A grouped carousel has the same structure as a basic carousel, but it also includes slide picker controls where:</p>
+        <h3>グループ化されたカルーセルの要素</h3>
+        <p>グループ化されたカルーセルは、基本的なカルーセルと同じ構造を持っていますが、スライドピッカーコントロールも含まれています：</p>
         <ul>
-          <li>The set of slide picker controls is contained in an element with role <a href="#group" class="role-reference">group</a>.</li>
-          <li>The group containing the picker controls has an accessible label provided by the value of <a href="#aria-label" class="property-reference">aria-label</a> that identifies the purpose of the controls, e.g., &quot;Choose slide to display.&quot;</li>
-          <li>Each picker control is a native button element (recommended) or implements the <a href="../button/button-pattern.html">button pattern.</a></li>
+          <li>スライドピッカーコントロールのセットは、役割<a href="#group" class="role-reference">group</a>を持つ要素に含まれています。</li>
+          <li>ピッカーコントロールを含むグループには、コントロールの目的を識別する<a href="#aria-label" class="property-reference">aria-label</a>の値によって提供されるアクセシブルなラベルがあります。例：「表示するスライドを選択」。</li>
+          <li>各ピッカーコントロールは、ネイティブのボタン要素（推奨）であるか、<a href="../button/button-pattern.html">ボタンのパターン</a>を実装しています。</li>
           <li>
-            The accessible name of each picker button matches the name of the slide it displays.
-            One technique for accomplishing this is to set <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> to a value that references the slide <code>group</code> element.
+            各ピッカーボタンのアクセシブルな名前は、表示するスライドの名前と一致します。
+            これを実現するための一つの手法は、<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>を、スライド<code>group</code>要素を参照する値に設定することです。
           </li>
           <li>
-            The picker button representing the currently displayed slide has the property <a href="#aria-disabled" class="property-reference">aria-disabled</a> set to <code>true</code>.
-            Note: <code>aria-disabled</code> is preferable to the HTML <code>disabled</code> attribute because this is a circumstance where screen reader users benefit from the disabled button being included in the page <kbd>Tab</kbd> sequence.
+            現在表示されているスライドを表すピッカーボタンには、プロパティ<a href="#aria-disabled" class="property-reference">aria-disabled</a>が<code>true</code>に設定されています。
+            注：<code>aria-disabled</code>は、この状況でスクリーンリーダーユーザーがページの<kbd>Tab</kbd>シーケンスに含まれる無効なボタンから利益を得るため、HTMLの<code>disabled</code>属性よりも優れています。
           </li>
         </ul>
       </section>
diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
index 6c067886..aec52184 100644
--- a/content/patterns/carousel/examples/carousel-1-prev-next.html
+++ b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Auto-Rotating Image Carousel Example with Buttons for Slide Control</title>
+    <title>スライド制御のボタンを持つ自動回転イメージカルーセルの例</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -18,70 +18,71 @@
     <script src="js/carousel-prev-next.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
+    <nav aria-label="関連リンク" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/10">Related Issues</a></li>
-        <li><a href="../carousel-pattern.html">Design Pattern</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/10">関連するIssues</a></li>
+        <li><a href="../carousel-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>Auto-Rotating Image Carousel Example with Buttons for Slide Control</h1>
+      <h1>スライド制御のボタンを持つ自動回転イメージカルーセルの例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <p>
-          The following example implementation of the <a href="../carousel-pattern.html">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
-          For instance, rotation stops when users either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons.
-          The accessibility features section that follows the example describes these features in detail.
+          以下の<a href="../carousel-pattern.html">カルーセルのパターン</a>の実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。
+          例えば、ユーザーがカルーセル内にフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると回転が停止し、ユーザーは前のスライドと次のスライドのボタンで表示するスライドを手動で制御できます。
+          例の後に続くアクセシビリティの特徴のセクションでは、これらの特徴を詳しく説明しています。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下があります：</p>
         <ul>
-          <li><a href="carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control:</a> An image carousel that demonstrates accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with a set of tabs.</li>
+          <li><a href="carousel-2-tablist.html">タブでスライドを制御する自動回転イメージカルーセル:</a> ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティの特徴を示し、ユーザーがタブのセットで表示するスライドを選択できるようにするイメージカルーセル。</li>
         </ul>
       </section>
 
       <section>
-        <h2>Example Options</h2>
+        <h2>例のオプション</h2>
 
         <fieldset class="carousel-options">
-          <legend>Carousel View and Behavior Options</legend>
+          <legend>カルーセルの表示と動作のオプション</legend>
 
           <label for="accessible-controls">
             <input type="checkbox" id="accessible-controls" value="moreaccessible" aria-describedby="accessible-controls-desc">
-            Display controls and captions outside of image
+            画像の外にコントロールとキャプションを表示
           </label>
-          <p id="accessible-controls-desc">This option is more accessible than rendering controls and captions within the image, because controls are easier to perceive and captions are easier to read without rotating images behind them.</p>
+          <p id="accessible-controls-desc">このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルです。なぜなら、コントロールは知覚しやすく、キャプションは背後に回転する画像なしで読みやすくなるからです。</p>
 
           <label for="rotation-paused">
             <input type="checkbox" id="rotation-paused" value="paused" aria-describedby="rotation-paused-desc">
-            Pause auto-rotation on load (<a href="javascript:history.go(0)"><img class="reload" src="images/reload-icon.png" alt="">reload needed</a>)
+            読み込み時に自動回転を一時停止（<a href="javascript:history.go(0)"><img class="reload" src="images/reload-icon.png" alt="">再読み込みが必要</a>）
           </label>
           <p id="rotation-paused-desc">
-            This option controls whether the carousel is paused or playing on page load.
-            The paused option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation, but allows users to start auto-rotation using the start/stop button.</p>
-          <p>Note: If the user has chosen reduced motion in system settings, auto-rotation will always be paused on load.</p>
+            このオプションは、ページの読み込み時にカルーセルが一時停止しているか再生しているかを制御します。
+            一時停止オプションは、視覚障害のあるユーザーや自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させますが、ユーザーが開始/停止ボタンを使用して自動回転を開始できるようにします。</p>
+          <p>注：ユーザーがシステムの設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止されます。</p>
 
           <label for="rotation-disabled">
             <input type="checkbox" id="rotation-disabled" value="norotate" aria-describedby="rotation-disabled-desc">
-            Disable auto-rotation
+            自動回転を無効にする
           </label>
           <p id="rotation-disabled-desc">
-            This option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation by disabling the auto-rotation feature and removing the start/stop button from the user interface.
-            Users can use the previous and next buttons to manually navigate through the slides.
+            このオプションは、自動回転機能を無効にし、ユーザーインターフェースから開始/停止ボタンを削除することで、視覚障害のあるユーザーや自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させます。
+            ユーザーは前のボタンと次のボタンを使用して、手動でスライドをナビゲートできます。
           </p>
         </fieldset>
       </section>
 
       <section>
         <div class="example-header">
-          <h2 id="ex_label">Example</h2>
+          <h2 id="ex_label">例</h2>
         </div>
-        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_label ex_start_sep" aria-label="の開始"></div>
         <div id="ex1">
-          <section id="myCarousel" class="carousel" aria-roledescription="carousel" aria-label="Highlighted television shows">
+          <section id="myCarousel" class="carousel" aria-roledescription="カルーセル" aria-label="ハイライトされたテレビ番組">
             <div class="carousel-inner">
               <div class="controls">
-                <button type="button" class="rotation pause" aria-label="Stop automatic slide show">
+                <button type="button" class="rotation pause" aria-label="自動スライドショーを停止">
                   <svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                     <rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24" />
                     <rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20" />
@@ -94,7 +95,7 @@ <h2 id="ex_label">Example</h2>
                   </svg>
                 </button>
 
-                <button type="button" class="previous" aria-controls="myCarousel-items" aria-label="Previous Slide">
+                <button type="button" class="previous" aria-controls="myCarousel-items" aria-label="前のスライド">
                   <svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                     <rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24" />
                     <rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20" />
@@ -102,7 +103,7 @@ <h2 id="ex_label">Example</h2>
                   </svg>
                 </button>
 
-                <button type="button" class="next" aria-controls="myCarousel-items" aria-label="Next Slide">
+                <button type="button" class="next" aria-controls="myCarousel-items" aria-label="次のスライド">
                   <svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                     <rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24" />
                     <rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20" />
@@ -112,56 +113,56 @@ <h2 id="ex_label">Example</h2>
               </div>
 
               <div id="myCarousel-items" class="carousel-items" aria-live="off">
-                <div class="carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 6">
+                <div class="carousel-item active" role="group" aria-roledescription="スライド" aria-label="1 of 6">
                   <div class="carousel-image">
                     <a href="#">
-                      <img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
+                      <img src="images/amsterdamslide__800x600.jpg" alt="アムステルダムでのウォーキングツアー">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#" id="carousel-label-1"> Dynamic Europe: Amsterdam, Prague, Berlin </a>
+                      <a href="#" id="carousel-label-1"> ダイナミックヨーロッパ: アムステルダム、プラハ、ベルリン </a>
                     </h3>
 
                     <div class="hidden-xs hidden-sm">
-                      <p><span class="contrast">7 pm Tuesday, March 3, on TV</span></p>
+                      <p><span class="contrast">3月3日火曜日、午後7時、テレビで</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="2 of 6">
                   <div class="carousel-image">
                     <a href="#">
-                      <img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall">
+                      <img src="images/lands-endslide__800x600.jpg" alt="コーンウォールのLand's End">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#" id="carousel-label-2"> Travel to Southwest England and Paris </a>
+                      <a href="#" id="carousel-label-2"> イングランド南西部とパリへの旅 </a>
                     </h3>
 
                     <div>
-                      <p><span class="contrast">Sept. 14 to Sept. 24 or 27</span></p>
+                      <p><span class="contrast">9月14日から9月24日または27日まで</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="3 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="3 of 6">
                   <div class="carousel-image">
                     <a href="#">
-                      <img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
+                      <img src="images/trustslide-2__800x600.jpg" alt="母と娘がノートパソコンでダニエルタイガーゲームをプレイ">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#" id="carousel-label-3"> Great Children's Programming on Public TV </a>
+                      <a href="#" id="carousel-label-3"> 公共テレビの素晴らしい子供向け番組 </a>
                     </h3>
 
                     <div></div>
@@ -170,36 +171,36 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="4 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="4 of 6">
                   <div class="carousel-image">
                     <a href="#">
-                      <img src="images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.">
+                      <img src="images/foyleswarslide__800x600.jpg" alt="スーツとフェドラ帽をかぶった男と、髪を整えた女がカメラを厳しく見つめている。">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#" id="carousel-label-4"> Foyle&#8217;s War Revisited </a>
+                      <a href="#" id="carousel-label-4"> Foyleの戦争再訪 </a>
                     </h3>
 
                     <div>
-                      <p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peek at the final season.</span></p>
+                      <p><span class="contrast">3月8日日曜日、午後8時、テレビで: 最終シーズンの先行上映。</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="5 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="5 of 6">
                   <div class="carousel-image">
                     <a href="#">
-                      <img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
+                      <img src="images/britcomdavidslide__800x600.jpg" alt="WILL-TVのホスト、デビッド・シールとともに英国の旗">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#" id="carousel-label-5"> Great Britain Vote: 7 pm Sat. </a>
+                      <a href="#" id="carousel-label-5"> グレートブリテン投票: 土曜日午後7時 </a>
                     </h3>
 
                     <div></div>
@@ -208,20 +209,20 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="6 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="6 of 6">
                   <div class="carousel-image">
                     <a href="#">
-                      <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
+                      <img src="images/mag800-2__800x600.jpg" alt="セットでのMid-American Gardenerのパネリスト">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#" id="carousel-label-6"> Mid-American Gardener: Thursdays at 7 pm </a>
+                      <a href="#" id="carousel-label-6"> Mid-American Gardener: 木曜日午後7時 </a>
                     </h3>
 
                     <div class="hidden-xs hidden-sm">
-                      <p><span class="contrast">Watch the latest episodes.</span></p>
+                      <p><span class="contrast">最新のエピソードを見る。</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
@@ -235,84 +236,85 @@ <h3>
 
           <div class="col-sm-1"></div>
         </div>
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_label ex_end_sep" aria-label="の終了"></div>
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
-        <h3>Controlling Automatic Slide Rotation</h3>
+        <h2>アクセシビリティ機能</h2>
+        <h3>自動スライド回転の制御</h3>
         <p>
-          Users can stop and start slide rotation, which is an essential aspect of accessibility of the carousel for a variety of people with disabilities.
-          People with low vision or a cognitive disability that affects visual processing or reading benefit from being able to control slide rotation so they have sufficient time to explore slide content.
-          Similarly, since screen reader users cannot perceive automatic rotation, it can make reading the page confusing and disorienting.
-          For example, when slides are automatically rotating, a screen reader user may read an element on slide one, execute a screen reader command to read the next element, and, instead of hearing the next element on slide one, hear an element from slide 2 without any knowledge that the element just announced is from an entirely new context.
+          ユーザーはスライドの回転を停止し、再開することができ、これはさまざまな障害を持つ人々にとってカルーセルのアクセシビリティの重要な側面です。
+          低視力者や視覚処理や読書に影響を及ぼす認知障害を持つ人々は、スライドの内容を探索するのに十分な時間を持つためにスライドの回転を制御できることから利益を得ます。
+          同様に、スクリーンリーダーのユーザーが自動回転を知覚できないため、ページの読み取りが混乱し、方向を失うことがあります。
+          例えば、スライドが自動的に回転しているとき、スクリーンリーダーのユーザーはスライド1の要素を読み、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド1の次の要素を聞く代わりに、完全に新しいコンテキストからの要素を知らずにスライド2からの要素を聞くことになります。
         </p>
-        <p>This example includes the following features for giving users control over slide rotation:</p>
+        <p>この例には、ユーザーがスライドの回転を制御するための以下の機能が含まれています:</p>
         <ul>
-          <li>If operating system preferences have been set for reduced motion or disabling animations, the auto-rotation is initially paused.</li>
+          <li>オペレーティングシステムの設定が動きの減少やアニメーションの無効化に設定されている場合、自動回転は初めから一時停止されます。</li>
           <li>
-            Hovering the mouse over any carousel content pauses automatic rotation.
-            Automatic rotation resumes when the mouse moves away from the carousel unless another condition, such as keyboard focus, that prevents rotation has been triggered.
+            カルーセルの任意のコンテンツにマウスをホバーすると、自動回転が一時停止します。
+            マウスがカルーセルから移動すると、キーボードのフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
           </li>
           <li>
-            Moving keyboard focus to any of the carousel content, including the next and previous slide elements, pauses automatic rotation.
-            Automatic rotation resumes when keyboard focus moves out of the carousel content unless another condition, such as mouse hover, that prevents rotation has been triggered.
+            キーボードのフォーカスをカルーセルの任意のコンテンツ、次や前のスライドの要素を含むものに移動すると、自動回転が一時停止します。
+            キーボードのフォーカスがカルーセルのコンテンツから移動すると、マウスのホバーなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
           </li>
           <li>
-            The carousel also contains a rotation control button that can stop and start automatic rotation.
+            カルーセルには、自動回転を停止し、再開することができる回転制御ボタンも含まれています。
             <ul>
-              <li>The rotation control button is the first element in the screen reader reading order.</li>
-              <li>The rotation control button is always visible so it is available to all users whether they are interacting via a mouse, keyboard, assistive technology, or touch.</li>
-              <li>If the carousel is rotating, the button's accessible name is &quot;Stop Automatic Slide Show&quot;, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
-              <li>If the carousel is not rotating, the accessible name of the button is &quot;Start Automatic Slide Show&quot;.</li>
+              <li>回転制御ボタンは、スクリーンリーダーの読み取り順序で最初の要素です。</li>
+              <li>回転制御ボタンは常に表示されているため、マウス、キーボード、補助技術、またはタッチを介して対話しているすべてのユーザーに利用できます。</li>
+              <li>カルーセルが回転している場合、ボタンのアクセシブルな名前は「自動スライドショーを停止」となり、スライドが変更されていることをスクリーンリーダーユーザーに通知するとともに、変更を停止する方法を提供します。</li>
+              <li>カルーセルが回転していない場合、ボタンのアクセシブルな名前は「自動スライドショーを開始」となります。</li>
               <li>
-                If a user activates the rotation control button to start rotation it is assumed the user wants auto-rotation to start immediately, so focus and/or hover states within the carousel for pausing rotation are ignored.
-                The rotation will only stop if the rotation control button is activated again.
+                ユーザーが回転制御ボタンを活性化して回転を開始する場合、ユーザーが自動回転をすぐに開始したいと考えていると想定されます。したがって、回転を一時停止するカルーセル内のフォーカスや/およびホバーの状態は無視されます。
+                回転は、再び回転制御ボタンが活性化されるまで停止することはありません。
               </li>
             </ul>
           </li>
           <li>
-            The example includes an option to completely disable automatic slide rotation.
-            When this option is selected the start/stop button is not rendered and the slides can only be rotated through activation of the next and previous buttons.
+            この例には、自動スライド回転を完全に無効にするオプションが含まれています。
+            このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドは次および前のボタンの活性化を通じてのみ回転することができます。
           </li>
         </ul>
-        <h3>Color Contrast of Text and Rotation Controls</h3>
+        <h3>テキストと回転制御の色のコントラスト</h3>
         <p>
-          In the view of this carousel where the controls and captions are displayed inside the image, background images could cause color contrast for the controls and text to become insufficient.
-          However, this view includes the following features to prevent this potential problem and ensure it meets WCAG 2.1 color contrast requirements:
+          このカルーセルのビューでは、コントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストの色のコントラストが不十分になる可能性があります。
+          しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1の色のコントラスト要件を満たしています:
         </p>
         <ul>
           <li>
-            When the rotation control, next slide, and previous slide buttons are rendered within the image, the buttons have foreground and background colors that meet WCAG 2.1 color contrast requirements.
-            In addition, the focus styling uses SVG images that make the focus indicator highly visible when a control receives keyboard focus.</li>
-          <li>The transparency of the caption area is decreased so the caption text meets the WCAG 2.1 color contrast requirements.</li>
+            回転制御、次のスライド、および前のスライドのボタンが画像内にレンダリングされる場合、ボタンにはWCAG 2.1の色のコントラスト要件を満たす前景色と背景色があります。
+            さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにするSVG画像を使用しています。
+          </li>
+          <li>キャプションエリアの透明度が減少しているため、キャプションテキストはWCAG 2.1の色のコントラスト要件を満たしています。</li>
         </ul>
 
         <p>
-          One way to avoid the color contrast issues caused by displaying controls and text within the images is to position the controls outside the image.
-          Displaying the controls and text on a solid background makes it easier to control color contrast.
-          One of the view options provides an example of this technique.
+          画像内にコントロールとテキストを表示することによって引き起こされる色のコントラストの問題を回避する1つの方法は、コントロールを画像の外に配置することです。
+          コントロールとテキストを固定背景に表示することで、色のコントラストを制御するのが簡単になります。
+          1つのビューオプションは、この技術の例を提供しています。
         </p>
 
-        <h3>Screen Reader Announcement of Slide Changes</h3>
+        <h3>スライドの変更のスクリーンリーダーのアナウンスメント</h3>
         <p>
-          When automatic rotation is turned off, the carousel slide content is included in a live region.
-          This makes it easier for screen reader users to scan through the carousel slides.
-          When screen reader users activate the next or previous slide button, the new slide content is announced, giving users immediate feedback that helps them determine whether or not to interact with the content.
-          Very importantly, if automatic rotation is turned on, the live region is disabled.
-          If it were not, the page would become unusable as announcements of the continuously changing content constantly interrupt anything else the user is reading.
+          自動回転がオフになっている場合、カルーセルのスライドコンテンツはライブリージョンに含まれています。
+          これにより、スクリーンリーダーのユーザーがカルーセルのスライドをスキャンするのが簡単になります。
+          スクリーンリーダーのユーザーが次または前のスライドボタンを活性化すると、新しいスライドのコンテンツがアナウンスされ、コンテンツと対話するかどうかを判断するための即時のフィードバックが与えられます。
+          非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になっています。
+          そうでなければ、継続的に変更されるコンテンツのアナウンスメントが他のユーザーが読んでいるものを常に中断するため、ページが使用できなくなります。
         </p>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
         <section>
-          <h3 id="kbd_label_2">Rotation Control Button</h3>
+          <h3 id="kbd_label_2">回転制御ボタン</h3>
           <table aria-labelledby="kbd_label_2 kbd_label" class="def">
             <thead>
               <tr>
-                <th>Key</th>
-                <th>Function</th>
+                <th>キー</th>
+                <th>機能</th>
               </tr>
             </thead>
             <tbody>
@@ -320,32 +322,32 @@ <h3 id="kbd_label_2">Rotation Control Button</h3>
                 <th><kbd>Tab</kbd></th>
                 <td>
                   <ul>
-                    <li>Moves focus through interactive elements in the carousel.</li>
-                    <li>Rotation control, previous slide, and next slide buttons precede the slide content in the <kbd>Tab</kbd> sequence.</li>
+                    <li>カルーセル内のインタラクティブな要素を通してフォーカスを移動します。</li>
+                    <li>回転制御、前のスライド、次のスライドのボタンは、<kbd>Tab</kbd>の順序でスライドの内容よりも先に来ます。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="carousel-enter-or-space-toggle">
-                <th><kbd>Enter</kbd> or <kbd>Space</kbd></th>
-                <td>Toggle the auto rotation of slides in the carousel.</td>
+                <th><kbd>Enter</kbd> または <kbd>Space</kbd></th>
+                <td>カルーセル内のスライドの自動回転を切り替えます。</td>
               </tr>
             </tbody>
           </table>
         </section>
 
         <section>
-          <h3 id="kbd_label_3">Next and Previous Slide Buttons</h3>
+          <h3 id="kbd_label_3">次および前のスライドボタン</h3>
           <table aria-labelledby="kbd_label_3 kbd_label" class="def">
             <thead>
               <tr>
-                <th>Key</th>
-                <th>Function</th>
+                <th>キー</th>
+                <th>機能</th>
               </tr>
             </thead>
             <tbody>
               <tr data-test-id="carousel-key-enter-or-space-move">
                 <th><kbd>Enter</kbd><br><kbd>Space</kbd></th>
-                <td>Display next or previous slide in the carousel.</td>
+                <td>カルーセル内の次または前のスライドを表示します。</td>
               </tr>
             </tbody>
           </table>
@@ -353,14 +355,14 @@ <h3 id="kbd_label_3">Next and Previous Slide Buttons</h3>
       </section>
 
       <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+        <h2 id="rps_label">役割、プロパティ、状態、およびTabindex属性</h2>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
+              <th scope="col">役割</th>
+              <th scope="col">属性</th>
+              <th scope="col">要素</th>
+              <th scope="col">使用法</th>
             </tr>
           </thead>
           <tbody>
@@ -374,8 +376,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Role <code>region</code> is implied for any <code>section</code> element that has an accessible name.</li>
-                  <li>Defines the carousel and its controls as a landmark region.</li>
+                  <li>アクセス可能な名前を持つ任意の<code>section</code>要素には役割<code>region</code>が暗示されます。</li>
+                  <li>カルーセルとそのコントロールをランドマーク領域として定義します。</li>
                 </ul>
               </td>
             </tr>
@@ -389,21 +391,21 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Informs assistive technologies to identify the element as a &quot;carousel&quot; rather than a &quot;region.&quot;</li>
-                  <li>Affects how the assistive technology renders the role but does not affect functionality, such as commands for navigating to landmark regions.</li>
-                  <li>NOTE: The <code>aria-roledescription</code> value is defined using the language of the page and should be localized by the author.</li>
+                  <li>要素を「region」ではなく「carousel」として識別するように支援技術に通知します。</li>
+                  <li>支援技術が役割をレンダリングする方法に影響を与えますが、ランドマーク領域への移動のような機能には影響しません。</li>
+                  <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="carousel-region-aria-label">
               <td></td>
               <th scope="row">
-                <code>aria-label="Highlighted television shows"</code>
+                <code>aria-label="ハイライトされたテレビ番組"</code>
               </th>
               <td>
                 <code>section</code>
               </td>
-              <td>Provides a label that describes the content in the carousel region.</td>
+              <td>カルーセル領域の内容を説明するラベルを提供します。</td>
             </tr>
             <tr data-test-id="carousel-aria-live">
               <td></td>
@@ -415,9 +417,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Applied to a <code>div</code> element that contains all the slides.</li>
-                  <li>Identifies the container element as a live region that is in the &quot;off&quot; state, meaning assistive technology users are not informed about changes to the region.</li>
-                  <li>The live region is off when the carousel is automatically rotating.</li>
+                  <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
+                  <li>コンテナ要素を「off」状態のライブ領域として識別し、支援技術のユーザーは領域の変更について通知されません。</li>
+                  <li>カルーセルが自動的に回転している場合、ライブ領域はオフになります。</li>
                 </ul>
               </td>
             </tr>
@@ -431,9 +433,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Applied to a <code>div</code> element that contains all the slides.</li>
-                  <li>Identifies the container element as a live region in the &quot;polite&quot; state, meaning assistive technology users are informed about changes to the region at the next available opportunity.</li>
-                  <li>This causes screen readers to automatically announce the content of slides when the next and previous slide buttons are activated.</li>
+                  <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
+                  <li>コンテナ要素を「polite」状態のライブ領域として識別し、支援技術のユーザーは次の利用可能な機会に領域の変更について通知されます。</li>
+                  <li>これにより、次のスライドボタンと前のスライドボタンがアクティブになったときにスクリーンリーダーが自動的にスライドの内容をアナウンスします。</li>
                 </ul>
               </td>
             </tr>
@@ -447,24 +449,24 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Applied to each of the elements that contains the content of a single slide.</li>
-                  <li>Enables assistive technology users to perceive the boundaries of a slide.</li>
+                  <li>単一のスライドの内容を含む各要素に適用されます。</li>
+                  <li>支援技術のユーザーがスライドの境界を知覚できるようにします。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="carousel-group-aria-roledescription">
               <td></td>
               <th scope="row">
-                <code>aria-roledescription="slide"</code>
+                <code>aria-roledescription="スライド"</code>
               </th>
               <td>
                 <code>div.carousel-item</code>
               </td>
               <td>
                 <ul>
-                  <li>Informs assistive technologies to identify the element as a &quot;slide&quot; rather than a &quot;group.&quot;</li>
-                  <li>Affects how the assistive technology renders the role but does not remove any assistive technology functions related to <code>group</code> elements.</li>
-                  <li>NOTE: The <code>aria-roledescription</code> value is defined using the language of the page and should be localized by the author.</li>
+                  <li>要素を「group」ではなく「スライド」として識別するように支援技術に通知します。</li>
+                  <li>支援技術が役割をレンダリングする方法に影響を与えますが、<code>group</code>要素に関連する支援技術の機能を削除することはありません。</li>
+                  <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                 </ul>
               </td>
             </tr>
@@ -478,10 +480,10 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Provides each slide with a distinct label that helps the user understand which of the 6 slides is displayed.</li>
+                  <li>6つのスライドのうちどれが表示されているかをユーザーに理解させるための独自のラベルを各スライドに提供します。</li>
                   <li>
-                    Note: Normally, including set position and size information in an accessible name is not appropriate.
-                    An exception is helpful in this implementation because group elements do not support <code>aria-setsize</code> or <code>aria-posinset</code>.
+                    注: 通常、アクセス可能な名前にセットの位置とサイズの情報を含めることは適切ではありません。
+                    例外として、この実装ではgroup要素が<code>aria-setsize</code>または<code>aria-posinset</code>をサポートしていないため、この情報が役立ちます。
                   </li>
                 </ul>
               </td>
@@ -494,7 +496,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td>
                 <code>button</code>
               </td>
-              <td>Defines the accessible name for the pause auto-rotation button and the next and previous slide buttons.</td>
+              <td>一時停止自動回転ボタンおよび次および前のスライドボタンのアクセス可能な名前を定義します。</td>
             </tr>
             <tr data-test-id="carousel-button-aria-controls">
               <td></td>
@@ -506,8 +508,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Identifies the content on the page that the button controls.</li>
-                  <li>Refers to the <code>div</code> that contains all the slides.</li>
+                  <li>ボタンが制御するページ上のコンテンツを識別します。</li>
+                  <li>すべてのスライドを含む<code>div</code>を参照します。</li>
                 </ul>
               </td>
             </tr>
@@ -516,7 +518,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScriptとCSSのソースコード</h2>
         <ul id="css_js_files">
           <li>CSS: <a href="css/carousel-prev-next.css" type="text/css">carousel-prev-next.css</a></li>
           <li>Javascript: <a href="js/carousel-prev-next.js" type="text/javascript">carousel-prev-next.js</a></li>
@@ -524,10 +526,10 @@ <h2>JavaScript and CSS Source Code</h2>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTML Source Code</h2>
-        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+        <h2 id="sc1_label">HTMLソースコード</h2>
+        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_label sc1_start_sep" aria-label="の開始"></div>
         <pre><code id="sc1"></code></pre>
-        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_label sc1_end_sep" aria-label="の終了"></div>
         <script>
           sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index 8ce00737..b60870d4 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Auto-Rotating Image Carousel with Tabs for Slide Control Example</title>
+    <title>スライド制御のタブを持つ自動回転イメージカルーセルの例</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -18,70 +18,71 @@
     <script src="js/carousel-tablist.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
+    <nav aria-label="関連リンク" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/10">Related Issues</a></li>
-        <li><a href="../carousel-pattern.html">Design Pattern</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/10">関連するIssues</a></li>
+        <li><a href="../carousel-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>Auto-Rotating Image Carousel with Tabs for Slide Control Example</h1>
+      <h1>スライド制御のタブを持つ自動回転イメージカルーセルの例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <p>
-          The following example implementation of the <a href="../carousel-pattern.html">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
-          This example also illustrates how to use the <a href="../../tabs/tabs-pattern.html">tabs pattern</a> to provide users with a way to skip slides in the sequence by directly choosing which one to view.
-          Navigation among slides is provided by a series of circular buttons that function as tabs and are rendered over the rotating slides.
-          Automatic rotation stops when users move focus to any control or link in the carousel or hover the mouse over carousel content.
-          The accessibility features section that follows the example describes these aspects of the design in detail.
+          以下の<a href="../carousel-pattern.html">カルーセルパターン</a>の実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。
+          この例は、シーケンス内のスライドをスキップして直接表示するスライドを選択する方法として、<a href="../../tabs/tabs-pattern.html">タブパターン</a>の使用方法も示しています。
+          スライド間のナビゲーションは、タブとして機能する一連の円形のボタンによって提供され、回転するスライドの上にレンダリングされます。
+          ユーザーがカルーセル内の任意のコントロールやリンクにフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると、自動回転が停止します。
+          このデザインの詳細を説明するアクセシビリティ機能のセクションが、例の後に続きます。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下があります：</p>
         <ul>
-          <li><a href="carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with buttons for previous and next slide.</li>
+          <li><a href="carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセル:</a> ページの読み込み時に自動的に回転するカルーセルの必要なアクセシビリティ機能を示す基本的なイメージカルーセルで、前のスライドと次のスライドのボタンで表示するスライドを選択することができます。</li>
         </ul>
       </section>
 
       <section>
-        <h2>Example Options</h2>
+        <h2>例のオプション</h2>
 
         <fieldset class="carousel-options">
-          <legend>Carousel View and Behavior Options</legend>
+          <legend>カルーセルの表示と動作のオプション</legend>
 
           <label for="accessible-controls">
             <input type="checkbox" id="accessible-controls" value="moreaccessible" aria-describedby="accessible-controls-desc">
-            Display controls and captions outside of image
+            画像の外にコントロールとキャプションを表示
           </label>
-          <p id="accessible-controls-desc">This option is more accessible than rendering controls and captions within the image, because controls are easier to perceive and captions are easier to read without rotating images behind them.</p>
+          <p id="accessible-controls-desc">このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルであり、コントロールが認識しやすく、回転する画像の背後にないキャプションが読みやすくなります。</p>
 
           <label for="rotation-paused">
             <input type="checkbox" id="rotation-paused" value="paused" aria-describedby="rotation-paused-desc">
-            Pause auto-rotation on load (<a href="javascript:history.go(0)"><img class="reload" src="images/reload-icon.png" alt="">reload needed</a>)
+            読み込み時に自動回転を一時停止 (<a href="javascript:history.go(0)"><img class="reload" src="images/reload-icon.png" alt="">再読み込みが必要</a>)
           </label>
           <p id="rotation-paused-desc">
-            This option controls whether the carousel is paused or playing on page load.
-            The paused option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation, but allows users to start auto-rotation using the start/stop button.
+            このオプションは、ページの読み込み時にカルーセルが一時停止しているか再生中かを制御します。
+            一時停止オプションは、視覚障害のあるユーザーや自動回転によって気が散ったり混乱したりする人々のアクセシビリティを向上させますが、start/stopボタンを使用して自動回転を開始することができます。
           </p>
-          <p>Note: If the user has chosen reduced motion in system settings, auto-rotation will always be paused on load.</p>
+          <p>注: ユーザーがシステム設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止します。</p>
 
           <label for="rotation-disabled">
             <input type="checkbox" id="rotation-disabled" value="norotate" aria-describedby="rotation-disabled-desc">
-            Disable auto-rotation
+            自動回転を無効にする
           </label>
           <p id="rotation-disabled-desc">
-            This option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation by disabling the auto-rotation feature and removing the start/stop button from the user interface.
-            Users can use the tablist to manually navigate through the slides.
+            このオプションは、自動回転機能を無効にし、ユーザーインターフェースからstart/stopボタンを削除することで、視覚障害のあるユーザーや自動回転によって気が散ったり混乱したりする人々のアクセシビリティを向上させます。
+            ユーザーはタブリストを使用してスライドを手動でナビゲートすることができます。
           </p>
         </fieldset>
       </section>
 
       <section>
         <div class="example-header">
-          <h2 id="ex_label">Example</h2>
+          <h2 id="ex_label">例</h2>
         </div>
-        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_label ex_start_sep" aria-label="の開始"></div>
         <div id="ex1">
-          <section id="myCarousel" class="carousel-tablist" aria-roledescription="carousel" aria-label="Highlighted television shows">
+          <section id="myCarousel" class="carousel-tablist" aria-roledescription="カルーセル" aria-label="注目のテレビ番組">
             <div class="carousel-inner">
               <div class="controls">
                 <button class="rotation" type="button">
@@ -98,43 +99,43 @@ <h2 id="ex_label">Example</h2>
                 </button>
 
                 <div class="tab-wrapper">
-                  <div role="tablist" aria-label="Slides">
-                    <button id="carousel-tab-1" type="button" role="tab" aria-label="Slide 1" aria-selected="true" aria-controls="carousel-item-1">
+                  <div role="tablist" aria-label="スライド">
+                    <button id="carousel-tab-1" type="button" role="tab" aria-label="スライド 1" aria-selected="true" aria-controls="carousel-item-1">
                       <svg width="34" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                         <circle class="border" cx="16" cy="15" r="10" />
                         <circle class="tab-background" cx="16" cy="15" r="8" />
                         <circle class="tab" cx="16" cy="15" r="6" />
                       </svg>
                     </button>
-                    <button id="carousel-tab-2" type="button" role="tab" tabindex="-1" aria-label="Slide 2" aria-selected="false" aria-controls="carousel-item-2">
+                    <button id="carousel-tab-2" type="button" role="tab" tabindex="-1" aria-label="スライド 2" aria-selected="false" aria-controls="carousel-item-2">
                       <svg width="34" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                         <circle class="border" cx="16" cy="15" r="10" />
                         <circle class="tab-background" cx="16" cy="15" r="8" />
                         <circle class="tab" cx="16" cy="15" r="6" />
                       </svg>
                     </button>
-                    <button id="carousel-tab-3" type="button" role="tab" tabindex="-1" aria-label="Slide 3" aria-selected="false" aria-controls="carousel-item-3">
+                    <button id="carousel-tab-3" type="button" role="tab" tabindex="-1" aria-label="スライド 3" aria-selected="false" aria-controls="carousel-item-3">
                       <svg width="34" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                         <circle class="border" cx="16" cy="15" r="10" />
                         <circle class="tab-background" cx="16" cy="15" r="8" />
                         <circle class="tab" cx="16" cy="15" r="6" />
                       </svg>
                     </button>
-                    <button id="carousel-tab-4" type="button" role="tab" tabindex="-1" aria-label="Slide 4" aria-selected="false" aria-controls="carousel-item-4">
+                    <button id="carousel-tab-4" type="button" role="tab" tabindex="-1" aria-label="スライド 4" aria-selected="false" aria-controls="carousel-item-4">
                       <svg width="34" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                         <circle class="border" cx="16" cy="15" r="10" />
                         <circle class="tab-background" cx="16" cy="15" r="8" />
                         <circle class="tab" cx="16" cy="15" r="6" />
                       </svg>
                     </button>
-                    <button id="carousel-tab-5" type="button" role="tab" tabindex="-1" aria-label="Slide 5" aria-selected="false" aria-controls="carousel-item-5">
+                    <button id="carousel-tab-5" type="button" role="tab" tabindex="-1" aria-label="スライド 5" aria-selected="false" aria-controls="carousel-item-5">
                       <svg width="34" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                         <circle class="border" cx="16" cy="15" r="10" />
                         <circle class="tab-background" cx="16" cy="15" r="8" />
                         <circle class="tab" cx="16" cy="15" r="6" />
                       </svg>
                     </button>
-                    <button id="carousel-tab-6" type="button" role="tab" tabindex="-1" aria-label="Slide 6" aria-selected="false" aria-controls="carousel-item-6">
+                    <button id="carousel-tab-6" type="button" role="tab" tabindex="-1" aria-label="スライド 6" aria-selected="false" aria-controls="carousel-item-6">
                       <svg width="34" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                         <circle class="border" cx="16" cy="15" r="10" />
                         <circle class="tab-background" cx="16" cy="15" r="8" />
@@ -146,56 +147,56 @@ <h2 id="ex_label">Example</h2>
               </div>
 
               <div id="myCarousel-items" class="carousel-items playing" aria-live="off">
-                <div class="carousel-item active" id="carousel-item-1" role="tabpanel" aria-roledescription="slide" aria-label="1 of 6">
+                <div class="carousel-item active" id="carousel-item-1" role="tabpanel" aria-roledescription="スライド" aria-label="1 / 6">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-1">
-                      <img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
+                      <img src="images/amsterdamslide__800x600.jpg" alt="アムステルダムでのウォーキングツアー">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> Dynamic Europe: Amsterdam, Prague, Berlin </a>
+                      <a href="#"> ダイナミックヨーロッパ: アムステルダム、プラハ、ベルリン </a>
                     </h3>
 
                     <div class="hidden-xs hidden-sm">
-                      <p><span class="contrast">7 pm Tuesday, March 3, on TV</span></p>
+                      <p><span class="contrast">3月3日火曜日 7 pm、テレビで</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-2" role="tabpanel" aria-roledescription="slide" aria-label="2 of 6">
+                <div class="carousel-item" id="carousel-item-2" role="tabpanel" aria-roledescription="スライド" aria-label="2 / 6">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-2">
-                      <img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall">
+                      <img src="images/lands-endslide__800x600.jpg" alt="コーンウォールのランドエンド">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> Travel to Southwest England and Paris </a>
+                      <a href="#"> イングランド南西部とパリへの旅 </a>
                     </h3>
 
                     <div>
-                      <p><span class="contrast">Sept. 14 to Sept. 24 or 27</span></p>
+                      <p><span class="contrast">9月14日から9月24日または27日まで</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-3" role="tabpanel" aria-roledescription="slide" aria-label="3 of 6">
+                <div class="carousel-item" id="carousel-item-3" role="tabpanel" aria-roledescription="スライド" aria-label="3 / 6">
                   <div class="carousel-image">
                     <a href="#!" id="carousel-image-3">
-                      <img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
+                      <img src="images/trustslide-2__800x600.jpg" alt="母と娘がノートパソコンでダニエルタイガーゲームをプレイ。">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> Great Children's Programming on Public TV </a>
+                      <a href="#"> 公共テレビの素晴らしい子供向け番組 </a>
                     </h3>
 
                     <div></div>
@@ -204,36 +205,36 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-4" role="tabpanel" aria-roledescription="slide" aria-label="4 of 6">
+                <div class="carousel-item" id="carousel-item-4" role="tabpanel" aria-roledescription="スライド" aria-label="4 / 6">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-4">
-                      <img src="images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.">
+                      <img src="images/foyleswarslide__800x600.jpg" alt="スーツとフェドラ帽をかぶった男と、髪を整えた女がカメラを真剣に見つめている。">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> Foyle&#8217;s War Revisited </a>
+                      <a href="#"> フォイルの戦争再訪 </a>
                     </h3>
 
                     <div>
-                      <p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peek at the final season.</span></p>
+                      <p><span class="contrast">3月8日日曜日 8 pm、テレビで: 最終シーズンの先行公開。</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-5" role="tabpanel" aria-roledescription="slide" aria-label="5 of 6">
+                <div class="carousel-item" id="carousel-item-5" role="tabpanel" aria-roledescription="スライド" aria-label="5 / 6">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-5">
-                      <img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
+                      <img src="images/britcomdavidslide__800x600.jpg" alt="WILL-TVのホスト、デビッド・シールとともに英国の旗。">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> Great Britain Vote: 7 pm Sat. </a>
+                      <a href="#"> グレートブリテン投票: 土曜日 7 pm </a>
                     </h3>
 
                     <div></div>
@@ -242,20 +243,20 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-6" role="tabpanel" aria-roledescription="slide" aria-label="6 of 6">
+                <div class="carousel-item" id="carousel-item-6" role="tabpanel" aria-roledescription="スライド" aria-label="6 / 6">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-6">
-                      <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
+                      <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardenerのパネリストがセットに">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> Mid-American Gardener: Thursdays at 7 pm </a>
+                      <a href="#"> ミッドアメリカンガーデナー: 木曜日 7 pm </a>
                     </h3>
 
                     <div class="hidden-xs hidden-sm">
-                      <p><span class="contrast">Watch the latest episodes.</span></p>
+                      <p><span class="contrast">最新のエピソードをご覧ください。</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
@@ -269,91 +270,91 @@ <h3>
 
           <div class="col-sm-1"></div>
         </div>
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_label ex_end_sep" aria-label="の終了"></div>
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
-        <h3>Controlling Automatic Slide Rotation</h3>
+        <h2>アクセシビリティ機能</h2>
+        <h3>自動スライド回転の制御</h3>
         <p>
-          Users can stop and start slide rotation, which is an essential aspect of accessibility of the carousel for a variety of people with disabilities.
-          People with low vision or a cognitive disability that affects visual processing or reading benefit from being able to control slide rotation so they have sufficient time to explore slide content.
-          Similarly, since screen reader users cannot perceive automatic rotation, it can make reading the page confusing and disorienting.
-          For example, when slides are automatically rotating, a screen reader user may read an element on slide one, execute a screen reader command to read the next element, and, instead of hearing the next element on slide one, hear an element from slide 2 without any knowledge that the element just announced is from an entirely new context.
+          ユーザーはスライドの回転を停止および開始することができ、これはさまざまな障害を持つ人々のカルーセルのアクセシビリティの重要な側面です。
+          視覚的な処理や読書に影響を与える認知障害を持つ低視力者や人々は、スライドの内容を探索するのに十分な時間を持つためにスライドの回転を制御できることで利益を得ることができます。
+          同様に、スクリーンリーダーのユーザーが自動回転を知覚できないため、ページの読み取りが混乱しやすくなります。
+          例えば、スライドが自動的に回転している場合、スクリーンリーダーのユーザーはスライド1の要素を読み、次の要素を読むためのスクリーンリーダーコマンドを実行するかもしれません。そして、スライド1の次の要素を聞く代わりに、完全に新しいコンテキストからの要素を知らずにスライド2からの要素を聞くことになります。
         </p>
-        <p>This example includes the following features for giving users control over slide rotation:</p>
+        <p>この例には、ユーザーがスライドの回転を制御するための以下の機能が含まれています:</p>
         <ul>
-          <li>If operating system preferences have been set for reduced motion or disabling animations, the auto-rotation is initially paused.</li>
+          <li>オペレーティングシステムの設定が動きの減少またはアニメーションの無効化に設定されている場合、自動回転は初めて一時停止されます。</li>
           <li>
-            Hovering the mouse over any carousel content pauses automatic rotation.
-            Automatic rotation resumes when the mouse moves away from the carousel unless another condition that prevents rotation, such as keyboard focus, has been triggered.
+            カルーセルの任意のコンテンツにマウスをホバーすると、自動回転が一時停止します。
+            キーボードフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、マウスがカルーセルから移動すると自動回転が再開されます。
           </li>
           <li>
-            Moving keyboard focus to any of the carousel content, including the tab elements, pauses automatic rotation.
-            Automatic rotation only resumes if the user explicitly activates the <q>Play</q> button.
+            タブ要素を含むカルーセルの任意のコンテンツにキーボードフォーカスを移動すると、自動回転が一時停止します。
+            ユーザーが明示的に<q>再生</q>ボタンをアクティブにしない限り、自動回転は再開されません。
           </li>
           <li>
-            The carousel also contains a rotation control button that can stop and start automatic rotation.
+            カルーセルには、自動回転を停止および開始できる回転制御ボタンも含まれています。
             <ul>
-              <li>The rotation control button is the first element in the screen reader reading order.</li>
-              <li>The rotation control button is always visible so it is available to all users whether they are interacting via a mouse, keyboard, assistive technology, or touch.</li>
-              <li>If the carousel is rotating, the button's accessible name is <q>Stop Automatic Slide Show</q>, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
-              <li>If the carousel is not rotating, the accessible name of the button is <q>Start Automatic Slide Show</q>.</li>
-              <li>If a user activates the rotation control button to start rotation it is assumed the user wants auto-rotation to start immediately and focus or hover states within the carousel are ignored.. The rotation will only stop if the button is activated again,</li>
+              <li>回転制御ボタンは、スクリーンリーダーの読み取り順序の最初の要素です。</li>
+              <li>回転制御ボタンは常に表示されているため、マウス、キーボード、補助技術、またはタッチを介して対話しているすべてのユーザーに利用可能です。</li>
+              <li>カルーセルが回転している場合、ボタンのアクセス可能な名前は<q>自動スライドショーを停止</q>となり、スライドが変更されていることをスクリーンリーダーユーザーに通知するとともに、変更を停止する方法を提供します。</li>
+              <li>カルーセルが回転していない場合、ボタンのアクセス可能な名前は<q>自動スライドショーを開始</q>となります。</li>
+              <li>ユーザーが回転制御ボタンをアクティブにして回転を開始する場合、ユーザーが自動回転をすぐに開始したいと考えていると仮定され、カルーセル内のフォーカスまたはホバー状態は無視されます。回転は、ボタンが再びアクティブにされる場合を除いて、停止することはありません。</li>
             </ul>
           </li>
           <li>
-            The example includes an option to completely disable automatic slide rotation.
-            When this option is selected the start/stop button is not rendered and slides can only be rotated through activation of the tab controls.
+            この例には、自動スライド回転を完全に無効にするオプションが含まれています。
+            このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドはタブコントロールのアクティベーションを通じてのみ回転できます。
           </li>
         </ul>
-        <h3>Color Contrast of Text and Rotation Controls</h3>
+        <h3>テキストと回転コントロールのカラーコントラスト</h3>
         <p>
-          In the view of this carousel where the controls and captions are displayed inside the image, background images could cause color contrast for the controls and text to become insufficient.
-          However, this view includes the following features to prevent this potential problem and ensure it meets WCAG 2.1 color contrast requirements:
+          このカルーセルのビューでコントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストのカラーコントラストが不十分になる可能性があります。
+          ただし、このビューには、WCAG 2.1のカラーコントラスト要件を満たすための次の機能が含まれています:
         </p>
         <ul>
           <li>
-            When the tabs controlling the rendering of slides are inside the image, the tabs have foreground and background colors that meet WCAG 2.1 color contrast requirements.
-            In addition, the focus styling uses SVG images that make the focus indicator highly visible when a control receives keyboard focus.
+            スライドのレンダリングを制御するタブが画像内にある場合、タブにはWCAG 2.1のカラーコントラスト要件を満たす前景色と背景色があります。
+            さらに、フォーカススタイリングは、コントロールがキーボードフォーカスを受け取るときにフォーカスインジケーターが非常に目立つようにするSVG画像を使用しています。
           </li>
-          <li>The transparency of the caption area is decreased so the caption text meets the WCAG 2.1 color contrast requirements.</li>
+          <li>キャプションエリアの透明度が減少して、キャプションテキストがWCAG 2.1のカラーコントラスト要件を満たすようになります。</li>
         </ul>
 
         <p>
-          One way to avoid the color contrast issues of controls and text inside the image is to move them to outside the image.
-          Moving the controls and text to a solid background makes it easier for the author to control color contrast and for the user to perceive them.
-          An example of this technique is one of the view options.
+          画像内のコントロールとテキストのカラーコントラストの問題を回避する方法の1つは、それらを画像の外に移動することです。
+          コントロールとテキストを固定背景に移動することで、著者がカラーコントラストを制御し、ユーザーがそれらを知覚するのが容易になります。
+          この技術の例は、ビューオプションの1つです。
         </p>
 
-        <h3>Focus Styling of the Tablist and Tabs</h3>
+        <h3>TablistとTabsのフォーカススタイリング</h3>
         <ul>
-          <li>When a tab receives focus, the entire tab list is also highlighted with a border as an affordance that indicates to users that arrow keys are used to navigate among controls in the group.</li>
-          <li>The CSS border width used for focus styling is changed from 0 to 2 pixels when the control receives focus to support visibility of focus when operating system high contrast options are enabled.</li>
+          <li>タブがフォーカスを受け取ると、タブリスト全体もボーダーでハイライトされ、ユーザーにグループ内のコントロール間を移動するために矢印キーが使用されることを示す手がかりが提供されます。</li>
+          <li>フォーカススタイリングに使用されるCSSボーダーの幅は、コントロールがフォーカスを受け取るときに0ピクセルから2ピクセルに変更され、オペレーティングシステムの高コントラストオプションが有効になっているときにフォーカスの可視性をサポートします。</li>
         </ul>
-        <h3>Screen Reader Announcement of Slide Changes</h3>
+        <h3>スライド変更のスクリーンリーダーのアナウンスメント</h3>
         <p>
-          When automatic rotation is turned off, the carousel slide content is included in a live region.
-          This makes it easier for screen reader users to scan through the carousel slides.
-          When screen reader users activate a new tab, the new slide content is announced, giving users immediate feedback that helps them determine whether or not to interact with the content.
-          Very importantly, if automatic rotation is turned on, the live region is disabled.
-          If it were not, the page would become unusable as announcements of the continuously changing content constantly interrupt anything else the user is reading.
+          自動回転がオフになっている場合、カルーセルスライドのコンテンツはライブリージョンに含まれています。
+          これにより、スクリーンリーダーのユーザーがカルーセルのスライドをスキャンするのが容易になります。
+          スクリーンリーダーのユーザーが新しいタブをアクティブにすると、新しいスライドのコンテンツがアナウンスされ、ユーザーがコンテンツと対話するかどうかを判断するための即時のフィードバックが提供されます。
+          非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になります。
+          そうでなければ、継続的に変更されるコンテンツのアナウンスメントがユーザーが読んでいる他のものを常に中断するため、ページは使用できなくなります。
         </p>
         <p>
-          Note that making a tab panel live is not recommended for typical tabs.
-          In the carousel use case, where the primary intent is quick, light-weight scanning of content, the live region is used to simulate the type of experience that non-screen reader users have with auto-rotation.
+          タブパネルをライブにすることは、典型的なタブの場合には推奨されません。
+          主な目的がコンテンツのクイックで軽量なスキャンであるカルーセルの使用ケースでは、ライブリージョンは、非スクリーンリーダーユーザーが自動回転で持っているタイプの経験をシミュレートするために使用されます。
         </p>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
         <section>
-          <h3 id="kbd_label_1">Rotation Control Button</h3>
+          <h3 id="kbd_label_1">回転制御ボタン</h3>
           <table aria-labelledby="kbd_label_1 kbd_label" class="def">
             <thead>
               <tr>
-                <th>Key</th>
-                <th>Function</th>
+                <th>キー</th>
+                <th>機能</th>
               </tr>
             </thead>
             <tbody>
@@ -361,26 +362,26 @@ <h3 id="kbd_label_1">Rotation Control Button</h3>
                 <th><kbd>Tab</kbd></th>
                 <td>
                   <ul>
-                    <li>Moves focus through interactive elements in the carousel.</li>
-                    <li>Rotation control button and tab list precede the slide content in the <kbd>Tab</kbd> sequence.</li>
+                    <li>カルーセル内のインタラクティブな要素を通してフォーカスを移動します。</li>
+                    <li>回転制御ボタンとタブリストは、<kbd>Tab</kbd>の順序でスライドコンテンツの前に来ます。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="rotation-enter-or-space-toggle">
-                <th><kbd>Enter</kbd> or <kbd>Space</kbd></th>
-                <td>Toggle automatic rotation of slides in the carousel.</td>
+                <th><kbd>Enter</kbd> または <kbd>Space</kbd></th>
+                <td>カルーセル内のスライドの自動回転を切り替えます。</td>
               </tr>
             </tbody>
           </table>
         </section>
 
         <section>
-          <h3 id="kbd_label_2">Tabs</h3>
+          <h3 id="kbd_label_2">タブ</h3>
           <table aria-labelledby="kbd_label_2" class="def">
             <thead>
               <tr>
-                <th>Key</th>
-                <th>Function</th>
+                <th>キー</th>
+                <th>機能</th>
               </tr>
             </thead>
             <tbody>
@@ -388,11 +389,8 @@ <h3 id="kbd_label_2">Tabs</h3>
                 <th><kbd>Tab</kbd></th>
                 <td>
                   <ul>
-                    <li>
-                      When focus moves into the <code>tablist</code>, places focus on the active <code>tab</code> element.
-                      Each slide in the carousel is controlled by a <code>tab</code>.
-                    </li>
-                    <li>When the tab list contains the focus, moves focus to the next element in the <kbd>tab</kbd> sequence, which is a link in the currently shown slide.</li>
+                    <li>フォーカスが<code>tablist</code>に移動すると、アクティブな<code>tab</code>要素にフォーカスを置きます。カルーセル内の各スライドは<code>tab</code>によって制御されます。</li>
+                    <li>タブリストがフォーカスを持っている場合、現在表示されているスライドのリンクである<kbd>tab</kbd>の順序で次の要素にフォーカスを移動します。</li>
                   </ul>
                 </td>
               </tr>
@@ -400,9 +398,9 @@ <h3 id="kbd_label_2">Tabs</h3>
                 <th><kbd>Right Arrow</kbd></th>
                 <td>
                   <ul>
-                    <li>Moves focus to the next tab.</li>
-                    <li>If focus is on the last tab, moves focus to the first tab.</li>
-                    <li>Shows the slide associated with the newly focused tab.</li>
+                    <li>次のタブにフォーカスを移動します。</li>
+                    <li>フォーカスが最後のタブにある場合、最初のタブにフォーカスを移動します。</li>
+                    <li>新しくフォーカスされたタブに関連付けられたスライドを表示します。</li>
                   </ul>
                 </td>
               </tr>
@@ -410,19 +408,19 @@ <h3 id="kbd_label_2">Tabs</h3>
                 <th><kbd>Left Arrow</kbd></th>
                 <td>
                   <ul>
-                    <li>Moves focus to the previous tab.</li>
-                    <li>If focus is on the first tab, moves focus to the last tab.</li>
-                    <li>Shows the slide associated with the newly focused tab.</li>
+                    <li>前のタブにフォーカスを移動します。</li>
+                    <li>フォーカスが最初のタブにある場合、最後のタブにフォーカスを移動します。</li>
+                    <li>新しくフォーカスされたタブに関連付けられたスライドを表示します。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="key-home">
                 <th><kbd>Home</kbd></th>
-                <td>Moves focus to the first tab and shows the first slide.</td>
+                <td>最初のタブにフォーカスを移動し、最初のスライドを表示します。</td>
               </tr>
               <tr data-test-id="key-end">
                 <th><kbd>End</kbd></th>
-                <td>Moves focus to the last tab and shows the last slide.</td>
+                <td>最後のタブにフォーカスを移動し、最後のスライドを表示します。</td>
               </tr>
             </tbody>
           </table>
@@ -430,16 +428,16 @@ <h3 id="kbd_label_2">Tabs</h3>
       </section>
 
       <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+        <h2 id="rps_label">役割、プロパティ、状態、およびTabindex属性</h2>
         <section>
-          <h3 id="rps_label_1">Rotation Control</h3>
+          <h3 id="rps_label_1">回転制御</h3>
           <table aria-labelledby="rps_label_1 rps_label" class="data attributes">
             <thead>
               <tr>
-                <th scope="col">Role</th>
-                <th scope="col">Attribute</th>
-                <th scope="col">Element</th>
-                <th scope="col">Usage</th>
+                <th scope="col">役割</th>
+                <th scope="col">属性</th>
+                <th scope="col">要素</th>
+                <th scope="col">使用法</th>
               </tr>
             </thead>
             <tbody>
@@ -452,10 +450,10 @@ <h3 id="rps_label_1">Rotation Control</h3>
                   <code>button</code>
                 </td>
                 <td>
-                  The accessible name changes to reflect the action the button will perform:
+                  アクセス可能な名前は、ボタンが実行するアクションを反映して変更されます：
                   <ul>
-                    <li>If automatic rotation is Paused, the label is "Start automatic slide show".</li>
-                    <li>If the carousel is rotating automatically, the label is "Stop automatic slide show".</li>
+                    <li>自動回転が一時停止している場合、ラベルは「自動スライドショーを開始」です。</li>
+                    <li>カルーセルが自動的に回転している場合、ラベルは「自動スライドショーを停止」です。</li>
                   </ul>
                 </td>
               </tr>
@@ -463,27 +461,27 @@ <h3 id="rps_label_1">Rotation Control</h3>
           </table>
         </section>
         <section>
-          <h3 id="rps_label_2">Tabs</h3>
+          <h3 id="rps_label_2">タブ</h3>
           <table aria-labelledby="rps_label_2 rps_label" class="data attributes">
             <thead>
               <tr>
-                <th scope="col">Role</th>
-                <th scope="col">Attribute</th>
-                <th scope="col">Element</th>
-                <th scope="col">Usage</th>
+                <th scope="col">役割</th>
+                <th scope="col">属性</th>
+                <th scope="col">要素</th>
+                <th scope="col">使用法</th>
               </tr>
             </thead>
             <tbody>
               <tr data-test-id="test-not-required">
-                <th scope="row">Implied role of <code>region</code></th>
+                <th scope="row">暗黙の役割 <code>region</code></th>
                 <td></td>
                 <td>
                   <code>section</code>
                 </td>
                 <td>
                   <ul>
-                    <li>Role <code>region</code> is implied for any <code>section</code> element that has an accessible name.</li>
-                    <li>Defines the carousel and its controls as a landmark region.</li>
+                    <li>アクセス可能な名前がある任意の<code>section</code>要素には役割<code>region</code>が暗黙的に適用されます。</li>
+                    <li>カルーセルとそのコントロールをランドマーク領域として定義します。</li>
                   </ul>
                 </td>
               </tr>
@@ -497,21 +495,21 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Informs assistive technologies to identify the element as a "carousel" rather than as a "region".</li>
-                    <li>Affects how assistive technologies render the role but does not affect functionality, such as commands for navigating to landmark regions.</li>
-                    <li>NOTE: The <code>aria-roledescription</code> value is defined using the language of the page and should be localized by the author.</li>
+                    <li>要素を「領域」としてではなく「カルーセル」として識別するように支援技術に通知します。</li>
+                    <li>ランドマーク領域への移動のような機能には影響せず、支援技術が役割をどのようにレンダリングするかに影響します。</li>
+                    <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="carousel-region-aria-label">
                 <td></td>
                 <th scope="row">
-                  <code>aria-label="Highlighted television shows"</code>
+                  <code>aria-label="注目のテレビ番組"</code>
                 </th>
                 <td>
                   <code>section</code>
                 </td>
-                <td>Provides a label that describes the content in the carousel region.</td>
+                <td>カルーセル領域の内容を説明するラベルを提供します。</td>
               </tr>
               <tr data-test-id="carousel-aria-live">
                 <td></td>
@@ -523,9 +521,9 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Applied to a <code>div</code> element that contains all the slides.</li>
-                    <li>Identifies the container as a live region that is in the "off" state, meaning assistive technology users are not automatically informed of changes to the region.</li>
-                    <li>The live region is off when the carousel is automatically rotating.</li>
+                    <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
+                    <li>コンテナを「off」状態のライブ領域として識別し、領域の変更が自動的に通知されないことを意味します。</li>
+                    <li>カルーセルが自動的に回転している場合、ライブ領域はオフになります。</li>
                   </ul>
                 </td>
               </tr>
@@ -539,9 +537,9 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Applied to a <code>div</code> element that contains all the slides.</li>
-                    <li>Identifies the container element as a live region in the "polite" state, meaning assistive technology users are informed of changes to the region at the next available opportunity.</li>
-                    <li>This causes screen readers to automatically announce the content of a slide when its associated tab is activated.</li>
+                    <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
+                    <li>コンテナ要素を「polite」状態のライブ領域として識別し、次の利用可能な機会に領域の変更が通知されることを意味します。</li>
+                    <li>関連するタブがアクティブになると、スクリーンリーダーが自動的にスライドの内容をアナウンスします。</li>
                   </ul>
                 </td>
               </tr>
@@ -553,17 +551,17 @@ <h3 id="rps_label_2">Tabs</h3>
                 <td>
                   <code>div</code>
                 </td>
-                <td>Indicates that the element serves as a container for a set of tabs.</td>
+                <td>要素がタブのセットのコンテナとして機能することを示します。</td>
               </tr>
               <tr data-test-id="tablist-aria-label">
                 <td></td>
                 <th scope="row">
-                  <code>aria-label="Slides"</code>
+                  <code>aria-label="スライド"</code>
                 </th>
                 <td>
                   <code>div</code>
                 </td>
-                <td>Provides an accessible name for the tablist.</td>
+                <td>タブリストのアクセス可能な名前を提供します。</td>
               </tr>
               <tr data-test-id="tab-role">
                 <th scope="row">
@@ -575,20 +573,20 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Indicates the element serves as a tab control.</li>
-                    <li>When focused, it is automatically activated, causing its associated <code>tabpanel</code> (i.e. slide) to be displayed.</li>
+                    <li>要素がタブ制御として機能することを示します。</li>
+                    <li>フォーカスが当たると、自動的にアクティブになり、関連する<code>tabpanel</code>（すなわち、スライド）が表示されます。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="tab-aria-label">
                 <td></td>
                 <th scope="row">
-                  <code>aria-label="Slide X"</code>
+                  <code>aria-label="スライド X"</code>
                 </th>
                 <td>
                   <code>button</code>
                 </td>
-                <td>Provides an accessible name for the tab.</td>
+                <td>タブのアクセス可能な名前を提供します。</td>
               </tr>
               <tr data-test-id="tab-aria-selected">
                 <td></td>
@@ -600,8 +598,8 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Indicates the tab control is activated and its associated panel is displayed.</li>
-                    <li>Set when a tab receives focus.</li>
+                    <li>タブ制御がアクティブであり、関連するパネルが表示されていることを示します。</li>
+                    <li>タブがフォーカスを受け取ったときに設定されます。</li>
                   </ul>
                 </td>
               </tr>
@@ -615,8 +613,8 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Indicates the tab control is not active and its associated panel is <strong>NOT</strong> displayed.</li>
-                    <li>Set for all tab elements in the tab set except the for the tab associated with the currently displayed slide.</li>
+                    <li>タブ制御がアクティブでなく、関連するパネルが<strong>表示されていない</strong>ことを示します。</li>
+                    <li>現在表示されているスライドに関連するタブを除く、タブセット内のすべてのタブ要素に設定されます。</li>
                   </ul>
                 </td>
               </tr>
@@ -630,12 +628,13 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Removes the element from the page <kbd>Tab</kbd> sequence.</li>
-                    <li>Set when a tab is not selected so that only the selected tab is in the page <kbd>Tab</kbd> sequence.</li>
-                    <li>Since the tab element is an HTML <code>button</code>, the tabindex attribute is removed when a tab is selected (activated) rather than setting <code>tabindex="0"</code>.</li>
+                    <li>要素をページの<kbd>Tab</kbd>順序から削除します。</li>
+                    <li>選択されていないタブに設定され、ページの<kbd>Tab</kbd>順序に選択されたタブのみが含まれるようにします。</li>
+                    <li>タブ要素がHTMLの<code>button</code>であるため、タブが選択（アクティブ）されたときにはtabindex属性が削除され、<code>tabindex="0"</code>に設定するのではなく。</li>
                     <li>
-                      This approach to managing focus is described in the section on
-                      <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_roving_tabindex">Managing Focus Within Components Using a Roving tabindex</a>.
+                      このフォーカスの管理方法は、
+                      <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_roving_tabindex">Roving tabindexを使用したコンポーネント内のフォーカスの管理</a>
+                      のセクションで説明されています。
                     </li>
                   </ul>
                 </td>
@@ -648,7 +647,7 @@ <h3 id="rps_label_2">Tabs</h3>
                 <td>
                   <code>button</code>
                 </td>
-                <td>Refers to the <code>tabpanel</code> element associated with the tab.</td>
+                <td>タブに関連する<code>tabpanel</code>要素を参照します。</td>
               </tr>
               <tr data-test-id="tabpanel-role">
                 <th scope="row">
@@ -660,8 +659,8 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Indicates the element serves as a <code>tabpanel</code> that is controlled by its associated tab element.</li>
-                    <li>Is hidden unless its associated <code>tab</code> control is activated.</li>
+                    <li>要素が、関連するタブ要素によって制御される<code>tabpanel</code>として機能することを示します。</li>
+                    <li>関連する<code>tab</code>制御がアクティブでない限り、非表示になります。</li>
                   </ul>
                 </td>
               </tr>
@@ -675,9 +674,9 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Informs assistive technologies to identify the element as a "slide" rather than as a "tabpanel".</li>
-                    <li>Affects how assistive technologies render the role but does not affect assistive technology functionality.</li>
-                    <li>NOTE: The <code>aria-roledescription</code> value is defined using the language of the page and should be localized by the author.</li>
+                    <li>要素を「tabpanel」としてではなく「slide」として識別するように支援技術に通知します。</li>
+                    <li>支援技術の機能には影響せず、支援技術が役割をどのようにレンダリングするかに影響します。</li>
+                    <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                   </ul>
                 </td>
               </tr>
@@ -691,8 +690,8 @@ <h3 id="rps_label_2">Tabs</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>Provides an accessible name for the tab panel (slide) that indicates what position the slide is in the set of slides.</li>
-                    <li>When combined with the <code>aria-roledescription</code>, a screen reader could announce a tab panel as a slide with its position, e.g., "Slide 1 of 6".</li>
+                    <li>スライドのセット内でのスライドの位置を示すタブパネル（スライド）のアクセス可能な名前を提供します。</li>
+                    <li><code>aria-roledescription</code>と組み合わせると、スクリーンリーダーはタブパネルをその位置でアナウンスすることができます。例:「スライド1 of 6」。</li>
                   </ul>
                 </td>
               </tr>
@@ -702,7 +701,7 @@ <h3 id="rps_label_2">Tabs</h3>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScriptおよびCSSのソースコード</h2>
         <ul id="css_js_files">
           <li>CSS: <a href="css/carousel-tablist.css" type="text/css">carousel-tablist.css</a></li>
           <li>Javascript: <a href="js/carousel-tablist.js" type="text/javascript">carousel-tablist.js</a></li>
@@ -710,10 +709,10 @@ <h2>JavaScript and CSS Source Code</h2>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTML Source Code</h2>
-        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+        <h2 id="sc1_label">HTMLのソースコード</h2>
+        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_label sc1_start_sep" aria-label="の開始"></div>
         <pre><code id="sc1"></code></pre>
-        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_label sc1_end_sep" aria-label="の終了"></div>
         <script>
           sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();

From d7d60416cf5126e4db92b20218e8f1af6913143e Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Tue, 26 Sep 2023 09:36:31 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=E4=B8=80=E9=83=A8=E3=81=AE=E8=AA=9E?=
 =?UTF-8?q?=E5=8F=A5=EF=BC=88role,=20state,=20tabindex=EF=BC=89=E3=81=AE?=
 =?UTF-8?q?=E8=A8=B3=E5=87=BA=E3=82=92=E7=B5=B1=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/patterns/carousel/carousel-pattern.html    | 14 +++++++-------
 .../carousel/examples/carousel-1-prev-next.html    | 10 +++++-----
 .../carousel/examples/carousel-2-tablist.html      | 14 +++++++-------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
index 84d166c1..a518139f 100644
--- a/content/patterns/carousel/carousel-pattern.html
+++ b/content/patterns/carousel/carousel-pattern.html
@@ -100,7 +100,7 @@ <h2>キーボードのインタラクション</h2>
       </section>
 
       <section id="roles_states_properties">
-        <h2>WAI-ARIAの役割、状態、およびプロパティ</h2>
+        <h2>WAI-ARIAのロール、ステート、およびプロパティ</h2>
         <p>このセクションでは、3つのスタイルのカルーセルの要素構成について説明します：</p>
         <ul>
           <li>基本：回転、前のスライド、次のスライドのコントロールはあるが、スライドピッカーコントロールはない。</li>
@@ -113,8 +113,8 @@ <h2>WAI-ARIAの役割、状態、およびプロパティ</h2>
         <h3>基本的なカルーセルの要素</h3>
         <ul>
           <li>
-            カルーセルのコントロールとスライドの両方を含むカルーセルのコンテナ要素は、役割<a href="#region" class="role-reference">region</a>または役割<a href="#group" class="role-reference">group</a>のいずれかを持っています。
-            カルーセルコンテナの最も適切な役割は、ページの情報アーキテクチャに依存します。
+            カルーセルのコントロールとスライドの両方を含むカルーセルのコンテナ要素は、<a href="#region" class="role-reference">region</a>ロールまたは<a href="#group" class="role-reference">group</a>ロールのいずれかを持っています。
+            カルーセルコンテナの最も適切なロールは、ページの情報アーキテクチャに依存します。
             カルーセルがランドマークリージョンとして指定されるかどうかを判断するために、
             <a href="../../practices/landmark-regions/landmark-regions-practice.html">ランドマークリージョンの実践</a>
             を参照してください。
@@ -130,9 +130,9 @@ <h3>基本的なカルーセルの要素</h3>
             回転コントロールには、内部テキストまたは<a href="#aria-label" class="property-reference">aria-label</a>によって提供されるアクセシブルなラベルがあります。
             ラベルは、ボタンが実行するアクションに合わせて変更されます。例えば、「スライド回転を停止」または「スライド回転を開始」。
             ボタンが作動するとラベルが変わることで、スライドのコンテンツが自動的に変わる可能性があり、それが実際に行われていることを明確に伝えることができます。
-            ラベルが変わるため、回転コントロールには、例えば<code>aria-pressed</code>などの状態が指定されていません。
+            ラベルが変わるため、回転コントロールには、例えば<code>aria-pressed</code>などのステートが指定されていません。
           </li>
-          <li>各スライドコンテナは、役割<a href="#group" class="role-reference">group</a>を持ち、プロパティ<a href="#aria-roledescription" class="property-reference">aria-roledescription</a>を<code>slide</code>に設定しています。</li>
+          <li>各スライドコンテナは、<a href="#group" class="role-reference">group</a>ロールを持ち、プロパティ<a href="#aria-roledescription" class="property-reference">aria-roledescription</a>を<code>slide</code>に設定しています。</li>
           <li>
             各スライドにはアクセシブルな名前があります：
             <ul>
@@ -153,7 +153,7 @@ <h3>基本的なカルーセルの要素</h3>
         <h3>タブ付きカルーセルの要素</h3>
         <p>タブ付きのカルーセルの構造は、基本的なカルーセルと同じですが、以下の点が異なります：</p>
         <ul>
-          <li>各スライドコンテナは、<code>group</code>の代わりに役割<a href="#tabpanel" class="role-reference">tabpanel</a>を持ち、<code>aria-roledescription</code>プロパティを持っていません。</li>
+          <li>各スライドコンテナは、<code>group</code>の代わりに<a href="#tabpanel" class="role-reference">tabpanel</a>ロールを持ち、<code>aria-roledescription</code>プロパティを持っていません。</li>
           <li>
             <a href="../tabs/tabs-pattern.html">タブのパターン</a>を使用して実装されたスライドピッカーコントロールがあり、以下のようになります：
             <ul>
@@ -170,7 +170,7 @@ <h3>タブ付きカルーセルの要素</h3>
         <h3>グループ化されたカルーセルの要素</h3>
         <p>グループ化されたカルーセルは、基本的なカルーセルと同じ構造を持っていますが、スライドピッカーコントロールも含まれています：</p>
         <ul>
-          <li>スライドピッカーコントロールのセットは、役割<a href="#group" class="role-reference">group</a>を持つ要素に含まれています。</li>
+          <li>スライドピッカーコントロールのセットは、<a href="#group" class="role-reference">group</a>ロールを持つ要素に含まれています。</li>
           <li>ピッカーコントロールを含むグループには、コントロールの目的を識別する<a href="#aria-label" class="property-reference">aria-label</a>の値によって提供されるアクセシブルなラベルがあります。例：「表示するスライドを選択」。</li>
           <li>各ピッカーコントロールは、ネイティブのボタン要素（推奨）であるか、<a href="../button/button-pattern.html">ボタンのパターン</a>を実装しています。</li>
           <li>
diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
index aec52184..ca0a0375 100644
--- a/content/patterns/carousel/examples/carousel-1-prev-next.html
+++ b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -355,11 +355,11 @@ <h3 id="kbd_label_3">次および前のスライドボタン</h3>
       </section>
 
       <section>
-        <h2 id="rps_label">役割、プロパティ、状態、およびTabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、およびtabindex属性</h2>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
-              <th scope="col">役割</th>
+              <th scope="col">ロール</th>
               <th scope="col">属性</th>
               <th scope="col">要素</th>
               <th scope="col">使用法</th>
@@ -376,7 +376,7 @@ <h2 id="rps_label">役割、プロパティ、状態、およびTabindex属性</
               </td>
               <td>
                 <ul>
-                  <li>アクセス可能な名前を持つ任意の<code>section</code>要素には役割<code>region</code>が暗示されます。</li>
+                  <li>アクセス可能な名前を持つ任意の<code>section</code>要素には<code>region</code>ロールが暗示されます。</li>
                   <li>カルーセルとそのコントロールをランドマーク領域として定義します。</li>
                 </ul>
               </td>
@@ -392,7 +392,7 @@ <h2 id="rps_label">役割、プロパティ、状態、およびTabindex属性</
               <td>
                 <ul>
                   <li>要素を「region」ではなく「carousel」として識別するように支援技術に通知します。</li>
-                  <li>支援技術が役割をレンダリングする方法に影響を与えますが、ランドマーク領域への移動のような機能には影響しません。</li>
+                  <li>支援技術がロールをレンダリングする方法に影響を与えますが、ランドマーク領域への移動のような機能には影響しません。</li>
                   <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                 </ul>
               </td>
@@ -465,7 +465,7 @@ <h2 id="rps_label">役割、プロパティ、状態、およびTabindex属性</
               <td>
                 <ul>
                   <li>要素を「group」ではなく「スライド」として識別するように支援技術に通知します。</li>
-                  <li>支援技術が役割をレンダリングする方法に影響を与えますが、<code>group</code>要素に関連する支援技術の機能を削除することはありません。</li>
+                  <li>支援技術がロールをレンダリングする方法に影響を与えますが、<code>group</code>要素に関連する支援技術の機能を削除することはありません。</li>
                   <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                 </ul>
               </td>
diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index b60870d4..75a81133 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -428,13 +428,13 @@ <h3 id="kbd_label_2">タブ</h3>
       </section>
 
       <section>
-        <h2 id="rps_label">役割、プロパティ、状態、およびTabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、およびtabindex属性</h2>
         <section>
           <h3 id="rps_label_1">回転制御</h3>
           <table aria-labelledby="rps_label_1 rps_label" class="data attributes">
             <thead>
               <tr>
-                <th scope="col">役割</th>
+                <th scope="col">ロール</th>
                 <th scope="col">属性</th>
                 <th scope="col">要素</th>
                 <th scope="col">使用法</th>
@@ -465,7 +465,7 @@ <h3 id="rps_label_2">タブ</h3>
           <table aria-labelledby="rps_label_2 rps_label" class="data attributes">
             <thead>
               <tr>
-                <th scope="col">役割</th>
+                <th scope="col">ロール</th>
                 <th scope="col">属性</th>
                 <th scope="col">要素</th>
                 <th scope="col">使用法</th>
@@ -473,14 +473,14 @@ <h3 id="rps_label_2">タブ</h3>
             </thead>
             <tbody>
               <tr data-test-id="test-not-required">
-                <th scope="row">暗黙の役割 <code>region</code></th>
+                <th scope="row">暗黙の<code>region</code>ロール</th>
                 <td></td>
                 <td>
                   <code>section</code>
                 </td>
                 <td>
                   <ul>
-                    <li>アクセス可能な名前がある任意の<code>section</code>要素には役割<code>region</code>が暗黙的に適用されます。</li>
+                    <li>アクセス可能な名前がある任意の<code>section</code>要素には<code>region</code>ロールが暗黙的に適用されます。</li>
                     <li>カルーセルとそのコントロールをランドマーク領域として定義します。</li>
                   </ul>
                 </td>
@@ -496,7 +496,7 @@ <h3 id="rps_label_2">タブ</h3>
                 <td>
                   <ul>
                     <li>要素を「領域」としてではなく「カルーセル」として識別するように支援技術に通知します。</li>
-                    <li>ランドマーク領域への移動のような機能には影響せず、支援技術が役割をどのようにレンダリングするかに影響します。</li>
+                    <li>ランドマーク領域への移動のような機能には影響せず、支援技術がロールをどのようにレンダリングするかに影響します。</li>
                     <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                   </ul>
                 </td>
@@ -675,7 +675,7 @@ <h3 id="rps_label_2">タブ</h3>
                 <td>
                   <ul>
                     <li>要素を「tabpanel」としてではなく「slide」として識別するように支援技術に通知します。</li>
-                    <li>支援技術の機能には影響せず、支援技術が役割をどのようにレンダリングするかに影響します。</li>
+                    <li>支援技術の機能には影響せず、支援技術がロールをどのようにレンダリングするかに影響します。</li>
                     <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
                   </ul>
                 </td>

From ebc73ae38d624a46f78ef7af2a41d83a9d16081c Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Tue, 31 Oct 2023 09:40:59 +0900
Subject: [PATCH 3/5] =?UTF-8?q?carousel-pattern.html=20=E3=81=AE=E7=BF=BB?=
 =?UTF-8?q?=E8=A8=B3=E8=A6=8B=E7=9B=B4=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../patterns/carousel/carousel-pattern.html   | 132 +++++++++---------
 1 file changed, 66 insertions(+), 66 deletions(-)

diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
index a518139f..a892fefa 100644
--- a/content/patterns/carousel/carousel-pattern.html
+++ b/content/patterns/carousel/carousel-pattern.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <title>Carousel (Slide Show or Image Rotator) Pattern</title>
+    <title>カルーセル（スライドショー又は画像ローテーター）パターン</title>
 
     <!-- Core JS and CSS shared by all patterns -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -14,39 +14,39 @@
   </head>
   <body>
     <main>
-      <h1>カルーセル（スライドショーまたは画像ローテーター）パターン</h1>
+      <h1>カルーセル（スライドショー又は画像ローテーター）パターン</h1>
       <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
 
       <section id="about">
         <h2>このパターンについて</h2>
         <p>
-          カルーセルは、スライドとして参照される一連のアイテムを提示し、1つ以上のスライドのサブセットを順次表示します。
-          通常、一度に1つのスライドが表示され、ユーザーは現在のスライドを隠し、次または前のスライドを「回転」させて表示するコントロールを作動することができます。
+          カルーセルは、スライドとして参照される一連のアイテムを提示し、1 つ以上のスライドのサブセットを順次表示します。
+          通常、一度に 1 つのスライドが表示され、利用者は現在のスライドを隠し、次又は前のスライドを「回転」させて表示するコントロールを作動することができます。
           一部の実装では、ページの読み込み時に自動的に回転が開始され、すべてのスライドが表示されると自動的に停止することもあります。
           スライドには任意のタイプのコンテンツを含めることができますが、各スライドに単一の画像しか含まれていない画像カルーセルは一般的です。
         </p>
         <p>
-          すべてのユーザーがスライドの回転を簡単に制御し、スライドの回転によって不利益を受けないようにすることは、カルーセルをアクセス可能にするための本質的な側面です。
-          例えば、画面上に表示されていないスライドが誤って非表示になっている場合、スクリーンリーダーの体験は混乱しやすくなります。例えば、オフスクリーンに表示されるなど。
-          同様に、スライドが自動的に回転し、スクリーンリーダーユーザーが回転を認識していない場合、ユーザーはスライド1の要素を読み、次の要素のスクリーンリーダーコマンドを実行すると、スライド1の次の要素を聞く代わりに、完全に新しいコンテキストからの要素であるスライド2の要素を知らずに聞くことになります。
+          すべての利用者がスライドの回転を簡単に制御し、スライドの回転によって不利益を受けないようにすることは、カルーセルをアクセシブルにするための必要不可欠な側面です。
+          例えば、画面上に表示されていないスライドを隠しそこなっている場合 (例: 画面外に表示)、スクリーンリーダーの利用時に混乱や方向感の喪失を感じることがあります。
+          同様に、スライドが自動的に回転し、スクリーンリーダーの利用者がその回転を認識していない場合、利用者はスライド 1 の要素を読み、次の要素のスクリーンリーダーコマンドを実行すると、スライド 1 の次の要素を聞く代わりに、スライド 2 の要素を知らず知らずのうちに聞くことになり、その発表された要素がまったく新しい文脈からのものであることを理解できないかもしれません。
         </p>
         <p>十分な回転制御を提供するための機能には以下が含まれます：</p>
         <ul>
           <li>前のスライドと次のスライドを表示するボタン。</li>
           <li>
-            必要に応じて、特定のスライドを表示するためのコントロール、またはコントロールのグループ。
-            例えば、スライドピッカーコントロールは、tabpanel要素で表されるスライドとしてタブリスト内のタブとしてマークアップすることができます。
+            オプションとして、表示する特定のスライドを選択するコントロールやそのグループがあります。
+            具体的には、スライドピッカーコントロールは tablist の中の tab としてマークアップされ、それに対応するスライドは tabpanel 要素として示されます。
           </li>
           <li>
-            カルーセルが自動的に回転する場合、それはまた：
+            カルーセルが自動的に回転する場合、それはまた:
             <ul>
               <li>
                 回転を停止し再開するボタンを持っています。
-                これは、キーボードフォーカスやマウスを移動しないモードでの支援技術の動作をサポートするために特に重要です。
+                これは、キーボードフォーカスやマウスを移動しないモードでの支援技術の操作をサポートするために特に重要です。
               </li>
               <li>
                 キーボードフォーカスがカルーセルに入ると回転が停止します。
-                ユーザーが明示的にそれを要求しない限り、再開しません。
+                利用者が明示的にそれを要求しない限り、再開しません。
               </li>
               <li>マウスがカルーセルの上にホバーしているときいつでも回転が停止します。</li>
             </ul>
@@ -57,8 +57,8 @@ <h2>このパターンについて</h2>
       <section id="examples">
         <h2>例</h2>
         <ul>
-          <li><a href="examples/carousel-1-prev-next.html">スライドコントロールのボタンを持つ自動回転画像カルーセル：</a> ページの読み込み時に自動的に回転するカルーセルのアクセシビリティ機能を示す基本的な画像カルーセルで、ユーザーが前のスライドと次のスライドのボタンで表示するスライドを選択できます。</li>
-          <li><a href="examples/carousel-2-tablist.html">スライドコントロールのタブを持つ自動回転画像カルーセル：</a> ページの読み込み時に自動的に回転するカルーセルのアクセシビリティ機能を示す画像カルーセルで、ユーザーが一連のタブで表示するスライドを選択できます。</li>
+          <li><a href="examples/carousel-1-prev-next.html">スライドコントロールのボタンを持つ自動回転画像カルーセル:</a> 基本的な画像カルーセルで、ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示しています。また、前のスライドと次のスライドのボタンを使って表示するスライドを利用者が選択できるようにしています。</li>
+          <li><a href="examples/carousel-2-tablist.html">スライドコントロールのタブを持つ自動回転画像カルーセル:</a> ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示す画像カルーセルです。また、一連のタブで表示するスライドを利用者が選択できるようにしています。</li>
         </ul>
       </section>
 
@@ -67,15 +67,15 @@ <h2>用語</h2>
         <p>カルーセルのコンポーネントを説明するために以下の用語が使用されています。</p>
         <dl>
           <dt>スライド</dt>
-          <dd>カルーセルによって提示されるコンテンツを保持する一連のコンテンツコンテナ内の単一のコンテンツコンテナ。</dd>
+          <dd>カルーセルによって提示されるコンテンツを含む単一のコンテンツコンテナで、一連のコンテンツコンテナに含まれる。</dd>
           <dt>回転コントロール</dt>
-          <dd>自動スライド回転を停止および開始するインタラクティブな要素。</dd>
+          <dd>自動スライド回転を停止及び開始するインタラクティブな要素。</dd>
           <dt>次のスライドコントロール</dt>
-          <dd>回転シーケンスの次のスライドを表示する、しばしば矢印としてスタイル付けされたインタラクティブな要素。</dd>
+          <dd>回転シーケンスの次のスライドを表示するインタラクティブな要素で、しばしば矢印としてスタイル付けされる。</dd>
           <dt>前のスライドコントロール</dt>
-          <dd>回転シーケンスの前のスライドを表示する、しばしば矢印としてスタイル付けされたインタラクティブな要素。</dd>
+          <dd>回転シーケンスの前のスライドを表示するインタラクティブな要素で、しばしば矢印としてスタイル付けされる。</dd>
           <dt>スライドピッカーコントロール</dt>
-          <dd>ユーザーが回転シーケンスで表示する特定のスライドを選択できるようにする、しばしば小さなドットとしてスタイル付けされた要素のグループ。</dd>
+          <dd>回転シーケンス内の特定のスライドを選択するための要素のグループで、しばしば小さなドットとしてスタイル付けされる。</dd>
         </dl>
       </section>
 
@@ -84,102 +84,102 @@ <h2>キーボードのインタラクション</h2>
         <ul>
           <li>
             カルーセルに自動回転機能がある場合、カルーセル内の任意の要素がキーボードフォーカスを受け取ると、自動スライド回転が停止します。
-            ユーザーが回転コントロールを作動するまで再開しません。
+            利用者が回転コントロールを作動するまで再開しません。
           </li>
-          <li><kbd>Tab</kbd> および <kbd>Shift + Tab</kbd>: ページのタブ順序で指定されたカルーセルのインタラクティブな要素を通じてフォーカスを移動します -- <kbd>Tab</kbd> のためのスクリプトは必要ありません。</li>
+          <li><kbd>Tab</kbd> 及び <kbd>Shift + Tab</kbd>: ページのタブ順序で指定されたカルーセルのインタラクティブな要素を通じてフォーカスを移動します -- <kbd>Tab</kbd> のためのスクリプトは必要ありません。</li>
           <li>
-            ボタン要素は、<a href="../button/button-pattern.html">ボタンパターン</a>で定義されたキーボードインタラクションを実装します。
-            注：回転コントロール、次のスライド、前のスライドを作動することはフォーカスを移動しませんので、ユーザーは望むだけ何度も繰り返し作動することができます。
+            ボタン要素は、<a href="../button/button-pattern.html">ボタン パターン</a>で定義されたキーボードインタラクションを実装します。
+            注記: 回転コントロール、次のスライド、前のスライドを作動することはフォーカスを移動しませんので、利用者は望むだけ何度も繰り返し作動することができます。
           </li>
           <li>
-            存在する場合、回転コントロールはカルーセル内の<kbd>Tab</kbd>シーケンスの最初の要素です。
-            回転するコンテンツよりも前にあることが重要です。
+            存在する場合、回転コントロールはカルーセル内の <kbd>Tab</kbd> シーケンスの最初の要素です。
+            回転するコンテンツより先に配置されることは、簡単に位置を特定するために不可欠です。
           </li>
-          <li>スライドピッカーコントロールのためにタブ要素が使用されている場合、それらは<a href="../tabs/tabs-pattern.html">タブパターン</a>で定義されたキーボードインタラクションを実装します。</li>
+          <li>スライドピッカーコントロールのために tab 要素が使用されている場合、それらは<a href="../tabs/tabs-pattern.html">タブ パターン</a>で定義されたキーボードインタラクションを実装します。</li>
         </ul>
       </section>
 
       <section id="roles_states_properties">
-        <h2>WAI-ARIAのロール、ステート、およびプロパティ</h2>
-        <p>このセクションでは、3つのスタイルのカルーセルの要素構成について説明します：</p>
+        <h2>WAI-ARIA のロール、ステート、及びプロパティ</h2>
+        <p>このセクションでは、3 つのスタイルのカルーセルの要素構成について説明します：</p>
         <ul>
-          <li>基本：回転、前のスライド、次のスライドのコントロールはあるが、スライドピッカーコントロールはない。</li>
-          <li>タブ付き：基本のコントロールに加えて、<a href="../tabs/tabs-pattern.html">タブのパターン</a>を使用して実装されたスライドピッカーコントロールのための単一のタブ停止がある。</li>
+          <li>基本: 回転、前のスライド、次のスライドのコントロールはあるが、スライドピッカーコントロールはない。</li>
+          <li>タブ付き: 基本のコントロールに加えて、<a href="../tabs/tabs-pattern.html">タブ パターン</a>を使用して実装されたスライドピッカーコントロールのための単一のタブストップがある。</li>
           <li>
-            グループ化：基本のコントロールに加えて、各コントロールが<a href="../button/button-pattern.html">ボタンのパターン</a>を実装するスライドピッカーコントロールのグループ内の一連のタブ停止がある。
-            各スライドセレクターボタンがページのタブシーケンスに要素を追加するため、このスタイルはキーボードユーザーにとって最も使いにくい。
+            グループ化: 基本的なコントロールに加えて、スライドピッカーコントロールのグループがある。このグループ内の各コントロールは<a href="../button/button-pattern.html">ボタン パターン</a>を実装し、複数のタブストップを持つ。
+            それぞれのスライド選択ボタンがページのタブシーケンスに要素を追加するため、このスタイルはキーボード利用者にとって最も使いにくい。
           </li>
         </ul>
         <h3>基本的なカルーセルの要素</h3>
         <ul>
           <li>
-            カルーセルのコントロールとスライドの両方を含むカルーセルのコンテナ要素は、<a href="#region" class="role-reference">region</a>ロールまたは<a href="#group" class="role-reference">group</a>ロールのいずれかを持っています。
+            カルーセルのすべてのコンポーネントを包括するカルーセルコンテナ要素は、カルーセルのコントロール及びスライドの両方を含むもので、ロール <a href="#region" class="role-reference">region</a> 又はロール <a href="#group" class="role-reference">group</a> のいずれかを持っています。
             カルーセルコンテナの最も適切なロールは、ページの情報アーキテクチャに依存します。
-            カルーセルがランドマークリージョンとして指定されるかどうかを判断するために、
-            <a href="../../practices/landmark-regions/landmark-regions-practice.html">ランドマークリージョンの実践</a>
+            カルーセルがランドマーク領域として指定されるかどうかを判断するために、
+            <a href="../../practices/landmark-regions/landmark-regions-practice.html">ランドマーク領域の実践</a>
             を参照してください。
           </li>
-          <li>カルーセルのコンテナは、<a href="#aria-roledescription" class="property-reference">aria-roledescription</a>プロパティを<code>carousel</code>に設定しています。</li>
+          <li>カルーセルのコンテナは、<a href="#aria-roledescription" class="property-reference">aria-roledescription</a> プロパティを <code>カルーセル</code> に設定しています。</li>
           <li>
-            カルーセルに表示されるラベルがある場合、そのアクセシブルなラベルは、カルーセルコンテナのプロパティ<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>によって提供され、表示されるラベルを含む要素のIDに設定されます。
-            それ以外の場合、アクセシブルなラベルは、カルーセルコンテナに設定されたプロパティ<a href="#aria-label" class="property-reference">aria-label</a>によって提供されます。
-            <code>aria-roledescription</code>が「carousel」と設定されているため、ラベルに「carousel」という言葉は含まれていません。
+            カルーセルに可視ラベルがある場合、そのアクセシブルなラベルは、カルーセルコンテナのプロパティ <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> によって提供され、表示されるラベルを含む要素の ID に設定されます。
+            それ以外の場合、アクセシブルなラベルは、カルーセルコンテナに設定されたプロパティ <a href="#aria-label" class="property-reference">aria-label</a> によって提供されます。
+            <code>aria-roledescription</code> が「カルーセル」と設定されているため、ラベルには「カルーセル」という言葉は含まれていません。
           </li>
-          <li>回転コントロール、次のスライドコントロール、および前のスライドコントロールは、ネイティブのボタン要素（推奨）であるか、<a href="../button/button-pattern.html">ボタンのパターン</a>を実装しています。</li>
+          <li>回転コントロール、次のスライドコントロール、及び前のスライドコントロールは、ネイティブのボタン要素（推奨）であるか、<a href="../button/button-pattern.html">ボタン パターン</a> を実装しています。</li>
           <li>
-            回転コントロールには、内部テキストまたは<a href="#aria-label" class="property-reference">aria-label</a>によって提供されるアクセシブルなラベルがあります。
-            ラベルは、ボタンが実行するアクションに合わせて変更されます。例えば、「スライド回転を停止」または「スライド回転を開始」。
-            ボタンが作動するとラベルが変わることで、スライドのコンテンツが自動的に変わる可能性があり、それが実際に行われていることを明確に伝えることができます。
-            ラベルが変わるため、回転コントロールには、例えば<code>aria-pressed</code>などのステートが指定されていません。
+            回転コントロールには、内部テキスト又は <a href="#aria-label" class="property-reference">aria-label</a> によって提供されるアクセシブルなラベルがあります。
+            ラベルは、ボタンが実行するアクションに合わせて変更されます。例えば、「スライド回転を停止」又は「スライド回転を開始」。
+            ボタンが作動するとラベルが変わることは、スライドのコンテンツが自動的に変わること及びそれがいつ行われているかを明確に伝えます。
+            ラベルが変わるため、回転コントロールには、例えば <code>aria-pressed</code> のようなステートが指定されていないことに注意してください。
           </li>
-          <li>各スライドコンテナは、<a href="#group" class="role-reference">group</a>ロールを持ち、プロパティ<a href="#aria-roledescription" class="property-reference">aria-roledescription</a>を<code>slide</code>に設定しています。</li>
+          <li>各スライドコンテナは、<a href="#group" class="role-reference">group</a> ロールを持ち、プロパティ <a href="#aria-roledescription" class="property-reference">aria-roledescription</a> を <code>スライド</code> に設定しています。</li>
           <li>
-            各スライドにはアクセシブルな名前があります：
+            各スライドにはアクセシブルな名前があります:
             <ul>
-              <li>スライドに表示されるラベルがある場合、そのアクセシブルなラベルは、スライドコンテナのプロパティ<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>によって提供され、表示されるラベルを含む要素のIDに設定されます。</li>
-              <li>それ以外の場合、アクセシブルなラベルは、スライドコンテナに設定されたプロパティ<a href="#aria-label" class="property-reference">aria-label</a>によって提供されます。</li>
-              <li>スライドのコンテンツを識別するユニークな名前が利用できない場合、番号とセットサイズを意味のある代替手段として使用できます。例：「3/10」。注：通常、アクセシブルな名前にセット位置とサイズ情報を含めることは適切ではありません。この実装では例外が役立ちます。なぜなら、group要素は<a href="#aria-setsize" class="property-reference">aria-setsize</a>または<a href="#aria-posinset" class="property-reference">aria-posinset</a>をサポートしていないからです。タブ付きのカルーセル実装パターンにはこの制限がありません。</li>
-              <li><code>aria-roledescription</code>が「slide」と設定されているため、ラベルに「slide」という言葉は含まれていません。</li>
+              <li>スライドに可視ラベルがある場合、そのアクセシブルなラベルは、スライドコンテナのプロパティ <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> によって提供され、可視ラベルを含む要素の ID に設定されます。</li>
+              <li>それ以外の場合、アクセシブルなラベルは、スライドコンテナに設定されたプロパティ <a href="#aria-label" class="property-reference">aria-label</a> によって提供されます。</li>
+              <li>スライドのコンテンツを識別するユニークな名前が利用できない場合、番号とセットサイズを意味のある代替手段として使用できます。例:「3/10」。注記: 通常、アクセシブルな名前にセット位置とサイズ情報を含めることは適切ではありません。この実装では例外的に役立ちます。なぜなら、group 要素は <a href="#aria-setsize" class="property-reference">aria-setsize</a> 又は <a href="#aria-posinset" class="property-reference">aria-posinset</a> をサポートしていないからです。タブ付きのカルーセル実装パターンにはこの制限がありません。</li>
+              <li><code>aria-roledescription</code> が「スライド」と設定されているため、ラベルに「スライド」という言葉は含まれていません。</li>
             </ul>
           </li>
           <li>
-            任意で、スライド要素のセットをラッピングする要素には、<a href="#aria-atomic" class="property-reference">aria-atomic</a>が<code>false</code>に設定され、<a href="#aria-live" class="property-reference">aria-live</a>が以下に設定されています：
+            任意で、スライド要素のセットを含む要素には、<a href="#aria-atomic" class="property-reference">aria-atomic</a> が <code>false</code> に設定され、<a href="#aria-live" class="property-reference">aria-live</a> が以下に設定されています:
             <ul>
-              <li><code>off</code>：カルーセルが自動的に回転している場合。</li>
-              <li><code>polite</code>：カルーセルが<strong>自動的に回転していない</strong>場合。</li>
+              <li><code>off</code>: カルーセルが自動的に回転しているとき。</li>
+              <li><code>polite</code>: カルーセルが自動的に回転して<strong>いない</strong>とき。</li>
             </ul>
           </li>
         </ul>
         <h3>タブ付きカルーセルの要素</h3>
         <p>タブ付きのカルーセルの構造は、基本的なカルーセルと同じですが、以下の点が異なります：</p>
         <ul>
-          <li>各スライドコンテナは、<code>group</code>の代わりに<a href="#tabpanel" class="role-reference">tabpanel</a>ロールを持ち、<code>aria-roledescription</code>プロパティを持っていません。</li>
+          <li>各スライドコンテナは、<code>group</code> の代わりに <a href="#tabpanel" class="role-reference">tabpanel</a> ロールを持ち、<code>aria-roledescription</code> プロパティを持っていません。</li>
           <li>
-            <a href="../tabs/tabs-pattern.html">タブのパターン</a>を使用して実装されたスライドピッカーコントロールがあり、以下のようになります：
+            <a href="../tabs/tabs-pattern.html">タブ パターン</a>を使用して実装されたスライドピッカーコントロールがあり、以下のようになります:
             <ul>
-              <li>各コントロールは<code>tab</code>要素であり、タブを作動すると、そのタブに関連付けられたスライドが表示されます。</li>
+              <li>各コントロールは <code>tab</code> 要素であり、タブを作動すると、そのタブに関連付けられたスライドが表示されます。</li>
               <li>
-                各<code>tab</code>のアクセシブルな名前は、スライドの名前または番号を含むことで、どのスライドを表示するかを示します。例：「スライド3」。
+                各 <code>tab</code> のアクセシブルな名前は、スライドの名前又は番号を含むことで、どのスライドを表示するかを示します。例：「スライド 3」。
                 各スライドにユニークな名前がある場合、スライドの名前が望ましい。
               </li>
-              <li>コントロールのセットは、タブの目的を識別する<a href="#aria-label" class="property-reference">aria-label</a>の値によって提供されるアクセシブルな名前を持つ<code>tablist</code>要素にグループ化されます。例：「表示するスライドを選択」。</li>
-              <li><code>tab</code>、<code>tablist</code>、および<code>tabpanel</code>は、<a href="../tabs/tabs-pattern.html">タブのパターン</a>で指定されたプロパティを実装しています。</li>
+              <li>コントロールのセットは <code>tablist</code> 要素にグループ化され、タブの目的を識別する <a href="#aria-label" class="property-reference">aria-label</a> の値によって提供されるアクセシブルな名前を持つます。例:「表示するスライドを選択」。</li>
+              <li><code>tab</code>・<code>tablist</code>・<code>tabpanel</code> は、<a href="../tabs/tabs-pattern.html">タブ パターン</a>で指定されたプロパティを実装しています。</li>
             </ul>
           </li>
         </ul>
         <h3>グループ化されたカルーセルの要素</h3>
-        <p>グループ化されたカルーセルは、基本的なカルーセルと同じ構造を持っていますが、スライドピッカーコントロールも含まれています：</p>
+        <p>グループ化されたカルーセルは、基本的なカルーセルと同じ構造を持っていますが、スライドピッカーコントロールも含まれています:</p>
         <ul>
-          <li>スライドピッカーコントロールのセットは、<a href="#group" class="role-reference">group</a>ロールを持つ要素に含まれています。</li>
-          <li>ピッカーコントロールを含むグループには、コントロールの目的を識別する<a href="#aria-label" class="property-reference">aria-label</a>の値によって提供されるアクセシブルなラベルがあります。例：「表示するスライドを選択」。</li>
-          <li>各ピッカーコントロールは、ネイティブのボタン要素（推奨）であるか、<a href="../button/button-pattern.html">ボタンのパターン</a>を実装しています。</li>
+          <li>スライドピッカーコントロールのセットは、<a href="#group" class="role-reference">group</a> ロールを持つ要素に含まれています。</li>
+          <li>ピッカーコントロールを含むグループには、コントロールの目的を識別するアクセシブルなラベルがあり、<a href="#aria-label" class="property-reference">aria-label</a> の値によって提供されます。例：「表示するスライドを選択」。</li>
+          <li>各ピッカーコントロールは、ネイティブのボタン要素（推奨）であるか、<a href="../button/button-pattern.html">ボタン パターン</a> を実装しています。</li>
           <li>
             各ピッカーボタンのアクセシブルな名前は、表示するスライドの名前と一致します。
-            これを実現するための一つの手法は、<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>を、スライド<code>group</code>要素を参照する値に設定することです。
+            これを実現するための一つの手法は、<a href="#aria-labelledby" class="property-reference">aria-labelledby</a> を、スライド <code>group</code> 要素を参照する値に設定することです。
           </li>
           <li>
-            現在表示されているスライドを表すピッカーボタンには、プロパティ<a href="#aria-disabled" class="property-reference">aria-disabled</a>が<code>true</code>に設定されています。
-            注：<code>aria-disabled</code>は、この状況でスクリーンリーダーユーザーがページの<kbd>Tab</kbd>シーケンスに含まれる無効なボタンから利益を得るため、HTMLの<code>disabled</code>属性よりも優れています。
+            現在表示されているスライドを表すピッカーボタンには、プロパティ <a href="#aria-disabled" class="property-reference">aria-disabled</a> が <code>true</code> に設定されています。
+            注記: <code>aria-disabled</code> は HTML の <code>disabled</code> 属性よりも好まれます。なぜならこの状況は、無効なボタンがページの <kbd>Tab</kbd> シーケンスに含まれることで、スクリーンリーダー利用者が利益を得られるからです。
           </li>
         </ul>
       </section>

From 6af752acce7ca8d3a2aa4b775e3106a0b12eaefd Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Sun, 12 Nov 2023 18:18:57 +0900
Subject: [PATCH 4/5] =?UTF-8?q?carousel-1-prev-next.html=20=E3=81=AE?=
 =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E8=A6=8B=E7=9B=B4=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../examples/carousel-1-prev-next.html        | 134 +++++++++---------
 1 file changed, 67 insertions(+), 67 deletions(-)

diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
index ca0a0375..a519a47a 100644
--- a/content/patterns/carousel/examples/carousel-1-prev-next.html
+++ b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>スライド制御のボタンを持つ自動回転イメージカルーセルの例</title>
+    <title>スライドコントロールのボタンを持つ自動回転画像カルーセルの例</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -20,24 +20,24 @@
   <body>
     <nav aria-label="関連リンク" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/10">関連するIssues</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/10">Related Issues</a></li>
         <li><a href="../carousel-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>スライド制御のボタンを持つ自動回転イメージカルーセルの例</h1>
+      <h1>スライドコントロールのボタンを持つ自動回転画像カルーセルの例</h1>
       <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
 
       <section>
         <h2>この例について</h2>
         <p>
-          以下の<a href="../carousel-pattern.html">カルーセルのパターン</a>の実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。
-          例えば、ユーザーがカルーセル内にフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると回転が停止し、ユーザーは前のスライドと次のスライドのボタンで表示するスライドを手動で制御できます。
+          以下の<a href="../carousel-pattern.html">カルーセル パターン</a>の実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。
+          例えば、利用者がカルーセル内にフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると回転が停止し、利用者は前のスライドと次のスライドのボタンで表示するスライドを手動で制御できます。
           例の後に続くアクセシビリティの特徴のセクションでは、これらの特徴を詳しく説明しています。
         </p>
-        <p>類似の例には以下があります：</p>
+        <p>類似の例には以下があります:</p>
         <ul>
-          <li><a href="carousel-2-tablist.html">タブでスライドを制御する自動回転イメージカルーセル:</a> ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティの特徴を示し、ユーザーがタブのセットで表示するスライドを選択できるようにするイメージカルーセル。</li>
+          <li><a href="examples/carousel-2-tablist.html">スライドコントロールのタブを持つ自動回転画像カルーセル:</a> ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示す画像カルーセルです。また、一連のタブで表示するスライドを利用者が選択できるようにしています。</li>
         </ul>
       </section>
 
@@ -51,7 +51,7 @@ <h2>例のオプション</h2>
             <input type="checkbox" id="accessible-controls" value="moreaccessible" aria-describedby="accessible-controls-desc">
             画像の外にコントロールとキャプションを表示
           </label>
-          <p id="accessible-controls-desc">このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルです。なぜなら、コントロールは知覚しやすく、キャプションは背後に回転する画像なしで読みやすくなるからです。</p>
+          <p id="accessible-controls-desc">このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルです。なぜなら、コントロールは知覚しやすく、背後に回転する画像がなくキャプションは読みやすくなるからです。</p>
 
           <label for="rotation-paused">
             <input type="checkbox" id="rotation-paused" value="paused" aria-describedby="rotation-paused-desc">
@@ -59,16 +59,16 @@ <h2>例のオプション</h2>
           </label>
           <p id="rotation-paused-desc">
             このオプションは、ページの読み込み時にカルーセルが一時停止しているか再生しているかを制御します。
-            一時停止オプションは、視覚障害のあるユーザーや自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させますが、ユーザーが開始/停止ボタンを使用して自動回転を開始できるようにします。</p>
-          <p>注：ユーザーがシステムの設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止されます。</p>
+            一時停止オプションは、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させますが、利用者が開始/停止ボタンを使用して自動回転を開始できるようにします。</p>
+          <p>注記: 利用者がシステムの設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止されます。</p>
 
           <label for="rotation-disabled">
             <input type="checkbox" id="rotation-disabled" value="norotate" aria-describedby="rotation-disabled-desc">
             自動回転を無効にする
           </label>
           <p id="rotation-disabled-desc">
-            このオプションは、自動回転機能を無効にし、ユーザーインターフェースから開始/停止ボタンを削除することで、視覚障害のあるユーザーや自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させます。
-            ユーザーは前のボタンと次のボタンを使用して、手動でスライドをナビゲートできます。
+            このオプションは、自動回転機能を無効にし、ユーザーインターフェースから開始/停止ボタンを削除することで、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させます。
+            利用者は前のボタンと次のボタンを使用して、手動でスライドをナビゲートできます。
           </p>
         </fieldset>
       </section>
@@ -113,7 +113,7 @@ <h2 id="ex_label">例</h2>
               </div>
 
               <div id="myCarousel-items" class="carousel-items" aria-live="off">
-                <div class="carousel-item active" role="group" aria-roledescription="スライド" aria-label="1 of 6">
+                <div class="carousel-item active" role="group" aria-roledescription="スライド" aria-label="6枚中の1">
                   <div class="carousel-image">
                     <a href="#">
                       <img src="images/amsterdamslide__800x600.jpg" alt="アムステルダムでのウォーキングツアー">
@@ -133,7 +133,7 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="2 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="6枚中の2">
                   <div class="carousel-image">
                     <a href="#">
                       <img src="images/lands-endslide__800x600.jpg" alt="コーンウォールのLand's End">
@@ -146,14 +146,14 @@ <h3>
                     </h3>
 
                     <div>
-                      <p><span class="contrast">9月14日から9月24日または27日まで</span></p>
+                      <p><span class="contrast">9月14日から9月24日又は27日まで</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="3 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="6枚中の3">
                   <div class="carousel-image">
                     <a href="#">
                       <img src="images/trustslide-2__800x600.jpg" alt="母と娘がノートパソコンでダニエルタイガーゲームをプレイ">
@@ -171,7 +171,7 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="4 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="6枚中の4">
                   <div class="carousel-image">
                     <a href="#">
                       <img src="images/foyleswarslide__800x600.jpg" alt="スーツとフェドラ帽をかぶった男と、髪を整えた女がカメラを厳しく見つめている。">
@@ -191,7 +191,7 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="5 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="6枚中の5">
                   <div class="carousel-image">
                     <a href="#">
                       <img src="images/britcomdavidslide__800x600.jpg" alt="WILL-TVのホスト、デビッド・シールとともに英国の旗">
@@ -209,7 +209,7 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="6 of 6">
+                <div class="carousel-item" role="group" aria-roledescription="スライド" aria-label="6枚中の6">
                   <div class="carousel-image">
                     <a href="#">
                       <img src="images/mag800-2__800x600.jpg" alt="セットでのMid-American Gardenerのパネリスト">
@@ -243,66 +243,66 @@ <h3>
         <h2>アクセシビリティ機能</h2>
         <h3>自動スライド回転の制御</h3>
         <p>
-          ユーザーはスライドの回転を停止し、再開することができ、これはさまざまな障害を持つ人々にとってカルーセルのアクセシビリティの重要な側面です。
-          低視力者や視覚処理や読書に影響を及ぼす認知障害を持つ人々は、スライドの内容を探索するのに十分な時間を持つためにスライドの回転を制御できることから利益を得ます。
-          同様に、スクリーンリーダーのユーザーが自動回転を知覚できないため、ページの読み取りが混乱し、方向を失うことがあります。
-          例えば、スライドが自動的に回転しているとき、スクリーンリーダーのユーザーはスライド1の要素を読み、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド1の次の要素を聞く代わりに、完全に新しいコンテキストからの要素を知らずにスライド2からの要素を聞くことになります。
+          利用者はスライドの回転を停止及び開始することができます。これは、障害を持つ様々な人々にとって、カルーセルのアクセシビリティの不可欠な側面です。
+          ロービジョンや、視覚処理や読解に影響を及ぼす認知障害のある人にとって、スライドの回転を制御できることは、スライドの内容を探索するのに十分な時間を確保できることになり、利益を得られます。
+          同様に、スクリーンリーダーの利用者は自動的な回転を知覚できないため、ページを読むことが混乱しやすく、方向感を失わせることがあります。
+          例えば、スライドが自動的に回転しているとき、スクリーンリーダーの利用者はスライド 1 の要素を読んで、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド 1 の次の要素を聞く代わりに、完全に新しいコンテキストからの要素であるスライド 2 の要素を聞くことになり得ます。
         </p>
-        <p>この例には、ユーザーがスライドの回転を制御するための以下の機能が含まれています:</p>
+        <p>この例には、利用者がスライドの回転を制御するための以下の機能が含まれています:</p>
         <ul>
           <li>オペレーティングシステムの設定が動きの減少やアニメーションの無効化に設定されている場合、自動回転は初めから一時停止されます。</li>
           <li>
-            カルーセルの任意のコンテンツにマウスをホバーすると、自動回転が一時停止します。
+            カルーセルのいずれかのコンテンツにマウスをホバーすると、自動回転が一時停止します。
             マウスがカルーセルから移動すると、キーボードのフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
           </li>
           <li>
-            キーボードのフォーカスをカルーセルの任意のコンテンツ、次や前のスライドの要素を含むものに移動すると、自動回転が一時停止します。
+            キーボードのフォーカスをカルーセルの任意のコンテンツ (次や前のスライドの要素を含む) に移動すると、自動回転が一時停止します。
             キーボードのフォーカスがカルーセルのコンテンツから移動すると、マウスのホバーなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
           </li>
           <li>
-            カルーセルには、自動回転を停止し、再開することができる回転制御ボタンも含まれています。
+            カルーセルには、自動回転を停止及び再開することができる回転制御ボタンも含まれています。
             <ul>
               <li>回転制御ボタンは、スクリーンリーダーの読み取り順序で最初の要素です。</li>
-              <li>回転制御ボタンは常に表示されているため、マウス、キーボード、補助技術、またはタッチを介して対話しているすべてのユーザーに利用できます。</li>
-              <li>カルーセルが回転している場合、ボタンのアクセシブルな名前は「自動スライドショーを停止」となり、スライドが変更されていることをスクリーンリーダーユーザーに通知するとともに、変更を停止する方法を提供します。</li>
+              <li>回転制御ボタンは常に表示されているため、マウス、キーボード、支援技術、又はタッチを介して操作しているすべての利用者に利用できます。</li>
+              <li>カルーセルが回転している場合、ボタンのアクセシブルな名前は「自動スライドショーを停止」となり、スライドが変更されていることをスクリーンリーダー利用者に通知するとともに、変更を停止する方法を提供します。</li>
               <li>カルーセルが回転していない場合、ボタンのアクセシブルな名前は「自動スライドショーを開始」となります。</li>
               <li>
-                ユーザーが回転制御ボタンを活性化して回転を開始する場合、ユーザーが自動回転をすぐに開始したいと考えていると想定されます。したがって、回転を一時停止するカルーセル内のフォーカスや/およびホバーの状態は無視されます。
-                回転は、再び回転制御ボタンが活性化されるまで停止することはありません。
+                利用者が回転制御ボタンを活性化して回転を開始する場合、利用者が自動回転をすぐに開始したいと考えていると想定されます。したがって、回転を一時停止するカルーセル内のフォーカス及び／又はホバーの状態は無視されます。
+                回転は、再び回転制御ボタンが押下されるまで停止することはありません。
               </li>
             </ul>
           </li>
           <li>
             この例には、自動スライド回転を完全に無効にするオプションが含まれています。
-            このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドは次および前のボタンの活性化を通じてのみ回転することができます。
+            このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドは次及び前のボタンの活性化を通じてのみ回転することができます。
           </li>
         </ul>
         <h3>テキストと回転制御の色のコントラスト</h3>
         <p>
           このカルーセルのビューでは、コントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストの色のコントラストが不十分になる可能性があります。
-          しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1の色のコントラスト要件を満たしています:
+          しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1 の色のコントラスト要件を満たしています:
         </p>
         <ul>
           <li>
-            回転制御、次のスライド、および前のスライドのボタンが画像内にレンダリングされる場合、ボタンにはWCAG 2.1の色のコントラスト要件を満たす前景色と背景色があります。
-            さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにするSVG画像を使用しています。
+            回転制御、次のスライド、及び前のスライドのボタンが画像内にレンダリングされる場合、ボタンには WCAG 2.1 の色のコントラスト要件を満たす前景色と背景色があります。
+            さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにする SVG 画像を使用しています。
           </li>
-          <li>キャプションエリアの透明度が減少しているため、キャプションテキストはWCAG 2.1の色のコントラスト要件を満たしています。</li>
+          <li>キャプションエリアの透明度が減少しているため、キャプションテキストは WCAG 2.1 の色のコントラスト要件を満たしています。</li>
         </ul>
 
         <p>
-          画像内にコントロールとテキストを表示することによって引き起こされる色のコントラストの問題を回避する1つの方法は、コントロールを画像の外に配置することです。
+          画像内にコントロールとテキストを表示することによって引き起こされる色のコントラストの問題を回避する一つの方法は、コントロールを画像の外に配置することです。
           コントロールとテキストを固定背景に表示することで、色のコントラストを制御するのが簡単になります。
-          1つのビューオプションは、この技術の例を提供しています。
+          一つのビューオプションは、この技術の例を提供しています。
         </p>
 
-        <h3>スライドの変更のスクリーンリーダーのアナウンスメント</h3>
+        <h3>スライドの変更のスクリーンリーダーの読み上げ</h3>
         <p>
           自動回転がオフになっている場合、カルーセルのスライドコンテンツはライブリージョンに含まれています。
-          これにより、スクリーンリーダーのユーザーがカルーセルのスライドをスキャンするのが簡単になります。
-          スクリーンリーダーのユーザーが次または前のスライドボタンを活性化すると、新しいスライドのコンテンツがアナウンスされ、コンテンツと対話するかどうかを判断するための即時のフィードバックが与えられます。
+          これにより、スクリーンリーダーの利用者がカルーセルのスライドをスキャンするのが簡単になります。
+          スクリーンリーダーの利用者が次又は前のスライドボタンを押下すると、新しいスライドのコンテンツが読み上げられ、コンテンツを操作するかどうかを判断するための即時のフィードバックが与えられます。
           非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になっています。
-          そうでなければ、継続的に変更されるコンテンツのアナウンスメントが他のユーザーが読んでいるものを常に中断するため、ページが使用できなくなります。
+          そうでなければ、継続的に変更されるコンテンツの読み上げが利用者が読んでいる他のものを毎回中断するため、ページが使用できなくなります。
         </p>
       </section>
 
@@ -323,12 +323,12 @@ <h3 id="kbd_label_2">回転制御ボタン</h3>
                 <td>
                   <ul>
                     <li>カルーセル内のインタラクティブな要素を通してフォーカスを移動します。</li>
-                    <li>回転制御、前のスライド、次のスライドのボタンは、<kbd>Tab</kbd>の順序でスライドの内容よりも先に来ます。</li>
+                    <li>回転制御、前のスライド、次のスライドのボタンは、<kbd>Tab</kbd> の順序でスライドの内容よりも先に来ます。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="carousel-enter-or-space-toggle">
-                <th><kbd>Enter</kbd> または <kbd>Space</kbd></th>
+                <th><kbd>Enter</kbd> 又は <kbd>Space</kbd></th>
                 <td>カルーセル内のスライドの自動回転を切り替えます。</td>
               </tr>
             </tbody>
@@ -336,7 +336,7 @@ <h3 id="kbd_label_2">回転制御ボタン</h3>
         </section>
 
         <section>
-          <h3 id="kbd_label_3">次および前のスライドボタン</h3>
+          <h3 id="kbd_label_3">次及び前のスライドボタン</h3>
           <table aria-labelledby="kbd_label_3 kbd_label" class="def">
             <thead>
               <tr>
@@ -347,7 +347,7 @@ <h3 id="kbd_label_3">次および前のスライドボタン</h3>
             <tbody>
               <tr data-test-id="carousel-key-enter-or-space-move">
                 <th><kbd>Enter</kbd><br><kbd>Space</kbd></th>
-                <td>カルーセル内の次または前のスライドを表示します。</td>
+                <td>カルーセル内の次又は前のスライドを表示します。</td>
               </tr>
             </tbody>
           </table>
@@ -355,7 +355,7 @@ <h3 id="kbd_label_3">次および前のスライドボタン</h3>
       </section>
 
       <section>
-        <h2 id="rps_label">ロール、プロパティ、ステート、およびtabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
@@ -376,24 +376,24 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
               </td>
               <td>
                 <ul>
-                  <li>アクセス可能な名前を持つ任意の<code>section</code>要素には<code>region</code>ロールが暗示されます。</li>
-                  <li>カルーセルとそのコントロールをランドマーク領域として定義します。</li>
+                  <li>アクセス可能な名前を持つ任意の <code>section</code> 要素には <code>region</code> ロールが暗示されます。</li>
+                  <li>カルーセルとそのコントロールをランドマーク領域として明示します。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="carousel-region-aria-roledescription">
               <td></td>
               <th scope="row">
-                <code>aria-roledescription="carousel"</code>
+                <code>aria-roledescription="カルーセル"</code>
               </th>
               <td>
                 <code>section</code>
               </td>
               <td>
                 <ul>
-                  <li>要素を「region」ではなく「carousel」として識別するように支援技術に通知します。</li>
-                  <li>支援技術がロールをレンダリングする方法に影響を与えますが、ランドマーク領域への移動のような機能には影響しません。</li>
-                  <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
+                  <li>要素を「region」ではなく「カルーセル」として識別するように支援技術に知らせます。</li>
+                  <li>ランドマーク領域への移動のような機能には影響せず、支援技術がロールをどのようにレンダリングするかに影響します。</li>
+                  <li>注記: <code>aria-roledescription</code>の値はページの言語を使用して明示され、著者によってローカライズされる必要があります。</li>
                 </ul>
               </td>
             </tr>
@@ -418,8 +418,8 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
               <td>
                 <ul>
                   <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
-                  <li>コンテナ要素を「off」状態のライブ領域として識別し、支援技術のユーザーは領域の変更について通知されません。</li>
-                  <li>カルーセルが自動的に回転している場合、ライブ領域はオフになります。</li>
+                  <li>コンテナ要素を「off」状態のライブ領域として特定し、支援技術の利用者は領域の変更について通知されません。</li>
+                  <li>カルーセルが自動的に回転しているとき、ライブ領域はオフになります。</li>
                 </ul>
               </td>
             </tr>
@@ -434,8 +434,8 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
               <td>
                 <ul>
                   <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
-                  <li>コンテナ要素を「polite」状態のライブ領域として識別し、支援技術のユーザーは次の利用可能な機会に領域の変更について通知されます。</li>
-                  <li>これにより、次のスライドボタンと前のスライドボタンがアクティブになったときにスクリーンリーダーが自動的にスライドの内容をアナウンスします。</li>
+                  <li>コンテナ要素を「polite」状態のライブ領域として特定し、支援技術の利用者は次の利用可能な機会に領域の変更について通知されます。</li>
+                  <li>これにより、次のスライドボタンと前のスライドボタンがアクティブになったときにスクリーンリーダーが自動的にスライドの内容を読み上げます。</li>
                 </ul>
               </td>
             </tr>
@@ -450,7 +450,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
               <td>
                 <ul>
                   <li>単一のスライドの内容を含む各要素に適用されます。</li>
-                  <li>支援技術のユーザーがスライドの境界を知覚できるようにします。</li>
+                  <li>支援技術の利用者がスライドの境界を知覚できるようにします。</li>
                 </ul>
               </td>
             </tr>
@@ -466,7 +466,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
                 <ul>
                   <li>要素を「group」ではなく「スライド」として識別するように支援技術に通知します。</li>
                   <li>支援技術がロールをレンダリングする方法に影響を与えますが、<code>group</code>要素に関連する支援技術の機能を削除することはありません。</li>
-                  <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
+                  <li>注記: <code>aria-roledescription</code>の値はページの言語を使用して明示され、著者によってローカライズされる必要があります。</li>
                 </ul>
               </td>
             </tr>
@@ -480,10 +480,10 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
               </td>
               <td>
                 <ul>
-                  <li>6つのスライドのうちどれが表示されているかをユーザーに理解させるための独自のラベルを各スライドに提供します。</li>
+                  <li>6 つのスライドのうちどれが表示されているかを利用者に理解させるための独自のラベルを各スライドに提供します。</li>
                   <li>
-                    注: 通常、アクセス可能な名前にセットの位置とサイズの情報を含めることは適切ではありません。
-                    例外として、この実装ではgroup要素が<code>aria-setsize</code>または<code>aria-posinset</code>をサポートしていないため、この情報が役立ちます。
+                    注記: 通常、アクセシブルな名前にセット位置とサイズ情報を含めることは適切ではありません。
+                    この実装では例外的に役立ちます。なぜなら、group 要素は <code>aria-setsize</code> 又は <code>aria-posinset</code> をサポートしていないからです。
                   </li>
                 </ul>
               </td>
@@ -496,7 +496,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
               <td>
                 <code>button</code>
               </td>
-              <td>一時停止自動回転ボタンおよび次および前のスライドボタンのアクセス可能な名前を定義します。</td>
+              <td>自動回転の一時停止ボタン及び次／前のスライドボタンのアクセス可能な名前を明示します。</td>
             </tr>
             <tr data-test-id="carousel-button-aria-controls">
               <td></td>
@@ -508,8 +508,8 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
               </td>
               <td>
                 <ul>
-                  <li>ボタンが制御するページ上のコンテンツを識別します。</li>
-                  <li>すべてのスライドを含む<code>div</code>を参照します。</li>
+                  <li>ボタンが制御するページ上のコンテンツを特定します。</li>
+                  <li>すべてのスライドを含む <code>div</code> を参照します。</li>
                 </ul>
               </td>
             </tr>
@@ -518,7 +518,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
       </section>
 
       <section>
-        <h2>JavaScriptとCSSのソースコード</h2>
+        <h2>JavaScript 及び CSS のソースコード</h2>
         <ul id="css_js_files">
           <li>CSS: <a href="css/carousel-prev-next.css" type="text/css">carousel-prev-next.css</a></li>
           <li>Javascript: <a href="js/carousel-prev-next.js" type="text/javascript">carousel-prev-next.js</a></li>
@@ -526,7 +526,7 @@ <h2>JavaScriptとCSSのソースコード</h2>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTMLソースコード</h2>
+        <h2 id="sc1_label">HTML ソースコード</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_label sc1_start_sep" aria-label="の開始"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_label sc1_end_sep" aria-label="の終了"></div>

From 479a4289a726d46b8de22dcd1075bc6d12dd5708 Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Mon, 13 Nov 2023 02:26:33 +0900
Subject: [PATCH 5/5] =?UTF-8?q?carousel-2-prev-next.html=20=E3=81=AE?=
 =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E8=A6=8B=E7=9B=B4=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../carousel/examples/carousel-2-tablist.html | 203 +++++++++---------
 1 file changed, 102 insertions(+), 101 deletions(-)

diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index 75a81133..f26cf7a1 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>スライド制御のタブを持つ自動回転イメージカルーセルの例</title>
+    <title>スライドコントロールのタブを持つ自動回転画像カルーセルの例</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -20,26 +20,26 @@
   <body>
     <nav aria-label="関連リンク" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/10">関連するIssues</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/10">Related Issues</a></li>
         <li><a href="../carousel-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>スライド制御のタブを持つ自動回転イメージカルーセルの例</h1>
+      <h1>スライドコントロールのタブを持つ自動回転画像カルーセルの例</h1>
       <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
 
       <section>
         <h2>この例について</h2>
         <p>
           以下の<a href="../carousel-pattern.html">カルーセルパターン</a>の実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。
-          この例は、シーケンス内のスライドをスキップして直接表示するスライドを選択する方法として、<a href="../../tabs/tabs-pattern.html">タブパターン</a>の使用方法も示しています。
+          この例は、シーケンス内のスライドをスキップして直接表示するスライドを選択する方法として、<a href="../../tabs/tabs-pattern.html">タブパターン</a>を利用する方法を示しています。
           スライド間のナビゲーションは、タブとして機能する一連の円形のボタンによって提供され、回転するスライドの上にレンダリングされます。
-          ユーザーがカルーセル内の任意のコントロールやリンクにフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると、自動回転が停止します。
-          このデザインの詳細を説明するアクセシビリティ機能のセクションが、例の後に続きます。
+          利用者がカルーセル内の任意のコントロールやリンクにフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると、自動回転が停止します。
+          例の後に続くアクセシビリティの特徴のセクションでは、これらデザインの側面を詳しく説明しています。
         </p>
         <p>類似の例には以下があります：</p>
         <ul>
-          <li><a href="carousel-1-prev-next.html">スライド制御のボタンを持つ自動回転イメージカルーセル:</a> ページの読み込み時に自動的に回転するカルーセルの必要なアクセシビリティ機能を示す基本的なイメージカルーセルで、前のスライドと次のスライドのボタンで表示するスライドを選択することができます。</li>
+          <li><a href="carousel-1-prev-next.html">スライドコントロールのボタンを持つ自動回転画像カルーセル:</a> ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示す基本的な画像カルーセルで、前のスライドと次のスライドのボタンで表示するスライドを選択することができます。</li>
         </ul>
       </section>
 
@@ -53,25 +53,25 @@ <h2>例のオプション</h2>
             <input type="checkbox" id="accessible-controls" value="moreaccessible" aria-describedby="accessible-controls-desc">
             画像の外にコントロールとキャプションを表示
           </label>
-          <p id="accessible-controls-desc">このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルであり、コントロールが認識しやすく、回転する画像の背後にないキャプションが読みやすくなります。</p>
+          <p id="accessible-controls-desc">このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルです。なぜなら、コントロールは知覚しやすく、背後に回転する画像がなくキャプションは読みやすくなるからです。</p>
 
           <label for="rotation-paused">
             <input type="checkbox" id="rotation-paused" value="paused" aria-describedby="rotation-paused-desc">
-            読み込み時に自動回転を一時停止 (<a href="javascript:history.go(0)"><img class="reload" src="images/reload-icon.png" alt="">再読み込みが必要</a>)
+            読み込み時に自動回転を一時停止（<a href="javascript:history.go(0)"><img class="reload" src="images/reload-icon.png" alt="">再読み込みが必要</a>）
           </label>
           <p id="rotation-paused-desc">
-            このオプションは、ページの読み込み時にカルーセルが一時停止しているか再生中かを制御します。
-            一時停止オプションは、視覚障害のあるユーザーや自動回転によって気が散ったり混乱したりする人々のアクセシビリティを向上させますが、start/stopボタンを使用して自動回転を開始することができます。
+            このオプションは、ページの読み込み時にカルーセルが一時停止しているか再生しているかを制御します。
+            一時停止オプションは、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させますが、利用者が開始/停止ボタンを使用して自動回転を開始できるようにします。
           </p>
-          <p>注: ユーザーがシステム設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止します。</p>
+          <p>注記: 利用者がシステムの設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止されます。</p>
 
           <label for="rotation-disabled">
             <input type="checkbox" id="rotation-disabled" value="norotate" aria-describedby="rotation-disabled-desc">
             自動回転を無効にする
           </label>
           <p id="rotation-disabled-desc">
-            このオプションは、自動回転機能を無効にし、ユーザーインターフェースからstart/stopボタンを削除することで、視覚障害のあるユーザーや自動回転によって気が散ったり混乱したりする人々のアクセシビリティを向上させます。
-            ユーザーはタブリストを使用してスライドを手動でナビゲートすることができます。
+            このオプションは、自動回転機能を無効にし、ユーザーインターフェースから開始/停止ボタンを削除することで、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させます。
+            利用者はタブリストを使用して、手動でスライドをナビゲートできます。
           </p>
         </fieldset>
       </section>
@@ -82,7 +82,7 @@ <h2 id="ex_label">例</h2>
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_label ex_start_sep" aria-label="の開始"></div>
         <div id="ex1">
-          <section id="myCarousel" class="carousel-tablist" aria-roledescription="カルーセル" aria-label="注目のテレビ番組">
+          <section id="myCarousel" class="carousel-tablist" aria-roledescription="カルーセル" aria-label="ハイライトされたテレビ番組">
             <div class="carousel-inner">
               <div class="controls">
                 <button class="rotation" type="button">
@@ -147,7 +147,7 @@ <h2 id="ex_label">例</h2>
               </div>
 
               <div id="myCarousel-items" class="carousel-items playing" aria-live="off">
-                <div class="carousel-item active" id="carousel-item-1" role="tabpanel" aria-roledescription="スライド" aria-label="1 / 6">
+                <div class="carousel-item active" id="carousel-item-1" role="tabpanel" aria-roledescription="スライド" aria-label="6枚中の1">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-1">
                       <img src="images/amsterdamslide__800x600.jpg" alt="アムステルダムでのウォーキングツアー">
@@ -160,17 +160,17 @@ <h3>
                     </h3>
 
                     <div class="hidden-xs hidden-sm">
-                      <p><span class="contrast">3月3日火曜日 7 pm、テレビで</span></p>
+                      <p><span class="contrast">3月3日火曜日、午後7時、テレビで</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-2" role="tabpanel" aria-roledescription="スライド" aria-label="2 / 6">
+                <div class="carousel-item" id="carousel-item-2" role="tabpanel" aria-roledescription="スライド" aria-label="6枚中の2">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-2">
-                      <img src="images/lands-endslide__800x600.jpg" alt="コーンウォールのランドエンド">
+                      <img src="images/lands-endslide__800x600.jpg" alt="コーンウォールのLand's End">
                     </a>
                   </div>
 
@@ -180,17 +180,17 @@ <h3>
                     </h3>
 
                     <div>
-                      <p><span class="contrast">9月14日から9月24日または27日まで</span></p>
+                      <p><span class="contrast">9月14日から9月24日又は27日まで</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-3" role="tabpanel" aria-roledescription="スライド" aria-label="3 / 6">
+                <div class="carousel-item" id="carousel-item-3" role="tabpanel" aria-roledescription="スライド" aria-label="6枚中の3">
                   <div class="carousel-image">
                     <a href="#!" id="carousel-image-3">
-                      <img src="images/trustslide-2__800x600.jpg" alt="母と娘がノートパソコンでダニエルタイガーゲームをプレイ。">
+                      <img src="images/trustslide-2__800x600.jpg" alt="母と娘がノートパソコンでダニエルタイガーゲームをプレイ">
                     </a>
                   </div>
 
@@ -205,27 +205,27 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-4" role="tabpanel" aria-roledescription="スライド" aria-label="4 / 6">
+                <div class="carousel-item" id="carousel-item-4" role="tabpanel" aria-roledescription="スライド" aria-label="6枚中の4">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-4">
-                      <img src="images/foyleswarslide__800x600.jpg" alt="スーツとフェドラ帽をかぶった男と、髪を整えた女がカメラを真剣に見つめている。">
+                      <img src="images/foyleswarslide__800x600.jpg" alt="スーツとフェドラ帽をかぶった男と、髪を整えた女がカメラを厳しく見つめている。">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> フォイルの戦争再訪 </a>
+                      <a href="#"> Foyleの戦争再訪 </a>
                     </h3>
 
                     <div>
-                      <p><span class="contrast">3月8日日曜日 8 pm、テレビで: 最終シーズンの先行公開。</span></p>
+                      <p><span class="contrast">3月8日日曜日、午後8時、テレビで: 最終シーズンの先行上映。</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-5" role="tabpanel" aria-roledescription="スライド" aria-label="5 / 6">
+                <div class="carousel-item" id="carousel-item-5" role="tabpanel" aria-roledescription="スライド" aria-label="6枚中の5">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-5">
                       <img src="images/britcomdavidslide__800x600.jpg" alt="WILL-TVのホスト、デビッド・シールとともに英国の旗。">
@@ -234,7 +234,7 @@ <h3>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> グレートブリテン投票: 土曜日 7 pm </a>
+                      <a href="#"> グレートブリテン投票: 土曜日午後7時 </a>
                     </h3>
 
                     <div></div>
@@ -243,20 +243,20 @@ <h3>
                 </div>
                 <!-- .item -->
 
-                <div class="carousel-item" id="carousel-item-6" role="tabpanel" aria-roledescription="スライド" aria-label="6 / 6">
+                <div class="carousel-item" id="carousel-item-6" role="tabpanel" aria-roledescription="スライド" aria-label="6枚中の6">
                   <div class="carousel-image">
                     <a href="#" id="carousel-image-6">
-                      <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardenerのパネリストがセットに">
+                      <img src="images/mag800-2__800x600.jpg" alt="セットでのMid-American Gardenerのパネリスト">
                     </a>
                   </div>
 
                   <div class="carousel-caption">
                     <h3>
-                      <a href="#"> ミッドアメリカンガーデナー: 木曜日 7 pm </a>
+                      <a href="#"> Mid-American Gardener: 木曜日午後7時 </a>
                     </h3>
 
                     <div class="hidden-xs hidden-sm">
-                      <p><span class="contrast">最新のエピソードをご覧ください。</span></p>
+                      <p><span class="contrast">最新のエピソードを見る。</span></p>
                     </div>
                   </div>
                   <!-- .carousel-caption -->
@@ -277,72 +277,73 @@ <h3>
         <h2>アクセシビリティ機能</h2>
         <h3>自動スライド回転の制御</h3>
         <p>
-          ユーザーはスライドの回転を停止および開始することができ、これはさまざまな障害を持つ人々のカルーセルのアクセシビリティの重要な側面です。
-          視覚的な処理や読書に影響を与える認知障害を持つ低視力者や人々は、スライドの内容を探索するのに十分な時間を持つためにスライドの回転を制御できることで利益を得ることができます。
-          同様に、スクリーンリーダーのユーザーが自動回転を知覚できないため、ページの読み取りが混乱しやすくなります。
-          例えば、スライドが自動的に回転している場合、スクリーンリーダーのユーザーはスライド1の要素を読み、次の要素を読むためのスクリーンリーダーコマンドを実行するかもしれません。そして、スライド1の次の要素を聞く代わりに、完全に新しいコンテキストからの要素を知らずにスライド2からの要素を聞くことになります。
+          利用者はスライドの回転を停止及び開始することができます。これは、障害を持つ様々な人々にとって、カルーセルのアクセシビリティの不可欠な側面です。
+          ロービジョンや、視覚処理や読解に影響を及ぼす認知障害のある人にとって、スライドの回転を制御できることは、スライドの内容を探索するのに十分な時間を確保できることになり、利益を得られます。
+          同様に、スクリーンリーダーの利用者は自動的な回転を知覚できないため、ページを読むことが混乱しやすく、方向感を失わせることがあります。
+          例えば、スライドが自動的に回転しているとき、スクリーンリーダーの利用者はスライド 1 の要素を読んで、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド 1 の次の要素を聞く代わりに、完全に新しいコンテキストからの要素であるスライド 2 の要素を聞くことになり得ます。
         </p>
-        <p>この例には、ユーザーがスライドの回転を制御するための以下の機能が含まれています:</p>
+        <p>この例には、利用者がスライドの回転を制御するための以下の機能が含まれています:</p>
         <ul>
-          <li>オペレーティングシステムの設定が動きの減少またはアニメーションの無効化に設定されている場合、自動回転は初めて一時停止されます。</li>
+          <li>オペレーティングシステムの設定が動きの減少やアニメーションの無効化に設定されている場合、自動回転は初めから一時停止されます。</li>
           <li>
-            カルーセルの任意のコンテンツにマウスをホバーすると、自動回転が一時停止します。
-            キーボードフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、マウスがカルーセルから移動すると自動回転が再開されます。
+            カルーセルのいずれかのコンテンツにマウスをホバーすると、自動回転が一時停止します。
+            マウスがカルーセルから移動すると、キーボードのフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
           </li>
           <li>
-            タブ要素を含むカルーセルの任意のコンテンツにキーボードフォーカスを移動すると、自動回転が一時停止します。
-            ユーザーが明示的に<q>再生</q>ボタンをアクティブにしない限り、自動回転は再開されません。
+            キーボードのフォーカスをカルーセルの任意のコンテンツ (タブの要素を含む) に移動すると、自動回転が一時停止します。
+            利用者が明示的に<q>再生</q>ボタンを押下したときのみ、自動回転が再開されます。
           </li>
           <li>
-            カルーセルには、自動回転を停止および開始できる回転制御ボタンも含まれています。
+            カルーセルには、自動回転を停止及び再開することができる回転制御ボタンも含まれています。
             <ul>
-              <li>回転制御ボタンは、スクリーンリーダーの読み取り順序の最初の要素です。</li>
-              <li>回転制御ボタンは常に表示されているため、マウス、キーボード、補助技術、またはタッチを介して対話しているすべてのユーザーに利用可能です。</li>
-              <li>カルーセルが回転している場合、ボタンのアクセス可能な名前は<q>自動スライドショーを停止</q>となり、スライドが変更されていることをスクリーンリーダーユーザーに通知するとともに、変更を停止する方法を提供します。</li>
-              <li>カルーセルが回転していない場合、ボタンのアクセス可能な名前は<q>自動スライドショーを開始</q>となります。</li>
-              <li>ユーザーが回転制御ボタンをアクティブにして回転を開始する場合、ユーザーが自動回転をすぐに開始したいと考えていると仮定され、カルーセル内のフォーカスまたはホバー状態は無視されます。回転は、ボタンが再びアクティブにされる場合を除いて、停止することはありません。</li>
+              <li>回転制御ボタンは、スクリーンリーダーの読み取り順序で最初の要素です。</li>
+              <li>回転制御ボタンは常に表示されているため、マウス、キーボード、支援技術、又はタッチを介して操作しているすべての利用者に利用できます。</li>
+              <li>カルーセルが回転している場合、ボタンのアクセシブルな名前は<q>自動スライドショーを停止</q>となり、スライドが変更されていることをスクリーンリーダー利用者に通知するとともに、変更を停止する方法を提供します。</li>
+              <li>カルーセルが回転していない場合、ボタンのアクセシブルな名前は<q>自動スライドショーを開始</q>となります。</li>
+              <li>利用者が回転制御ボタンを活性化して回転を開始する場合、利用者が自動回転をすぐに開始したいと考えていると想定され、カルーセル内のフォーカス又はホバーの状態は無視されます。回転は、再び回転制御ボタンが押下されるまで停止することはありません。
+              </li>
             </ul>
           </li>
           <li>
             この例には、自動スライド回転を完全に無効にするオプションが含まれています。
-            このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドはタブコントロールのアクティベーションを通じてのみ回転できます。
+            このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドはタブコントロールの活性化を通じてのみ回転することができます。
           </li>
         </ul>
-        <h3>テキストと回転コントロールのカラーコントラスト</h3>
+        <h3>テキストと回転制御の色のコントラスト</h3>
         <p>
-          このカルーセルのビューでコントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストのカラーコントラストが不十分になる可能性があります。
-          ただし、このビューには、WCAG 2.1のカラーコントラスト要件を満たすための次の機能が含まれています:
+          このカルーセルのビューでは、コントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストの色のコントラストが不十分になる可能性があります。
+          しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1 の色のコントラスト要件を満たしています:
         </p>
         <ul>
           <li>
-            スライドのレンダリングを制御するタブが画像内にある場合、タブにはWCAG 2.1のカラーコントラスト要件を満たす前景色と背景色があります。
-            さらに、フォーカススタイリングは、コントロールがキーボードフォーカスを受け取るときにフォーカスインジケーターが非常に目立つようにするSVG画像を使用しています。
+            スライドのレンダリングを制御するタブが画像内にある場合、タブには WCAG 2.1 の色のコントラスト要件を満たす前景色と背景色があります。
+            さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにする SVG 画像を使用しています。
           </li>
-          <li>キャプションエリアの透明度が減少して、キャプションテキストがWCAG 2.1のカラーコントラスト要件を満たすようになります。</li>
+          <li>キャプションエリアの透明度が減少しているため、キャプションテキストは WCAG 2.1 の色のコントラスト要件を満たしています。</li>
         </ul>
 
         <p>
-          画像内のコントロールとテキストのカラーコントラストの問題を回避する方法の1つは、それらを画像の外に移動することです。
-          コントロールとテキストを固定背景に移動することで、著者がカラーコントラストを制御し、ユーザーがそれらを知覚するのが容易になります。
-          この技術の例は、ビューオプションの1つです。
+          画像内にあるコントロールとテキストの色のコントラストの問題を回避する一つの方法は、コントロールを画像の外に配置することです。
+          コントロールとテキストを固定背景上に移動にすることで、著者には色のコントラストを制御するのが、利用者にはそれを知覚するのが簡単になります。
+          このテクニックの一例はビューオプションのうちのひとつです。
         </p>
 
-        <h3>TablistとTabsのフォーカススタイリング</h3>
+        <h3>タブリストとタブのフォーカススタイリング</h3>
         <ul>
-          <li>タブがフォーカスを受け取ると、タブリスト全体もボーダーでハイライトされ、ユーザーにグループ内のコントロール間を移動するために矢印キーが使用されることを示す手がかりが提供されます。</li>
-          <li>フォーカススタイリングに使用されるCSSボーダーの幅は、コントロールがフォーカスを受け取るときに0ピクセルから2ピクセルに変更され、オペレーティングシステムの高コントラストオプションが有効になっているときにフォーカスの可視性をサポートします。</li>
+          <li>タブがフォーカスを受け取ると、タブリスト全体もボーダーでハイライトされ、利用者にグループ内のコントロール間を移動するために矢印キーが使用されることを示す手がかりが提供されます。</li>
+          <li>フォーカススタイリングに使用される CSS ボーダーの幅は、コントロールがフォーカスを受け取るときに0ピクセルから2ピクセルに変更され、オペレーティングシステムの高コントラストオプションが有効になっているときのフォーカスの可視性をサポートします。</li>
         </ul>
-        <h3>スライド変更のスクリーンリーダーのアナウンスメント</h3>
+        <h3>スライドの変更のスクリーンリーダーの読み上げ</h3>
         <p>
-          自動回転がオフになっている場合、カルーセルスライドのコンテンツはライブリージョンに含まれています。
-          これにより、スクリーンリーダーのユーザーがカルーセルのスライドをスキャンするのが容易になります。
-          スクリーンリーダーのユーザーが新しいタブをアクティブにすると、新しいスライドのコンテンツがアナウンスされ、ユーザーがコンテンツと対話するかどうかを判断するための即時のフィードバックが提供されます。
-          非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になります。
-          そうでなければ、継続的に変更されるコンテンツのアナウンスメントがユーザーが読んでいる他のものを常に中断するため、ページは使用できなくなります。
+          自動回転がオフになっている場合、カルーセルのスライドコンテンツはライブリージョンに含まれています。
+          これにより、スクリーンリーダーの利用者がカルーセルのスライドをスキャンするのが簡単になります。
+          スクリーンリーダーの利用者が新しいタブを押下すると、新しいスライドのコンテンツが読み上げられ、コンテンツを操作するかどうかを判断するための即時のフィードバックが与えられます。
+          非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になっています。
+          そうでなければ、継続的に変更されるコンテンツの読み上げが利用者が読んでいる他のものを毎回中断するため、ページが使用できなくなります。
         </p>
         <p>
-          タブパネルをライブにすることは、典型的なタブの場合には推奨されません。
-          主な目的がコンテンツのクイックで軽量なスキャンであるカルーセルの使用ケースでは、ライブリージョンは、非スクリーンリーダーユーザーが自動回転で持っているタイプの経験をシミュレートするために使用されます。
+          注記: 通常のタブにおいては、タブパネルをライブ領域にすることは推奨されません。
+          カルーセルの使用例では、コンテンツの迅速かつ軽量なスキャンが主な目的であるため、ライブ領域は自動回転を有する非スクリーンリーダー利用者の体験を模倣するために使用されます。
         </p>
       </section>
 
@@ -363,12 +364,12 @@ <h3 id="kbd_label_1">回転制御ボタン</h3>
                 <td>
                   <ul>
                     <li>カルーセル内のインタラクティブな要素を通してフォーカスを移動します。</li>
-                    <li>回転制御ボタンとタブリストは、<kbd>Tab</kbd>の順序でスライドコンテンツの前に来ます。</li>
+                    <li>回転制御ボタンとタブリストは、<kbd>Tab</kbd> の順序でスライドの内容よりも先に来ます。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="rotation-enter-or-space-toggle">
-                <th><kbd>Enter</kbd> または <kbd>Space</kbd></th>
+                <th><kbd>Enter</kbd> 又は <kbd>Space</kbd></th>
                 <td>カルーセル内のスライドの自動回転を切り替えます。</td>
               </tr>
             </tbody>
@@ -389,8 +390,8 @@ <h3 id="kbd_label_2">タブ</h3>
                 <th><kbd>Tab</kbd></th>
                 <td>
                   <ul>
-                    <li>フォーカスが<code>tablist</code>に移動すると、アクティブな<code>tab</code>要素にフォーカスを置きます。カルーセル内の各スライドは<code>tab</code>によって制御されます。</li>
-                    <li>タブリストがフォーカスを持っている場合、現在表示されているスライドのリンクである<kbd>tab</kbd>の順序で次の要素にフォーカスを移動します。</li>
+                    <li>フォーカスが <code>tablist</code> に移動すると、アクティブな <code>tab</code> 要素にフォーカスを置きます。カルーセル内の各スライドは <code>tab</code> によって制御されます。</li>
+                    <li>タブリストがフォーカスを持っている場合、<kbd>tab</kbd> シーケンスにおける次の要素にフォーカスを移動します。それは現在表示されているスライド内のリンクです。</li>
                   </ul>
                 </td>
               </tr>
@@ -428,7 +429,7 @@ <h3 id="kbd_label_2">タブ</h3>
       </section>
 
       <section>
-        <h2 id="rps_label">ロール、プロパティ、ステート、およびtabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <section>
           <h3 id="rps_label_1">回転制御</h3>
           <table aria-labelledby="rps_label_1 rps_label" class="data attributes">
@@ -450,7 +451,7 @@ <h3 id="rps_label_1">回転制御</h3>
                   <code>button</code>
                 </td>
                 <td>
-                  アクセス可能な名前は、ボタンが実行するアクションを反映して変更されます：
+                  アクセス可能な名前は、ボタンが実行するアクションを反映して変更されます:
                   <ul>
                     <li>自動回転が一時停止している場合、ラベルは「自動スライドショーを開始」です。</li>
                     <li>カルーセルが自動的に回転している場合、ラベルは「自動スライドショーを停止」です。</li>
@@ -473,14 +474,14 @@ <h3 id="rps_label_2">タブ</h3>
             </thead>
             <tbody>
               <tr data-test-id="test-not-required">
-                <th scope="row">暗黙の<code>region</code>ロール</th>
+                <th scope="row">暗黙の <code>region</code> ロール</th>
                 <td></td>
                 <td>
                   <code>section</code>
                 </td>
                 <td>
                   <ul>
-                    <li>アクセス可能な名前がある任意の<code>section</code>要素には<code>region</code>ロールが暗黙的に適用されます。</li>
+                    <li>アクセス可能な名前を持つ任意の <code>section</code> 要素には <code>region</code> ロールが暗示れます。</li>
                     <li>カルーセルとそのコントロールをランドマーク領域として定義します。</li>
                   </ul>
                 </td>
@@ -488,23 +489,23 @@ <h3 id="rps_label_2">タブ</h3>
               <tr data-test-id="carousel-region-aria-roledescription">
                 <td></td>
                 <th scope="row">
-                  <code>aria-roledescription="carousel"</code>
+                  <code>aria-roledescription="カルーセル"</code>
                 </th>
                 <td>
                   <code>section</code>
                 </td>
                 <td>
                   <ul>
-                    <li>要素を「領域」としてではなく「カルーセル」として識別するように支援技術に通知します。</li>
+                    <li>要素を「region」ではなく「カルーセル」として識別するように支援技術に知らせます。</li>
                     <li>ランドマーク領域への移動のような機能には影響せず、支援技術がロールをどのようにレンダリングするかに影響します。</li>
-                    <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
+                    <li>注記: <code>aria-roledescription</code>の値はページの言語を使用して明示され、著者によってローカライズされる必要があります。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="carousel-region-aria-label">
                 <td></td>
                 <th scope="row">
-                  <code>aria-label="注目のテレビ番組"</code>
+                  <code>aria-label="ハイライトされたテレビ番組"</code>
                 </th>
                 <td>
                   <code>section</code>
@@ -522,8 +523,8 @@ <h3 id="rps_label_2">タブ</h3>
                 <td>
                   <ul>
                     <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
-                    <li>コンテナを「off」状態のライブ領域として識別し、領域の変更が自動的に通知されないことを意味します。</li>
-                    <li>カルーセルが自動的に回転している場合、ライブ領域はオフになります。</li>
+                    <li>コンテナ要素を「off」状態のライブ領域として特定し、支援技術の利用者は領域の変更について通知されません。</li>
+                    <li>カルーセルが自動的に回転しているとき、ライブ領域はオフになります。</li>
                   </ul>
                 </td>
               </tr>
@@ -538,8 +539,8 @@ <h3 id="rps_label_2">タブ</h3>
                 <td>
                   <ul>
                     <li>すべてのスライドを含む<code>div</code>要素に適用されます。</li>
-                    <li>コンテナ要素を「polite」状態のライブ領域として識別し、次の利用可能な機会に領域の変更が通知されることを意味します。</li>
-                    <li>関連するタブがアクティブになると、スクリーンリーダーが自動的にスライドの内容をアナウンスします。</li>
+                    <li>コンテナ要素を「polite」状態のライブ領域として特定し、支援技術の利用者は次の利用可能な機会に領域の変更について通知されます。</li>
+                    <li>これにより、対応するタブが選択されたときにスクリーンリーダーが自動的にスライドの内容を読み上げます。</li>
                   </ul>
                 </td>
               </tr>
@@ -574,7 +575,7 @@ <h3 id="rps_label_2">タブ</h3>
                 <td>
                   <ul>
                     <li>要素がタブ制御として機能することを示します。</li>
-                    <li>フォーカスが当たると、自動的にアクティブになり、関連する<code>tabpanel</code>（すなわち、スライド）が表示されます。</li>
+                    <li>フォーカスが当たると、自動的にアクティブになり、関連する <code>tabpanel</code>（すなわちスライド）が表示されます。</li>
                   </ul>
                 </td>
               </tr>
@@ -613,7 +614,7 @@ <h3 id="rps_label_2">タブ</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>タブ制御がアクティブでなく、関連するパネルが<strong>表示されていない</strong>ことを示します。</li>
+                    <li>タブ制御がアクティブでなく、関連するパネルが表示されて<strong>いない</strong>ことを示します。</li>
                     <li>現在表示されているスライドに関連するタブを除く、タブセット内のすべてのタブ要素に設定されます。</li>
                   </ul>
                 </td>
@@ -628,12 +629,12 @@ <h3 id="rps_label_2">タブ</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>要素をページの<kbd>Tab</kbd>順序から削除します。</li>
-                    <li>選択されていないタブに設定され、ページの<kbd>Tab</kbd>順序に選択されたタブのみが含まれるようにします。</li>
-                    <li>タブ要素がHTMLの<code>button</code>であるため、タブが選択（アクティブ）されたときにはtabindex属性が削除され、<code>tabindex="0"</code>に設定するのではなく。</li>
+                    <li>要素をページの <kbd>Tab</kbd> 順序から削除します。</li>
+                    <li>選択されていないタブに設定され、ページの <kbd>Tab</kbd> 順序には選択されたタブのみが含まれるようにします。</li>
+                    <li>タブ要素は HTML の <code>button</code> であるため、タブが選択 (アクティブに) されたときには <code>tabindex="0"</code> に設定するのではなく、tabindex 属性が削除されます。</li>
                     <li>
                       このフォーカスの管理方法は、
-                      <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_roving_tabindex">Roving tabindexを使用したコンポーネント内のフォーカスの管理</a>
+                      <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_roving_tabindex">Roving tabindex を使用したコンポーネント内のフォーカスの管理</a>
                       のセクションで説明されています。
                     </li>
                   </ul>
@@ -647,7 +648,7 @@ <h3 id="rps_label_2">タブ</h3>
                 <td>
                   <code>button</code>
                 </td>
-                <td>タブに関連する<code>tabpanel</code>要素を参照します。</td>
+                <td>タブに関連する <code>tabpanel</code> 要素を参照します。</td>
               </tr>
               <tr data-test-id="tabpanel-role">
                 <th scope="row">
@@ -659,31 +660,31 @@ <h3 id="rps_label_2">タブ</h3>
                 </td>
                 <td>
                   <ul>
-                    <li>要素が、関連するタブ要素によって制御される<code>tabpanel</code>として機能することを示します。</li>
-                    <li>関連する<code>tab</code>制御がアクティブでない限り、非表示になります。</li>
+                    <li>要素が、関連するタブ要素によって制御される <code>tabpanel</code> として機能することを示します。</li>
+                    <li>関連する <code>tab</code> 制御がアクティブでない限り、非表示になります。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="tabpanel-roledescription">
                 <td></td>
                 <th scope="row">
-                  <code>aria-roledescription="slide"</code>
+                  <code>aria-roledescription="スライド"</code>
                 </th>
                 <td>
                   <code>div</code>
                 </td>
                 <td>
                   <ul>
-                    <li>要素を「tabpanel」としてではなく「slide」として識別するように支援技術に通知します。</li>
+                    <li>要素を「tabpanel」としてではなく「スライド」として識別するように支援技術に知らせます。</li>
                     <li>支援技術の機能には影響せず、支援技術がロールをどのようにレンダリングするかに影響します。</li>
-                    <li>注: <code>aria-roledescription</code>の値はページの言語を使用して定義され、著者によってローカライズされる必要があります。</li>
+                    <li>注記: <code>aria-roledescription</code> の値はページの言語を使用して明示され、著者によってローカライズされる必要があります。</li>
                   </ul>
                 </td>
               </tr>
               <tr data-test-id="tabpanel-aria-label">
                 <td></td>
                 <th scope="row">
-                  <code>aria-label="X of Y"</code>
+                  <code>aria-label="Y枚中のX"</code>
                 </th>
                 <td>
                   <code>div</code>
@@ -691,7 +692,7 @@ <h3 id="rps_label_2">タブ</h3>
                 <td>
                   <ul>
                     <li>スライドのセット内でのスライドの位置を示すタブパネル（スライド）のアクセス可能な名前を提供します。</li>
-                    <li><code>aria-roledescription</code>と組み合わせると、スクリーンリーダーはタブパネルをその位置でアナウンスすることができます。例:「スライド1 of 6」。</li>
+                    <li><code>aria-roledescription</code> と組み合わせると、スクリーンリーダーはタブパネルをスライドとして、位置も含めて読み上げることができます。例:「スライド 6枚中の1」。</li>
                   </ul>
                 </td>
               </tr>
@@ -701,7 +702,7 @@ <h3 id="rps_label_2">タブ</h3>
       </section>
 
       <section>
-        <h2>JavaScriptおよびCSSのソースコード</h2>
+        <h2>JavaScript 及び CSS のソースコード</h2>
         <ul id="css_js_files">
           <li>CSS: <a href="css/carousel-tablist.css" type="text/css">carousel-tablist.css</a></li>
           <li>Javascript: <a href="js/carousel-tablist.js" type="text/javascript">carousel-tablist.js</a></li>
@@ -709,7 +710,7 @@ <h2>JavaScriptおよびCSSのソースコード</h2>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTMLのソースコード</h2>
+        <h2 id="sc1_label">HTML ソースコード</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_label sc1_start_sep" aria-label="の開始"></div>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_label sc1_end_sep" aria-label="の終了"></div>