From 980c54bdb1978bfe186a1d262f9db4ac9aadf9ea Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Sat, 24 Feb 2024 22:43:01 +0900
Subject: [PATCH 01/10] =?UTF-8?q?Disclosure=E3=83=91=E3=82=BF=E3=83=BC?=
 =?UTF-8?q?=E3=83=B3=E3=81=AE=E5=85=AC=E9=96=8B=E4=B8=AD=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E3=82=92=E5=8F=8D=E6=98=A0=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/patterns/disclosure/disclosure-pattern.html            | 1 +
 content/patterns/disclosure/examples/disclosure-faq.html       | 3 ++-
 .../disclosure/examples/disclosure-image-description.html      | 3 ++-
 .../disclosure/examples/disclosure-navigation-hybrid.html      | 2 +-
 .../patterns/disclosure/examples/disclosure-navigation.html    | 1 +
 5 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index 800fde84..5b20b618 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -27,6 +27,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
+        <img alt="" src="../../images/pattern-disclosure.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/disclosure-image-description.html">Disclosure (Show/Hide) of Image Description</a></li>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index 765759ec..138491d7 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -29,6 +29,7 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to create a set of frequently asked questions where the answers may be independently shown or hidden.
         </p>
@@ -106,7 +107,7 @@ <h2>Accessibility Features</h2>
           </li>
           <li>To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
           <li>
-            Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
+            Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
             Instead of using transparency, the focused element has a thicker border and less padding.
             When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
             When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index 5f7b1817..76f7c835 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -29,6 +29,7 @@ <h1>Example Disclosure (Show/Hide) for Image Description</h1>
 
       <section>
         <h2>About This Example</h2>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to provide a way of revealing a table of data that complements an image.
         </p>
@@ -249,7 +250,7 @@ <h2>Accessibility Features</h2>
         <ul>
           <li>To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
           <li>
-            Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
+            Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
             Instead of using transparency, the focused element has a thicker border and less padding.
             When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
             When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 22f14b98..31390dbc 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -38,7 +38,7 @@ <h3>Important</h3>
             <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
           </p>
         </div>
-
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
           Unlike the other <a href="disclosure-navigation.html">disclosure navigation menu example</a>, this example includes top-level links alongside the disclosure buttons.
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 31f4a594..75d6c440 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -38,6 +38,7 @@ <h3>Important</h3>
             <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
           </p>
         </div>
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
           Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section.

From 3a0f8a76856cc0c055af83509bb17a9e2b8b503c Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Sun, 25 Feb 2024 09:31:29 +0900
Subject: [PATCH 02/10] =?UTF-8?q?Disclosure=E3=83=91=E3=82=BF=E3=83=BC?=
 =?UTF-8?q?=E3=83=B3=E3=81=AE=E7=B2=97=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../disclosure/disclosure-pattern.html        |  45 ++--
 .../disclosure/examples/disclosure-faq.html   | 114 ++++-----
 .../disclosure-image-description.html         | 220 +++++++++---------
 .../disclosure-navigation-hybrid.html         | 212 ++++++++---------
 .../examples/disclosure-navigation.html       | 210 +++++++++--------
 5 files changed, 392 insertions(+), 409 deletions(-)

diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index 5b20b618..db0637cb 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <title>Disclosure (Show/Hide) 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,48 +14,49 @@
   </head>
   <body>
     <main>
-      <h1>Disclosure (Show/Hide) Pattern</h1>
+      <h1>ディスクロージャー（表示/非表示）パターン</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7f54d9620e32231021aad607b7af7eeee5c24f54 -->
 
       <section id="about">
-        <h2>About This Pattern</h2>
+        <h2>このパターンについて</h2>
         <p>
-          A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
-          It has two elements: a disclosure <a href="../button/button-pattern.html">button</a> and a section of content whose visibility is controlled by the button.
-          When the controlled content is hidden, the button is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content.
-          When the content is visible, the arrow or triangle typically points down.
+          ディスクロージャーは、コンテンツを折りたたんで隠す（非表示）または展開して表示する（表示）ことができるウィジェットです。
+          これには、ディスクロージャー <a href="../button/button-pattern.html">ボタン</a>と、ボタンによって可視性が制御されるコンテンツのセクションという、2つの要素があります。
+          制御されたコンテンツが隠されているとき、ボタンは通常、追加のコンテンツが表示されることを示唆する右向きの矢印または三角形でスタイルされた典型的なプッシュボタンとしてスタイルされます。
+          コンテンツが表示されているとき、矢印または三角形は通常、下を指します。
         </p>
       </section>
 
       <section id="examples">
         <img alt="" src="../../images/pattern-disclosure.svg">
-        <h2>Examples</h2>
+        <h2>例</h2>
         <ul>
-          <li><a href="examples/disclosure-image-description.html">Disclosure (Show/Hide) of Image Description</a></li>
-          <li><a href="examples/disclosure-faq.html">Disclosure (Show/Hide) of Answers to Frequently Asked Questions</a></li>
-          <li><a href="examples/disclosure-navigation.html">Disclosure (Show/Hide) Navigation Menu</a></li>
-          <li><a href="examples/disclosure-navigation-hybrid.html">Disclosure (Show/Hide) Navigation Menu with Top-Level Links</a></li>
+          <li><a href="examples/disclosure-image-description.html">画像説明のディスクロージャー（表示/非表示）</a></li>
+          <li><a href="examples/disclosure-faq.html">よくある質問への回答のディスクロージャー（表示/非表示）</a></li>
+          <li><a href="examples/disclosure-navigation.html">ディスクロージャー（表示/非表示）ナビゲーションメニュー</a></li>
+          <li><a href="examples/disclosure-navigation-hybrid.html">トップレベルリンク付きディスクロージャー（表示/非表示）ナビゲーションメニュー</a></li>
         </ul>
       </section>
 
       <section id="keyboard_interaction">
-        <h2>Keyboard Interaction</h2>
-        <p>When the disclosure control has focus:</p>
+        <h2>キーボードインタラクション</h2>
+        <p>ディスクロージャー制御がフォーカスを受けたとき：</p>
         <ul>
-          <li><kbd>Enter</kbd>: activates the disclosure control and toggles the visibility of the disclosure content.</li>
-          <li><kbd>Space</kbd>: activates the disclosure control and toggles the visibility of the disclosure content.</li>
+          <li><kbd>Enter</kbd>: ディスクロージャー制御をアクティブにし、ディスクロージャーコンテンツの可視性を切り替えます。</li>
+          <li><kbd>Space</kbd>: ディスクロージャー制御をアクティブにし、ディスクロージャーコンテンツの可視性を切り替えます。</li>
         </ul>
       </section>
 
       <section id="roles_states_properties">
-        <h2>WAI-ARIA Roles, States, and Properties</h2>
+        <h2>WAI-ARIA ロール、ステート、およびプロパティ</h2>
         <ul>
-          <li>The element that shows and hides the content has role <a href="#button" class="role-reference">button</a>.</li>
+          <li>コンテンツを表示および非表示にする要素はロール<a href="#button" class="role-reference">button</a>を持ちます。</li>
           <li>
-            When the content is visible, the element with role <code>button</code> has <a href="#aria-expanded" class="state-reference">aria-expanded</a> set to <code>true</code>.
-            When the content area is hidden, it is set to <code>false</code>.
+            コンテンツが表示されているとき、ロール<code>button</code>を持つ要素は<a href="#aria-expanded" class="state-reference">aria-expanded</a>が<code>true</code>に設定されます。
+            コンテンツエリアが隠されている場合は、<code>false</code>に設定されます。
           </li>
           <li>
-            Optionally, the element with role <code>button</code> has a value specified for <a href="#aria-controls" class="property-reference">aria-controls</a> that refers to the element that contains all the content that is shown or hidden.
+            オプションで、ロール<code>button</code>を持つ要素は、表示または非表示にされるすべてのコンテンツを含む要素を参照する<a href="#aria-controls" class="property-reference">aria-controls</a>の値を指定しています。
           </li>
         </ul>
       </section>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index 138491d7..d2347851 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.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>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</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,75 +20,70 @@
   <body>
     <nav aria-label="Related Links" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/14">Related Issues</a></li>
-        <li><a href="../disclosure-pattern.html">Design Pattern</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/14">関連する Issues</a></li>
+        <li><a href="../disclosure-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1>
+      <h1>よくある質問への回答のディスクロージャー（表示/非表示）の例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7f54d9620e32231021aad607b7af7eeee5c24f54 -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
-          The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to create a set of frequently asked questions where the answers may be independently shown or hidden.
+          以下の例では、<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用して、回答を個別に表示または非表示にできるよくある質問のセットを作成する方法を示しています。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下が含まれます：</p>
         <ul>
           <li>
-            <a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
+            <a href="disclosure-image-description.html">画像説明の表示/非表示の例</a>
           </li>
           <li>
-            <a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
+            <a href="disclosure-navigation.html">ナビゲーションメニューの表示/非表示の例</a>
           </li>
-          <li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
+          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付きナビゲーションメニューの表示/非表示の例</a></li>
         </ul>
       </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 id="ex1">
-          <h3>Parking <abbr title="Frequently Asked Questions">FAQ</abbr>s</h3>
+          <h3>駐車場のよくある質問</h3>
           <dl class="faq">
             <dt>
-              <button type="button" aria-expanded="false" aria-controls="faq1_desc">What do I do if I have a permit for an assigned lot, but can't find a space there?</button>
+              <button type="button" aria-expanded="false" aria-controls="faq1_desc">指定された駐車場にスペースが見つからない場合はどうすればよいですか？</button>
             </dt>
             <dd>
               <div id="faq1_desc" class="desc">
-                Park at the nearest available parking meter without paying the meter and call 999-999-9999 to report the problem.
-                We will note and approve your alternate location and will investigate the cause of the shortage in your assigned facility.
+                最寄りの駐車メーターに料金を支払わずに駐車し、999-999-9999に電話して問題を報告してください。代替の場所を記録して承認し、指定施設の不足の原因を調査します。
               </div>
             </dd>
             <dt>
-              <button type="button" aria-expanded="false" aria-controls="faq2_desc">What do I do if I lose my permit or if my permit is stolen?</button>
+              <button type="button" aria-expanded="false" aria-controls="faq2_desc">パーミットを紛失した場合、またはパーミットが盗まれた場合はどうすればよいですか？</button>
             </dt>
             <dd>
               <div id="faq2_desc" class="desc">
-                You should come to the Parking office and report the loss.
-                There is a fee to replace your lost permit.
-                However, if your permit was stolen, a copy of a police report needs to be submitted along with a stolen parking permit form for a fee replacement exemption.
+                駐車管理オフィスに来て、紛失を報告してください。紛失したパーミットの再発行には手数料がかかります。ただし、パーミットが盗まれた場合は、警察の報告書のコピーを盗難パーミットフォームとともに提出し、手数料の免除を受ける必要があります。
               </div>
             </dd>
             <dt>
-              <button type="button" aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
+              <button type="button" aria-expanded="false" aria-controls="faq3_desc">休日に無料駐車はありますか？</button>
             </dt>
             <dd>
               <div id="faq3_desc" class="desc">
-                All facilities are restricted from 2:00 am - 6:00 am on all days.
-                No exceptions are made for any holiday or recess except those officially listed as a <q>Holidays</q> in the calendar.
-                Please note: 24-hour rental spaces, 24-hour rental lots, and disabled parking is enforced at all times.
+                すべての施設は、毎日2:00 am - 6:00 amは制限されています。休日や休憩を問わず例外はありません。ただし、24時間レンタルスペース、24時間レンタルロット、および障害者用駐車場は常に守られます。
               </div>
             </dd>
             <dt>
-              <button type="button" aria-expanded="false" aria-controls="faq4_desc">Do all parking facilities have the same enforcement rules?</button>
+              <button type="button" aria-expanded="false" aria-controls="faq4_desc">すべての駐車施設に同じ規則が適用されますか？</button>
             </dt>
             <dd>
               <div id="faq4_desc" class="desc">
-                Some parking facility restrictions differ from others.
-                Be sure to take note of the signs at each lot entrance.
+                一部の駐車施設の制限は他と異なります。各ロット入口の標識を確認してください。
               </div>
             </dd>
           </dl>
@@ -97,38 +92,29 @@ <h3>Parking <abbr title="Frequently Asked Questions">FAQ</abbr>s</h3>
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
+        <h2>アクセシビリティの特徴</h2>
         <ul>
           <li>
-            The semantic structure of the FAQ is conveyed with native <code>dl</code>, <code>dt</code> and <code>dd</code> elements.
-            To ensure the list structure is communicated to assistive technologies, instead of applying a button role to the <code>dt</code> element, a <code>button</code> element is contained within the <code>dt</code> element.
-            Similarly, each <code>div</code> element containing answer content that can be shown or hidden by the button is a child of a <code>dd</code> element.
-            Since all the <code>dd</code> elements are present in the DOM even if some answers are hidden, the <code>dl</code> structure is always complete.
+            FAQの意味構造は、ネイティブの<code>dl</code>、<code>dt</code>および<code>dd</code>要素を使用して伝えられます。<code>dt</code>要素にボタンロールを適用する代わりに、<code>dt</code>要素内に<code>button</code>要素が含まれているため、リスト構造が支援技術に伝えられます。同様に、ボタンによって表示または非表示にされる回答コンテンツを含む各<code>div</code>要素は<code>dd</code>要素の子です。<code>dl</code>構造は、一部の回答が非表示であっても、すべての<code>dd</code>要素がDOMに存在するため、常に完全です。
           </li>
-          <li>To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
+          <li>視覚障害のある人がディスクロージャーをインタラクティブとして識別しやすくし、ディスクロージャーボタンまたはそのラベルをクリックすると拡張状態が変わることを認識しやすくするために、ポインターがボタンまたはそのラベルの上にあるときに、背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
           <li>
-            Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
-            Instead of using transparency, the focused element has a thicker border and less padding.
-            When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
-            When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
+            オペレーティングシステムのハイコントラスト設定が有効になっている一部のシステムで透明な境界線が表示されるため、透明性を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明性の代わりに、フォーカスされた要素にはより太い境界線と少ないパディングがあります。要素がフォーカスを受けると、その境界線は0から2ピクセルに変わり、パディングは2ピクセル減少します。要素がフォーカスを失うと、その境界線は2ピクセルから0に変わり、パディングは2ピクセル増加します。
           </li>
           <li>
-            To ensure the inline SVG arrow graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the arrows are synchronized with the color of the text content.
-            For example, the color of the arrow is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> and <code>fill</code> properties of the <code>polygon</code> elements used to draw the arrows.
-            If specific colors were instead used to specify the <code>polygon</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrows and the background or even make the arrows invisible if the color matched the high contrast mode background.<br>
-            Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast mode.
-            Some browsers do not use <code>auto</code> for the default value.
+            ハイコントラスト設定で色が反転したときにCSS内のインラインSVG矢印グラフィックスが背景と十分なコントラストを持つようにするため、矢印の色はテキストコンテンツの色と同期されます。たとえば、<code>polygon</code>要素の<code>stroke</code>および<code>fill</code>プロパティにCSSの<code>currentcolor</code>値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。特定の色を使用して<code>polygon</code>プロパティを指定した場合、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
+            注記：SVG要素は、ハイコントラストモードで<code>currentcolor</code>値が更新されるように、CSS<code>forced-color-adjust</code>プロパティを<code>auto</code>に設定する必要があります。一部のブラウザーはデフォルト値として<code>auto</code>を使用しません。
           </li>
         </ul>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
@@ -136,28 +122,28 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <th>
                 <kbd>Tab</kbd>
               </th>
-              <td>Moves keyboard focus to the disclosure button.</td>
+              <td>キーボードフォーカスをディスクロージャーボタンに移動します。</td>
             </tr>
             <tr data-test-id="key-enter-or-space">
               <th>
-                <kbd>Space</kbd> or <br>
+                <kbd>Space</kbd>または<br>
                 <kbd>Enter</kbd>
               </th>
-              <td>Activates the disclosure button, which toggles the visibility of the answer to the question.</td>
+              <td>ディスクロージャーボタンをアクティベートし、質問への回答の表示状態を切り替えます。</td>
             </tr>
           </tbody>
         </table>
       </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>
@@ -167,7 +153,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
                 <code>aria-controls="ID_REFERENCE"</code>
               </th>
               <td><code>button</code></td>
-              <td>Identifies the element controlled by the disclosure button.</td>
+              <td>ディスクロージャーボタンによって制御される要素を識別します。</td>
             </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
@@ -179,11 +165,11 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>hidden</em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚状態を同期します。
                   </li>
-                  <li>The visual indicator of the show/hide state is created using CSS <code>:before</code> pseudo element and <code>content</code> property so the image is reliably rendered in high contrast mode of operating systems and browsers.</li>
+                  <li>表示/非表示の状態の視覚的指標は、オペレーティングシステムおよびブラウザのハイコントラストモードで信頼性のあるレンダリングを保証するために、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
                 </ul>
               </td>
             </tr>
@@ -197,11 +183,11 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>visible</em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚状態を同期します。
                   </li>
-                  <li>The visual indicator of the show/hide state is created using CSS <code>:before</code> pseudo element and <code>content</code> property so the image is reliably rendered in high contrast mode of operating systems and browsers.</li>
+                  <li>表示/非表示の状態の視覚的指標は、オペレーティングシステムおよびブラウザのハイコントラストモードで信頼性のあるレンダリングを保証するために、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
                 </ul>
               </td>
             </tr>
@@ -210,22 +196,22 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScriptおよびCSSのソースコード</h2>
         <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
         <ul id="css_js_files">
           <li>
-            CSS:
+            CSS：
             <a href="css/disclosure-faq.css" type="tex/css">disclosure-faq.css</a>
           </li>
           <li>
-            Javascript:
+            JavaScript：
             <a href="js/disclosure-button.js" type="text/javascript">disclosureButton.js</a>
           </li>
         </ul>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTML Source Code</h2>
+        <h2 id="sc1_label">HTMLソースコード</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></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>
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index 76f7c835..b714122d 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.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>Example Disclosure (Show/Hide) for Image Description</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,221 +20,219 @@
   <body>
     <nav aria-label="Related Links" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/14">Related Issues</a></li>
-        <li><a href="../disclosure-pattern.html">Design Pattern</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/14">関連する Issues</a></li>
+        <li><a href="../disclosure-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>Example Disclosure (Show/Hide) for Image Description</h1>
+      <h1>画像説明のディスクロージャー（表示/非表示）の例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7f54d9620e32231021aad607b7af7eeee5c24f54 -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
-          The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to provide a way of revealing a table of data that complements an image.
+          以下の例では、<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用して、画像を補完するデータテーブルを表示する方法を提供しています。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下が含まれます：</p>
         <ul>
           <li>
-            <a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a>
+            <a href="disclosure-faq.html">よくある質問への回答の表示/非表示の例</a>
           </li>
           <li>
-            <a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
+            <a href="disclosure-navigation.html">ナビゲーションメニューの表示/非表示の例</a>
           </li>
-          <li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
+          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付きナビゲーションメニューの表示/非表示の例</a></li>
         </ul>
       </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 id="ex1">
           <figure>
             <img
               src="images/minard.png"
-              alt="Charles Minard's 1869 chart showing the number of men in Napoleon’s 1812 Russian campaign army, their movements, as well as the temperature they encountered on the return path."
+              alt="チャールズ・ミナードの1869年のチャートには、ナポレオンの1812年のロシア遠征軍の男性数、彼らの動き、および帰還経路で遭遇した温度が示されています。"
             >
             <figcaption>
               <p>
-                Figurative Map of the successive losses in men of the French Army in the Russian campaign 1812-1813.
-                Drawn by Mr. Minard, Inspector General of Bridges and Roads in retirement.
-                Paris, 20 November 1869.
+                フランス軍のロシア遠征1812-1813年の逐次的な人的損失の図。引退後の橋梁及び道路の総監ミナード氏によって描かれた。パリ、1869年11月20日。
               </p>
               <p>
-                The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones.
-                Red designates men moving into Russia, black those on retreat.
+                男性の数は、一万人につき一ミリメートルの割合で色付きゾーンの幅によって表され、これらはまたゾーンの横に書かれています。赤はロシアへ進む男性を、黒は撤退する男性を表します。
               </p>
-              <p>The information used for drawing the map were taken from the works of Messrs. Thiers, <span lang="fr">de Ségur, de Fezensac, de Chambray</span> and the unpublished diary of Jacob, pharmacist of the Army since 28 October.</p>
-              <p>In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army.</p>
-              <p><strong>Note: A French translation from Wikipedia.</strong></p>
-              <button type="button" aria-expanded="true" aria-controls="id_long_desc">Data Table for Minard's Chart</button>
+              <p>地図を描くために使用された情報は、ティエール氏、セグール氏、フェゼナック氏、シャンブレー氏の著作と、10月28日からの軍の薬剤師ジャコブの未公開日記から取られました。</p>
+              <p>軍の減少を目で判断しやすくするために、ミンスクとモビロウに送られ、オルシャとヴィテプスク近くで再合流したジェローム皇子とダヴースト元帥の下の軍隊が常に軍と一緒に行軍したと仮定しました。</p>
+              <p><strong>注記: Wikipediaからのフランス語翻訳。</strong></p>
+              <button type="button" aria-expanded="true" aria-controls="id_long_desc">ミナードのチャートのデータテーブル</button>
               <div class="long_desc" id="id_long_desc">
-                <h3 id="id_data_label">Data for Charles Minard's Chart of Napoleon's Invasion of Russia</h3>
+                <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミナードのチャートのデータ</h3>
                 <table aria-labelledby="id_data_label" class="data">
                   <thead>
                     <tr>
-                      <th scope="col">Location</th>
-                      <th scope="col">Approximate Date</th>
-                      <th scope="col">Size of Army</th>
-                      <th scope="col">Temperature C</th>
-                      <th scope="col">Temperature F</th>
-                      <th scope="col">Direction</th>
+                      <th scope="col">場所</th>
+                      <th scope="col">大体の日付</th>
+                      <th scope="col">軍の規模</th>
+                      <th scope="col">温度C</th>
+                      <th scope="col">温度F</th>
+                      <th scope="col">方向</th>
                     </tr>
                   </thead>
                   <tbody>
                     <tr>
-                      <th scope="row">Kowno River</th>
-                      <td>June 24th</td>
+                      <th scope="row">コウノ川</th>
+                      <td>6月24日</td>
                       <td>442,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Advance</td>
+                      <td>前進</td>
                     </tr>
                     <tr>
-                      <th scope="row">Wilna</th>
-                      <td>June 30th</td>
+                      <th scope="row">ヴィルナ</th>
+                      <td>6月30日</td>
                       <td>400,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Advance</td>
+                      <td>前進</td>
                     </tr>
                     <tr>
-                      <th scope="row">Witebsk</th>
+                      <th scope="row">ヴィテブスク</th>
                       <td>na</td>
                       <td>175,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Advance</td>
+                      <td>前進</td>
                     </tr>
                     <tr>
-                      <th scope="row">Smolensk</th>
-                      <td>August 16th</td>
+                      <th scope="row">スモレンスク</th>
+                      <td>8月16日</td>
                       <td>145,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Advance</td>
+                      <td>前進</td>
                     </tr>
                     <tr>
-                      <th scope="row">Chjat</th>
+                      <th scope="row">チャート</th>
                       <td>na</td>
                       <td>127,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Advance</td>
+                      <td>前進</td>
                     </tr>
                     <tr>
-                      <th scope="row">Mojaisk</th>
-                      <td>September 7th</td>
+                      <th scope="row">モジャイスク</th>
+                      <td>9月7日</td>
                       <td>100,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Advance</td>
+                      <td>前進</td>
                     </tr>
                     <tr>
-                      <th scope="row">Moscow</th>
-                      <td>September 14th</td>
+                      <th scope="row">モスクワ</th>
+                      <td>9月14日</td>
                       <td>100,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Advance</td>
+                      <td>前進</td>
                     </tr>
                     <tr>
-                      <th scope="row">Malo-jarosewli</th>
-                      <td>October 18th</td>
+                      <th scope="row">マロ・ヤロセウリ</th>
+                      <td>10月18日</td>
                       <td>96,000</td>
                       <td>0</td>
                       <td>32</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Mojaisk</th>
-                      <td>October 24th</td>
+                      <th scope="row">モジャイスク</th>
+                      <td>10月24日</td>
                       <td>87,000</td>
                       <td>0</td>
                       <td>32</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Wirma</th>
+                      <th scope="row">ヴィルマ</th>
                       <td>na</td>
                       <td>55,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Smolensk</th>
-                      <td>November 14th</td>
+                      <th scope="row">スモレンスク</th>
+                      <td>11月14日</td>
                       <td>37,000</td>
                       <td>-26</td>
                       <td>-13</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Orscha</th>
+                      <th scope="row">オルシャ</th>
                       <td>na</td>
                       <td>24,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Botr</th>
+                      <th scope="row">ボトル</th>
                       <td>na</td>
                       <td>20,000</td>
                       <td>-14</td>
                       <td>-7</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Studienska (reinforcements arrive)</th>
-                      <td>December 1st</td>
+                      <th scope="row">ステュディエンスカ（増援到着）</th>
+                      <td>12月1日</td>
                       <td>50,000</td>
                       <td>-25</td>
                       <td>-13</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Minsk</th>
-                      <td>December 1st</td>
+                      <th scope="row">ミンスク</th>
+                      <td>12月1日</td>
                       <td>28,000</td>
                       <td>-30</td>
                       <td>-22</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Moloderno</th>
-                      <td>December 6th</td>
+                      <th scope="row">モロデルノ</th>
+                      <td>12月6日</td>
                       <td>28,000</td>
                       <td>-38</td>
                       <td>-34</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Smorgeni</th>
-                      <td>December 7th</td>
+                      <th scope="row">スモルゲニ</th>
+                      <td>12月7日</td>
                       <td>12,000</td>
                       <td>-33</td>
                       <td>-27</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Wilna</th>
+                      <th scope="row">ヴィルナ</th>
                       <td>na</td>
                       <td>8,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                     <tr>
-                      <th scope="row">Kowno (reinforcements arrive)</th>
-                      <td>December 14th</td>
+                      <th scope="row">コウノ（増援到着）</th>
+                      <td>12月14日</td>
                       <td>10,000</td>
                       <td>na</td>
                       <td>na</td>
-                      <td>Retreat</td>
+                      <td>撤退</td>
                     </tr>
                   </tbody>
                 </table>
@@ -246,32 +244,32 @@ <h3 id="id_data_label">Data for Charles Minard's Chart of Napoleon's Invasion of
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
+        <h2>アクセシビリティ機能</h2>
         <ul>
-          <li>To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
+          <li>視覚障害のある利用者がディスクロージャーを対話可能と識別し、ディスクロージャーボタンまたはそのラベルをクリックすると拡張状態が変わることを容易に認識できるように、ポインターがボタンまたはそのラベルの上にあるときに背景色が変わり、境界線が現れ、カーソルがポインターに変わります。</li>
           <li>
-            Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
-            Instead of using transparency, the focused element has a thicker border and less padding.
-            When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
-            When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
+            オペレーティングシステムのハイコントラスト設定が有効なシステムでは透明な境界線が表示されるため、透明を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。
+            透明性を使用せず、フォーカスされた要素は境界線が太くなり、パディングが少なくなります。
+            要素がフォーカスを受け取ると、その境界線は0から2ピクセルに変わり、パディングは2ピクセル減少します。
+            要素がフォーカスを失うと、その境界線は2ピクセルから0に変わり、パディングは2ピクセル増加します。
           </li>
           <li>
-            To ensure the inline SVG arrow graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the arrows are synchronized with the color of the text content.
-            For example, the color of the arrow is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> and <code>fill</code> properties of the <code>polygon</code> elements used to draw the arrows.
-            If specific colors were instead used to specify the <code>polygon</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrows and the background or even make the arrows invisible if the color matched the high contrast mode background.<br>
-            Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast mode.
-            Some browsers do not use <code>auto</code> for the default value.
+            ハイコントラスト設定で色が反転したときにCSS内のインラインSVG矢印グラフィックが背景と十分なコントラストを持つように、矢印の色はテキストコンテンツの色と同期されます。
+            例えば、<code>polygon</code>要素の<code>stroke</code>および<code>fill</code>プロパティにCSSの<code>currentcolor</code>値を指定することで、ハイコントラストモードテキストの前景色と一致する矢印の色が設定されます。
+            <code>polygon</code>プロパティに特定の色を使用した場合、それらの色はハイコントラストモードでも変わらず、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致して矢印が見えなくなる可能性があります。<br>
+            注記: SVG要素はハイコントラストモードで<code>currentcolor</code>値が更新されるようにCSSの<code>forced-color-adjust</code>プロパティを<code>auto</code>に設定する必要があります。
+            一部のブラウザでは、デフォルト値として<code>auto</code>を使用しません。
           </li>
         </ul>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
@@ -279,28 +277,28 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <th>
                 <kbd>Tab</kbd>
               </th>
-              <td>Moves keyboard focus to the disclosure button.</td>
+              <td>キーボードフォーカスをディスクロージャーボタンに移動します。</td>
             </tr>
             <tr data-test-id="key-space-or-enter">
               <th>
-                <kbd>Space</kbd> or <br>
+                <kbd>Space</kbd> または <br>
                 <kbd>Enter</kbd>
               </th>
-              <td>Activates the disclosure button, which toggles the visibility of the long description.</td>
+              <td>ディスクロージャーボタンをアクティベートし、長い説明の表示を切り替えます。</td>
             </tr>
           </tbody>
         </table>
       </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>
@@ -310,7 +308,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
                 <code>aria-controls="ID_REFERENCE"</code>
               </th>
               <td><code>button</code></td>
-              <td>Identifies the element controlled by the disclosure button.</td>
+              <td>ディスクロージャーボタンによって制御される要素を特定します。</td>
             </tr>
             <tr data-test-id="aria-expanded">
               <td></td>
@@ -322,11 +320,11 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>hidden </em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="false"]</code>) synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
                   </li>
-                  <li>The visual indicator of the show/hide state is created using the CSS <code>:before</code> pseudo element and the <code>content</code> property so the image is reliably rendered in high contrast mode of operating systems and browsers.</li>
+                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステムおよびブラウザのハイコントラストモードで画像が確実にレンダリングされるように、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
                 </ul>
               </td>
             </tr>
@@ -340,11 +338,11 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>visible</em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="true"]</code>) synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
                   </li>
-                  <li>The visual indicator of the show/hide state is created using the CSS <code>:before</code> pseudo element and the <code>content</code> property so the image is reliably rendered in high contrast mode of operating systems and browsers.</li>
+                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステムおよびブラウザのハイコントラストモードで画像が確実にレンダリングされるように、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
                 </ul>
               </td>
             </tr>
@@ -353,7 +351,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:
@@ -367,7 +365,7 @@ <h2>JavaScript and CSS Source Code</h2>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTML Source Code</h2>
+        <h2 id="sc1_label">HTMLソースコード</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></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>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 31390dbc..7c892ad5 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.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>Example Disclosure Navigation Menu with Top-Level Links</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,170 +20,170 @@
   <body>
     <nav aria-label="Related Links" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/14">Related Issues</a></li>
-        <li><a href="../disclosure-pattern.html">Design Pattern</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/14">関連する Issues</a></li>
+        <li><a href="../disclosure-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>Example Disclosure Navigation Menu with Top-Level Links</h1>
+      <h1>トップレベルリンク付きディスクロージャー（表示/非表示）ナビゲーションメニューの例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7f54d9620e32231021aad607b7af7eeee5c24f54 -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <div class="advisement">
-          <h3>Important</h3>
+          <h3>重要</h3>
           <p>
-            Although this example uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role.
-            This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role.
-            Typical site navigation does not need all the
-            <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
+            この例では、ナビゲーションリンクのセットを指すために俗に「メニュー」という言葉を使用していますが、WAI-ARIAのメニューロールは使用していません。
+            このサイトナビゲーションの実装は、支援技術がメニューロールのウィジェットに期待する複雑な機能を提供しないため、メニューロールを使用していません。
+            典型的なサイトナビゲーションは、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーパターンによって指定されたキーボード操作</a>をすべて必要としません。
           </p>
         </div>
         <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
-          The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
-          Unlike the other <a href="disclosure-navigation.html">disclosure navigation menu example</a>, this example includes top-level links alongside the disclosure buttons.
+          次の例は、架空の大学のウェブサイトのナビゲーションバーにおいて、リンクのドロップダウンリストを表示および非表示にするために<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用する方法を示しています。
+          他の<a href="disclosure-navigation.html">ディスクロージャーナビゲーションメニューの例</a>とは異なり、この例にはディスクロージャーボタンの隣にトップレベルリンクが含まれています。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下が含まれます：</p>
         <ul>
-          <li><a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a></li>
-          <li><a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
-          <li><a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
-          <li><a href="../../menubar/examples/menubar-navigation.html">Navigation Menubar Example</a></li>
+          <li><a href="disclosure-navigation.html">ディスクロージャーナビゲーションメニューの例</a></li>
+          <li><a href="disclosure-faq.html">よくある質問への回答の表示/非表示の例</a></li>
+          <li><a href="disclosure-image-description.html">画像説明の表示/非表示の例</a></li>
+          <li><a href="../../menubar/examples/menubar-navigation.html">ナビゲーションメニューバーの例</a></li>
         </ul>
-        <h2>Example Usage Options</h2>
+        <h2>例の使用オプション</h2>
         <p>
-          This example demonstrates two different ways of implementing keyboard support.
-          Toggle between them with the following checkbox.
+          この例では、キーボードサポートを実装する2つの異なる方法を示しています。
+          次のチェックボックスでそれらの間を切り替えることができます。
         </p>
         <label for="arrow-behavior-switch">
           <input type="checkbox" id="arrow-behavior-switch" checked>
-          Include optional support for arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>
+          矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>のオプショナルサポートを含む
         </label>
       </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 id="ex1">
           <header class="sample-header">
-            <div class="title" id="id_website_title">Mythical University</div>
-            <div class="tagline">Using a disclosure + link pattern for navigation</div>
+            <div class="title" id="id_website_title">架空大学</div>
+            <div class="tagline">ナビゲーション用のディスクロージャー + リンクパターンの使用</div>
           </header>
-          <nav aria-label="Mythical University">
+          <nav aria-label="架空大学">
             <ul id="exTest" class="disclosure-nav">
               <li>
-                <a href="#mythical-page-content" class="main-link">About</a>
-                <button type="button" aria-expanded="false" aria-controls="id_about_menu" aria-label="More About pages"></button>
+                <a href="#mythical-page-content" class="main-link">概要</a>
+                <button type="button" aria-expanded="false" aria-controls="id_about_menu" aria-label="概要ページについてもっと"></button>
                 <ul id="id_about_menu" style="display: none">
                   <li>
-                    <a href="#mythical-page-content">Overview</a>
+                    <a href="#mythical-page-content">概観</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Administration</a>
+                    <a href="#mythical-page-content">管理部門</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Facts</a>
+                    <a href="#mythical-page-content">事実</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Campus Tours</a>
+                    <a href="#mythical-page-content">キャンパスツアー</a>
                   </li>
                 </ul>
               </li>
               <li>
-                <a href="#mythical-page-content" class="main-link">Admissions</a>
-                <button type="button" aria-expanded="false" aria-controls="id_admissions_menu" aria-label="More Admissions pages"></button>
+                <a href="#mythical-page-content" class="main-link">入学案内</a>
+                <button type="button" aria-expanded="false" aria-controls="id_admissions_menu" aria-label="入学案内ページについてもっと"></button>
                 <ul id="id_admissions_menu" style="display: none">
                   <li>
-                    <a href="#mythical-page-content">Apply</a>
+                    <a href="#mythical-page-content">申し込み</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Tuition</a>
+                    <a href="#mythical-page-content">授業料</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Sign Up</a>
+                    <a href="#mythical-page-content">サインアップ</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Visit</a>
+                    <a href="#mythical-page-content">訪問</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Photo Tour</a>
+                    <a href="#mythical-page-content">写真ツアー</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Connect</a>
+                    <a href="#mythical-page-content">連絡先</a>
                   </li>
                 </ul>
               </li>
               <li>
-                <a href="#mythical-page-content" class="main-link">Academics</a>
-                <button type="button" aria-expanded="false" aria-controls="id_academics_menu" aria-label="More Academics pages"></button>
+                <a href="#mythical-page-content" class="main-link">学術情報</a>
+                <button type="button" aria-expanded="false" aria-controls="id_academics_menu" aria-label="学術情報ページについてもっと"></button>
                 <ul id="id_academics_menu" style="display: none">
                   <li>
-                    <a href="#mythical-page-content">Colleges &amp; Schools</a>
+                    <a href="#mythical-page-content">学部・学校</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Programs of Study</a>
+                    <a href="#mythical-page-content">学習プログラム</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Honors Programs</a>
+                    <a href="#mythical-page-content">優秀プログラム</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Online Courses</a>
+                    <a href="#mythical-page-content">オンラインコース</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Course Explorer</a>
+                    <a href="#mythical-page-content">コースエクスプローラー</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Register for Class</a>
+                    <a href="#mythical-page-content">クラス登録</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Academic Calendar</a>
+                    <a href="#mythical-page-content">学術カレンダー</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Transcripts</a>
+                    <a href="#mythical-page-content">成績証明書</a>
                   </li>
                 </ul>
               </li>
             </ul>
           </nav>
           <div id="mythical-page-content" class="disclosure-page-content" tabindex="-1" role="region" aria-labelledby="mythical-page-heading">
-            <h3 id="mythical-page-heading">Home</h3>
+            <h3 id="mythical-page-heading">ホーム</h3>
             <p>
-              Sample content section.
-              Activating a link above will update and navigate to this region.
+              サンプルコンテンツセクション。
+              上記のリンクをアクティベートすると、この領域が更新され、ナビゲートされます。
             </p>
           </div>
-          <footer class="sample-footer">Mythical University footer information</footer>
+          <footer class="sample-footer">架空大学のフッター情報</footer>
         </div>
         <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
+        <h2>アクセシビリティ機能</h2>
         <ol>
-          <li>Since this set of links and disclosure buttons provides navigation for the mythical university web site, the list that contains them is wrapped in a navigation landmark named <q>Mythical University</q>.</li>
+          <li>このリンクとディスクロージャーボタンのセットは架空大学ウェブサイトのナビゲーションを提供するために、それらを含むリストは<q>架空大学</q>と名付けられたナビゲーションランドマーク内にラップされています。</li>
           <li>
-            The semantics of the list structure communicate the hierarchy of the navigation system to assistive technology users.
-            The top-level list has three items where each item contains a top-level link and an associated disclosure button.
-            The set of links controlled by a disclosure button is in a list nested inside the list item that contains the button.
+            リストの構造のセマンティクスは、ナビゲーションシステムの階層を支援技術の利用者に伝えます。
+            トップレベルのリンクとそれに関連するディスクロージャーボタンを含むトップレベルアイテムが3つあるリストです。
+            ディスクロージャーボタンによって制御されるリンクのセットは、そのボタンを含むリストアイテム内にネストされたリストにあります。
           </li>
           <li>
-            If a dropdown is open and focus is inside the navigation region, pressing <kbd>Esc</kbd> will close the dropdown.
-            Moving focus out of the navigation region also closes an open dropdown.
+            ドロップダウンが開いていて、ナビゲーション領域内にフォーカスがある場合、<kbd>Esc</kbd>を押すとドロップダウンが閉じます。
+            ナビゲーション領域外にフォーカスを移動すると、開いているドロップダウンも閉じます。
           </li>
           <li>
-            Optional navigation keys (Arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>):
+            オプショナルなナビゲーションキー（矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>）：
             <ol>
-              <li>Enabling the optional arrow key support prevents the default page scroll behavior when focus is contained within the navigation region.</li>
+              <li>オプショナルな矢印キーサポートを有効にすると、ナビゲーション領域内にフォーカスがある場合にデフォルトのページスクロール動作を防ぎます。</li>
               <li>
-                Optional navigation key support is primarily for the benefit of keyboard users who are not running a screen reader.
-                Screen readers that have both reading and interaction modes intercept these navigation keys and do not pass them to the page when the screen reader is in reading mode.
-                When interacting with this example, such screen readers are typically in reading mode because this example does not use a widget role that triggers screen reader interaction mode.
+                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを実行していないキーボード利用者の利益のためのものです。
+                読み取りおよびインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにある場合、これらのキーをページに渡しません。
+                この例と対話する際、そのようなスクリーンリーダーは通常、この例がスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないため、読み取りモードにあります。
               </li>
               <li>
-                If implemented, the optional navigation keys supplement, but do not replace, tabbing among buttons and links.
-                This is because the buttons and links are not contained by an element with a widget role, such as <code>grid</code>, that is expected to occupy only one stop in the page <kbd>Tab</kbd> sequence and manage focus for all its descendants.
+                実装されている場合、オプショナルなナビゲーションキーは、ボタンとリンク間のタビングを補完しますが、置き換えません。
+                これは、ボタンとリンクが<code>grid</code>のようなウィジェットロールで囲まれておらず、そのロールがページ<kbd>Tab</kbd>シーケンスの中で1つの停止点を占め、そのすべての子孫のフォーカスを管理することが期待されていないためです。
               </li>
             </ol>
           </li>
@@ -191,12 +191,12 @@ <h2>Accessibility Features</h2>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2>キーボードサポート</h2>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
@@ -205,7 +205,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
                 <kbd>Tab</kbd><br>
                 <kbd>Shift + Tab</kbd>
               </th>
-              <td>Move keyboard focus among top-level links and buttons, and if a dropdown is open, through links in the dropdown.</td>
+              <td>トップレベルのリンクとボタン、およびドロップダウンが開いている場合はドロップダウン内のリンクを通じてキーボードフォーカスを移動します。</td>
             </tr>
             <tr data-test-id="key-enter-space">
               <th>
@@ -214,13 +214,13 @@ <h2 id="kbd_label">Keyboard Support</h2>
               </th>
               <td>
                 <ul>
-                  <li>If focus is on a disclosure button, activates the button, which toggles the visibility of the dropdown.</li>
+                  <li>フォーカスがディスクロージャーボタンにある場合、ボタンをアクティブにしてドロップダウンの可視性を切り替えます。</li>
                   <li>
-                    If focus is on a link:
+                    フォーカスがリンクにある場合：
                     <ul>
-                      <li>If any link has <code>aria-current</code> set, removes it.</li>
-                      <li>Sets <code>aria-current="page"</code> on the focused link.</li>
-                      <li>Activates the focused link.</li>
+                      <li>いずれかのリンクに<code>aria-current</code>が設定されている場合、それを削除します。</li>
+                      <li>フォーカスされたリンクに<code>aria-current="page"</code>を設定します。</li>
+                      <li>フォーカスされたリンクをアクティブにします。</li>
                     </ul>
                   </li>
                 </ul>
@@ -230,19 +230,19 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <th>
                 <kbd>Escape</kbd>
               </th>
-              <td>If a dropdown is open, closes it and sets focus on the button that controls that dropdown.</td>
+              <td>ドロップダウンが開いている場合、それを閉じてそのドロップダウンを制御するボタンにフォーカスを設定します。</td>
             </tr>
             <tr data-test-id="key-arrows">
               <th>
                 <kbd>Down Arrow</kbd> or <br>
                 <kbd>Right Arrow</kbd><br>
-                (Optional)
+                (オプション)
               </th>
               <td>
                 <ul>
-                  <li>If focus is on a top-level link or button with a collapsed dropdown, and it is not the last top-level item, moves focus to the next top-level link or button.</li>
-                  <li>if focus is on a top-level button and its dropdown is expanded, moves focus to the first link in the dropdown.</li>
-                  <li>If focus is on a link within an expanded dropdown, and it is not the last link, moves focus to the next link.</li>
+                  <li>フォーカスがトップレベルのリンクまたは折りたたまれたドロップダウンのボタンにあり、最後のトップレベルアイテムではない場合、次のトップレベルのリンクまたはボタンにフォーカスを移動します。</li>
+                  <li>フォーカスがトップレベルのボタンにあり、そのドロップダウンが展開されている場合、ドロップダウン内の最初のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最後のリンクではない場合、次のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
@@ -250,30 +250,30 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <th>
                 <kbd>Up Arrow</kbd> or <br>
                 <kbd>Left Arrow</kbd><br>
-                (Optional)
+                (オプション)
               </th>
               <td>
                 <ul>
-                  <li>If focus is on a top-level link or button, and it is not the first item, moves focus to the previous link or button.</li>
-                  <li>If focus is on a link within an expanded dropdown, and it is not the first link, moves focus to the previous link.</li>
+                  <li>フォーカスがトップレベルのリンクまたはボタンにあり、最初のアイテムではない場合、前のリンクまたはボタンにフォーカスを移動します。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最初のリンクではない場合、前のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="key-home-end">
-              <th><kbd>Home</kbd> (Optional)</th>
+              <th><kbd>Home</kbd> (オプション)</th>
               <td>
                 <ul>
-                  <li>If focus is on a top-level link button, and it is not the first item, moves focus to the first item.</li>
-                  <li>If focus is on a link within an expanded dropdown, and it is not the first link, moves focus to the first link.</li>
+                  <li>フォーカスがトップレベルのリンクボタンにあり、最初のアイテムではない場合、最初のアイテムにフォーカスを移動します。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最初のリンクではない場合、最初のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="key-home-end">
-              <th><kbd>End</kbd> (Optional)</th>
+              <th><kbd>End</kbd> (オプション)</th>
               <td>
                 <ul>
-                  <li>If focus is on a top-level link or button, and it is not the last item, moves focus to the last item.</li>
-                  <li>If focus is on a link within an expanded dropdown, and it is not the last link, moves focus to the last link.</li>
+                  <li>フォーカスがトップレベルのリンクまたはボタンにあり、最後のアイテムではない場合、最後のアイテムにフォーカスを移動します。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最後のリンクではない場合、最後のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
@@ -282,14 +282,14 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </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>
@@ -301,7 +301,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td>
                 <code>button</code>
               </td>
-              <td>Indicates that the disclosure button controls visibility of the container identified by the <code>IDREF</code> value.</td>
+              <td>IDREF値で識別されるコンテナの可視性をディスクロージャーボタンが制御していることを示します。</td>
             </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
@@ -313,9 +313,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>hidden</em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的な状態を同期させます。
                   </li>
                 </ul>
               </td>
@@ -330,9 +330,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>visible</em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的な状態を同期させます。
                   </li>
                 </ul>
               </td>
@@ -345,29 +345,29 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td>
                 <code>a</code>
               </td>
-              <td>Indicates that the page referenced by the link is currently displayed.</td>
+              <td>リンクによって参照されるページが現在表示されていることを示します。</td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScriptおよびCSSのソースコード</h2>
         <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
         <ul id="css_js_files">
           <li>
-            CSS:
+            CSS：
             <a href="css/disclosure-navigation.css" type="tex/css">disclosure-navigation.css</a>
           </li>
           <li>
-            Javascript:
+            Javascript：
             <a href="js/disclosureMenu.js" type="text/javascript">disclosureMenu.js</a>
           </li>
         </ul>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTML Source Code</h2>
+        <h2 id="sc1_label">HTMLソースコード</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></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>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 75d6c440..e3ea0629 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.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>Example Disclosure Navigation Menu</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,131 +20,131 @@
   <body>
     <nav aria-label="Related Links" class="feedback">
       <ul>
-        <li><a href="https://github.com/w3c/aria-practices/projects/14">Related Issues</a></li>
-        <li><a href="../disclosure-pattern.html">Design Pattern</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/14">関連する Issues</a></li>
+        <li><a href="../disclosure-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
     <main>
-      <h1>Example Disclosure Navigation Menu</h1>
+      <h1>ディスクロージャー（表示/非表示）ナビゲーションメニューの例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7f54d9620e32231021aad607b7af7eeee5c24f54 -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <div class="advisement">
-          <h3>Important</h3>
+          <h3>重要</h3>
           <p>
-            Although this example uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role.
-            This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role.
-            Typical site navigation does not need all the
-            <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
+            この例では、ナビゲーションリンクのセットを指すために日常的に「メニュー」という言葉を使用していますが、WAI-ARIAのmenuロールは使用していません。
+            サイトナビゲーションのこの実装は、支援技術がmenuロールを持つウィジェットに期待する複雑な機能を提供しないため、menuロールを使用していません。
+            典型的なサイトナビゲーションには、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーのパターンによって指定されたキーボード操作</a>のすべてが必要ありません。
           </p>
         </div>
         <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
-          The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
-          Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section.
+          次の例は、架空の大学のウェブサイトのナビゲーションバーにおいて、<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用してリンクのドロップダウンリストを表示および非表示にする方法を示しています。
+          各ディスクロージャーボタンはウェブサイトのセクションを表しており、展開するとそのセクション内のページへのリンクリストが表示されます。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下が含まれます：</p>
         <ul>
-          <li><a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
-          <li><a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
-          <li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
-          <li><a href="../../menubar/examples/menubar-navigation.html">Navigation Menubar Example</a></li>
+          <li><a href="disclosure-faq.html">よくある質問への回答の表示/非表示の例</a></li>
+          <li><a href="disclosure-image-description.html">画像説明の表示/非表示の例</a></li>
+          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付き表示/非表示ナビゲーションメニューの例</a></li>
+          <li><a href="../../menubar/examples/menubar-navigation.html">ナビゲーションメニューバーの例</a></li>
         </ul>
-        <h2>Example Usage Options</h2>
+        <h2>例の使用方法</h2>
         <p>
-          This example demonstrates two different ways of implementing keyboard support.
-          Toggle between them with the following checkbox.
+          この例は、キーボードサポートを実装する2つの異なる方法を示しています。
+          以下のチェックボックスで切り替えます。
         </p>
         <label for="arrow-behavior-switch">
           <input type="checkbox" id="arrow-behavior-switch" checked>
-          Include optional support for arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>
+          矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>のサポートを含める
         </label>
       </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 id="ex1">
-          <nav aria-label="Mythical University">
+          <nav aria-label="架空大学">
             <ul id="exTest" class="disclosure-nav">
               <li>
-                <button type="button" aria-expanded="true" aria-controls="id_about_menu">About</button>
+                <button type="button" aria-expanded="true" aria-controls="id_about_menu">概要</button>
                 <ul id="id_about_menu">
                   <li>
-                    <a href="#mythical-page-content">Overview</a>
+                    <a href="#mythical-page-content">概観</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Administration</a>
+                    <a href="#mythical-page-content">管理部門</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Facts</a>
+                    <a href="#mythical-page-content">事実</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Campus Tours</a>
+                    <a href="#mythical-page-content">キャンパスツアー</a>
                   </li>
                 </ul>
               </li>
               <li>
-                <button type="button" aria-expanded="true" aria-controls="id_admissions_menu">Admissions</button>
+                <button type="button" aria-expanded="true" aria-controls="id_admissions_menu">入学案内</button>
                 <ul id="id_admissions_menu">
                   <li>
-                    <a href="#mythical-page-content">Apply</a>
+                    <a href="#mythical-page-content">申し込み</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Tuition</a>
+                    <a href="#mythical-page-content">授業料</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Sign Up</a>
+                    <a href="#mythical-page-content">サインアップ</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Visit</a>
+                    <a href="#mythical-page-content">訪問</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Photo Tour</a>
+                    <a href="#mythical-page-content">フォトツアー</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Connect</a>
+                    <a href="#mythical-page-content">接続</a>
                   </li>
                 </ul>
               </li>
               <li>
-                <button type="button" aria-expanded="true" aria-controls="id_academics_menu">Academics</button>
+                <button type="button" aria-expanded="true" aria-controls="id_academics_menu">学術</button>
                 <ul id="id_academics_menu">
                   <li>
-                    <a href="#mythical-page-content">Colleges &amp; Schools</a>
+                    <a href="#mythical-page-content">学部・学校</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Programs of Study</a>
+                    <a href="#mythical-page-content">学習プログラム</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Honors Programs</a>
+                    <a href="#mythical-page-content">優秀プログラム</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Online Courses</a>
+                    <a href="#mythical-page-content">オンラインコース</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Course Explorer</a>
+                    <a href="#mythical-page-content">コースエクスプローラー</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Register for Class</a>
+                    <a href="#mythical-page-content">クラス登録</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Academic Calendar</a>
+                    <a href="#mythical-page-content">学術カレンダー</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">Transcripts</a>
+                    <a href="#mythical-page-content">成績証明書</a>
                   </li>
                 </ul>
               </li>
             </ul>
           </nav>
-          <div id="mythical-page-content" class="disclosure-page-content" tabindex="-1" role="region" aria-label="Mythical University sample page content">
-            <h3 id="mythical-page-heading">Mythical University</h3>
+          <div id="mythical-page-content" class="disclosure-page-content" tabindex="-1" role="region" aria-label="架空大学のサンプルページコンテンツ">
+            <h3 id="mythical-page-heading">架空大学</h3>
             <p>
-              Sample content section.
-              Activating a link above will update and navigate to this region.
+              サンプルコンテンツセクション。
+              上記のリンクを活性化すると、この領域が更新されてナビゲートされます。
             </p>
           </div>
         </div>
@@ -152,33 +152,31 @@ <h3 id="mythical-page-heading">Mythical University</h3>
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
+        <h2>アクセシビリティ機能</h2>
         <ol>
-          <li>Since this set of disclosure buttons controls visibility of navigation links for the mythical university web site, the list that contains them is wrapped in a navigation landmark named <q>Mythical University</q>.</li>
+          <li>この一連のディスクロージャーボタンは神話大学ウェブサイトのナビゲーションリンクの表示を制御するため、それらを含むリストは<q>神話大学</q>という名前のナビゲーションランドマークでラップされています。</li>
           <li>
-            The semantics of the list structure communicates the hierarchy of the navigation system to assistive technology users.
-            The top-level set of three buttons is in a list of three items, and the set of links controlled by each button is contained within a list nested inside the item with the controlling button.
+            リスト構造のセマンティクスは、支援技術の利用者にナビゲーションシステムの階層を伝えます。
+            3つのボタンのトップレベルセットは、3つのアイテムのリストにあり、各ボタンによって制御されるリンクのセットは、制御ボタンを含むアイテム内のネストされたリスト内に含まれています。
           </li>
           <li>
-            If a dropdown is open and focus is inside the navigation region, pressing <kbd>Esc</kbd> will close the dropdown.
-            Moving focus out of the navigation region also closes an open dropdown.
-            Implementing this <kbd>Esc</kbd> behavior is necessary to meet the WCAG 2.1
-            <a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">1.4.13: Content on Hover or Focus</a>
-            criterion.
+            ドロップダウンが開かれ、フォーカスがナビゲーション領域内にある場合、<kbd>Esc</kbd>を押すとドロップダウンが閉じます。
+            ナビゲーション領域からフォーカスを移動すると、開いているドロップダウンも閉じます。
+            この<kbd>Esc</kbd>の振る舞いを実装することは、WCAG 2.1の<a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">1.4.13: ホバーまたはフォーカス時のコンテンツ</a>基準を満たすために必要です。
           </li>
-          <li>The visual indicator of the show/hide state is created using CSS <code>::after</code> pseudo element border styles so the caret is reliably rendered in high contrast mode of operating systems and browsers.</li>
+          <li>表示/非表示の状態の視覚的インジケーターは、CSSの<code>::after</code>疑似要素の境界スタイルを使用して作成されるため、オペレーティングシステムとブラウザのハイコントラストモードでキャレットが確実にレンダリングされます。</li>
           <li>
-            Optional navigation keys (Arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>):
+            オプショナルなナビゲーションキー（矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>）:
             <ol>
-              <li>Implementing the optional arrow key support prevents the default page scroll behavior when focus is contained within the navigation region.</li>
+              <li>オプショナルな矢印キーサポートを実装することで、フォーカスがナビゲーション領域内に含まれる場合にデフォルトのページスクロール動作を防ぎます。</li>
               <li>
-                Optional navigation key support is primarily for the benefit of keyboard users who are not running a screen reader.
-                Screen readers that have both reading and interaction modes intercept these navigation keys and do not pass them to the page when the screen reader is in reading mode.
-                When interacting with this example, such screen readers are typically in reading mode because this example does not use a widget role that triggers screen reader interaction mode.
+                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。
+                読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーを捕捉し、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。
+                この例とやり取りするとき、そのようなスクリーンリーダーは通常、この例がスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないため、読み取りモードにあります。
               </li>
               <li>
-                If implemented, the optional navigation keys supplement, but do not replace, tabbing among buttons and links.
-                This is because the buttons and links are not contained by an element with a widget role, such as <code>grid</code>, that is expected to occupy only one stop in the page <kbd>Tab</kbd> sequence and manage focus for all its descendants.
+                実装された場合、オプショナルなナビゲーションキーは、ボタンやリンク間のタブ移動を補完しますが、それに置き換わるものではありません。
+                これは、ボタンとリンクが、ページの<kbd>Tab</kbd>シーケンスの中で1つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される<code>grid</code>のようなウィジェットロールを持つ要素に含まれていないためです。
               </li>
             </ol>
           </li>
@@ -186,12 +184,12 @@ <h2>Accessibility Features</h2>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
@@ -200,22 +198,22 @@ <h2 id="kbd_label">Keyboard Support</h2>
                 <kbd>Tab</kbd><br>
                 <kbd>Shift + Tab</kbd>
               </th>
-              <td>Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.</td>
+              <td>トップレベルのボタン間、およびドロップダウンが開いている場合は、ドロップダウン内のリンクを通じてキーボードフォーカスを移動します。</td>
             </tr>
             <tr data-test-id="key-enter-space">
               <th>
-                <kbd>Space</kbd> or <br>
+                <kbd>Space</kbd>または<br>
                 <kbd>Enter</kbd>
               </th>
               <td>
                 <ul>
-                  <li>If focus is on a disclosure button, activates the button, which toggles the visibility of the dropdown.</li>
+                  <li>フォーカスがディスクロージャーボタン上にある場合、ボタンをアクティブにして、ドロップダウンの表示を切り替えます。</li>
                   <li>
-                    If focus is on a link:
+                    フォーカスがリンク上にある場合：
                     <ul>
-                      <li>If any link has <code>aria-current</code> set, removes it.</li>
-                      <li>Sets <code>aria-current="page"</code> on the focused link.</li>
-                      <li>Activates the focused link.</li>
+                      <li>任意のリンクに<code>aria-current</code>が設定されている場合は、それを削除します。</li>
+                      <li>フォーカスが当たっているリンクに<code>aria-current="page"</code>を設定します。</li>
+                      <li>フォーカスが当たっているリンクをアクティブにします。</li>
                     </ul>
                   </li>
                 </ul>
@@ -225,50 +223,50 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <th>
                 <kbd>Escape</kbd>
               </th>
-              <td>If a dropdown is open, closes it and sets focus on the button that controls that dropdown.</td>
+              <td>ドロップダウンが開いている場合、それを閉じてそのドロップダウンを制御するボタンにフォーカスを設定します。</td>
             </tr>
             <tr data-test-id="key-arrows">
               <th>
-                <kbd>Down Arrow</kbd> or <br>
+                <kbd>Down Arrow</kbd>または<br>
                 <kbd>Right Arrow</kbd><br>
-                (Optional)
+                (オプショナル)
               </th>
               <td>
                 <ul>
-                  <li>If focus is on a button and its dropdown is collapsed, and it is not the last button, moves focus to the next button.</li>
-                  <li>if focus is on a button and its dropdown is expanded, moves focus to the first link in the dropdown.</li>
-                  <li>If focus is on a link, and it is not the last link, moves focus to the next link.</li>
+                  <li>フォーカスがボタン上にあり、そのドロップダウンが折りたたまれていて、それが最後のボタンではない場合、次のボタンにフォーカスを移動します。</li>
+                  <li>フォーカスがボタン上にあり、そのドロップダウンが展開されている場合、ドロップダウン内の最初のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがリンク上にあり、それが最後のリンクではない場合、次のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="key-arrows">
               <th>
-                <kbd>Up Arrow</kbd> or <br>
+                <kbd>Up Arrow</kbd>または<br>
                 <kbd>Left Arrow</kbd><br>
-                (Optional)
+                (オプショナル)
               </th>
               <td>
                 <ul>
-                  <li>If focus is on a button, and it is not the first button, moves focus to the previous button.</li>
-                  <li>If focus is on a link, and it is not the first link, moves focus to the previous link.</li>
+                  <li>フォーカスがボタン上にあり、それが最初のボタンではない場合、前のボタンにフォーカスを移動します。</li>
+                  <li>フォーカスがリンク上にあり、それが最初のリンクではない場合、前のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="key-home-end">
-              <th><kbd>Home</kbd> (Optional)</th>
+              <th><kbd>Home</kbd> (オプショナル)</th>
               <td>
                 <ul>
-                  <li>If focus is on a button, and it is not the first button, moves focus to the first button.</li>
-                  <li>If focus is on a link, and it is not the first link, moves focus to the first link.</li>
+                  <li>フォーカスがボタン上にあり、それが最初のボタンではない場合、最初のボタンにフォーカスを移動します。</li>
+                  <li>フォーカスがリンク上にあり、それが最初のリンクではない場合、最初のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="key-home-end">
-              <th><kbd>End</kbd> (Optional)</th>
+              <th><kbd>End</kbd> (オプショナル)</th>
               <td>
                 <ul>
-                  <li>If focus is on a button, and it is not the last button, moves focus to the last button.</li>
-                  <li>If focus is on a link, and it is not the last link, moves focus to the last link.</li>
+                  <li>フォーカスがボタン上にあり、それが最後のボタンではない場合、最後のボタンにフォーカスを移動します。</li>
+                  <li>フォーカスがリンク上にあり、それが最後のリンクではない場合、最後のリンクにフォーカスを移動します。</li>
                 </ul>
               </td>
             </tr>
@@ -277,14 +275,14 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </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>
@@ -296,7 +294,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td>
                 <code>button</code>
               </td>
-              <td>The disclosure button controls visibility of the container identified by the <code>IDREF</code> value.</td>
+              <td>ディスクロージャーボタンは、<code>IDREF</code>値で識別されるコンテナの表示を制御します。</td>
             </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
@@ -308,9 +306,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>hidden</em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクター（例: <code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
                   </li>
                 </ul>
               </td>
@@ -325,9 +323,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </td>
               <td>
                 <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>visible</em>.</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
                   <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
+                    CSS属性セレクター（例: <code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
                   </li>
                 </ul>
               </td>
@@ -340,15 +338,15 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td>
                 <code>a</code>
               </td>
-              <td>Indicates that the page referenced by the link is currently displayed.</td>
+              <td>リンクによって参照されるページが現在表示されていることを示します。</td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
-        <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
+        <h2>JavaScriptおよびCSSソースコード</h2>
+        <!--  jsおよびcssファイルがこの例の名前で命名された後、以下の2つのリンクのhrefとテキストを適切なjsおよびcssファイルを参照するように変更します。  -->
         <ul id="css_js_files">
           <li>
             CSS:
@@ -362,7 +360,7 @@ <h2>JavaScript and CSS Source Code</h2>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTML Source Code</h2>
+        <h2 id="sc1_label">HTMLソースコード</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></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>

From 3a8f30dd630fc35367ab8b9a11e5aa87ce01c8af Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Mon, 15 Apr 2024 22:46:42 +0900
Subject: [PATCH 03/10] =?UTF-8?q?Disclosure=E3=83=91=E3=82=BF=E3=83=BC?=
 =?UTF-8?q?=E3=83=B3=E3=81=AE=E3=83=81=E3=82=A7=E3=83=83=E3=82=AF=EF=BC=86?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/patterns/disclosure/disclosure-pattern.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index db0637cb..ac146d4a 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -20,9 +20,9 @@ <h1>ディスクロージャー（表示/非表示）パターン</h1>
       <section id="about">
         <h2>このパターンについて</h2>
         <p>
-          ディスクロージャーは、コンテンツを折りたたんで隠す（非表示）または展開して表示する（表示）ことができるウィジェットです。
-          これには、ディスクロージャー <a href="../button/button-pattern.html">ボタン</a>と、ボタンによって可視性が制御されるコンテンツのセクションという、2つの要素があります。
-          制御されたコンテンツが隠されているとき、ボタンは通常、追加のコンテンツが表示されることを示唆する右向きの矢印または三角形でスタイルされた典型的なプッシュボタンとしてスタイルされます。
+          ディスクロージャーは、コンテンツを折りたたむ（非表示）または展開（表示）することができるウィジェットです。
+          ディスクロージャーには次の 2 つの要素があります：ディスクロージャー <a href="../button/button-pattern.html">ボタン</a>と、ボタンによって可視性が制御されるコンテンツのセクションです。
+          制御されたコンテンツが非表示のとき、ボタンはしばしば、追加のコンテンツが表示されることを示唆する右向きの矢印または三角形が付いた典型的なプッシュボタンとしてスタイリングされます。
           コンテンツが表示されているとき、矢印または三角形は通常、下を指します。
         </p>
       </section>
@@ -52,11 +52,11 @@ <h2>WAI-ARIA ロール、ステート、およびプロパティ</h2>
         <ul>
           <li>コンテンツを表示および非表示にする要素はロール<a href="#button" class="role-reference">button</a>を持ちます。</li>
           <li>
-            コンテンツが表示されているとき、ロール<code>button</code>を持つ要素は<a href="#aria-expanded" class="state-reference">aria-expanded</a>が<code>true</code>に設定されます。
-            コンテンツエリアが隠されている場合は、<code>false</code>に設定されます。
+            コンテンツが表示されているとき、ロール <code>button</code> を持つ要素は <a href="#aria-expanded" class="state-reference">aria-expanded</a> が <code>true</code> に設定されます。
+            コンテンツエリアが非表示のとき、<code>false</code> に設定されます。
           </li>
           <li>
-            オプションで、ロール<code>button</code>を持つ要素は、表示または非表示にされるすべてのコンテンツを含む要素を参照する<a href="#aria-controls" class="property-reference">aria-controls</a>の値を指定しています。
+            オプションで、ロール <code>button</code> を持つ要素は、表示または非表示にされるすべてのコンテンツを含む要素を参照する<a href="#aria-controls" class="property-reference">aria-controls</a>の値を指定しています。
           </li>
         </ul>
       </section>

From 5520dcfd50fb7b2d3b9d10759821f5306013bb34 Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Mon, 15 Apr 2024 22:47:01 +0900
Subject: [PATCH 04/10] =?UTF-8?q?Disclosure=E3=81=AEFAQ=E3=81=AE=E4=BE=8B?=
 =?UTF-8?q?=E3=81=AE=E3=83=81=E3=82=A7=E3=83=83=E3=82=AF=EF=BC=86=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/index/index.html                      | 20 ++++-----
 .../disclosure/examples/disclosure-faq.html   | 44 +++++++++----------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/content/index/index.html b/content/index/index.html
index e9f3c4d4..2f4f582c 100644
--- a/content/index/index.html
+++ b/content/index/index.html
@@ -522,10 +522,10 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <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/combobox/examples/combobox-select-only.html">Select-Only Combobox</a></li>
                 <li><a href="../patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
-                <li><a href="../patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/disclosure/examples/disclosure-image-description.html">Disclosure (Show/Hide) for Image Description</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
-                <li><a href="../patterns/disclosure/examples/disclosure-navigation.html">Disclosure Navigation Menu</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/disclosure/examples/disclosure-faq.html">よくある質問への回答のディスクロージャー（表示/非表示）の例</a></li>
+                <li><a href="../patterns/disclosure/examples/disclosure-image-description.html">画像説明のディスクロージャー（表示/非表示）の例</a></li>
+                <li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">トップレベルリンク付きディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
+                <li><a href="../patterns/disclosure/examples/disclosure-navigation.html">ディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
                 <li><a href="../patterns/menu-button/examples/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/menu-button/examples/menu-button-actions.html">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/menu-button/examples/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -540,8 +540,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/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
-                <li><a href="../patterns/disclosure/examples/disclosure-navigation.html">Disclosure Navigation Menu</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">トップレベルリンク付きディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
+                <li><a href="../patterns/disclosure/examples/disclosure-navigation.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>
               </ul>
@@ -581,10 +581,10 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <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/combobox/examples/combobox-select-only.html">Select-Only Combobox</a></li>
                 <li><a href="../patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
-                <li><a href="../patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/disclosure/examples/disclosure-image-description.html">Disclosure (Show/Hide) for Image Description</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
-                <li><a href="../patterns/disclosure/examples/disclosure-navigation.html">Disclosure Navigation Menu</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/disclosure/examples/disclosure-faq.html">よくある質問への回答のディスクロージャー（表示/非表示）の例</a></li>
+                <li><a href="../patterns/disclosure/examples/disclosure-image-description.html">画像説明のディスクロージャー（表示/非表示）の例</a></li>
+                <li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">トップレベルリンク付きディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
+                <li><a href="../patterns/disclosure/examples/disclosure-navigation.html">ディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
                 <li><a href="../patterns/listbox/examples/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="../patterns/menu-button/examples/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/menu-button/examples/menu-button-actions.html">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index d2347851..f963f196 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -37,12 +37,12 @@ <h2>この例について</h2>
         <p>類似の例には以下が含まれます：</p>
         <ul>
           <li>
-            <a href="disclosure-image-description.html">画像説明の表示/非表示の例</a>
+            <a href="disclosure-image-description.html">画像説明のディスクロージャー（表示/非表示）の例</a>
           </li>
           <li>
-            <a href="disclosure-navigation.html">ナビゲーションメニューの表示/非表示の例</a>
+            <a href="disclosure-navigation.html">ディスクロージャーナビゲーションメニューの例</a>
           </li>
-          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付きナビゲーションメニューの表示/非表示の例</a></li>
+          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付きディスクロージャーナビゲーションメニューの例</a></li>
         </ul>
       </section>
 
@@ -75,7 +75,7 @@ <h3>駐車場のよくある質問</h3>
             </dt>
             <dd>
               <div id="faq3_desc" class="desc">
-                すべての施設は、毎日2:00 am - 6:00 amは制限されています。休日や休憩を問わず例外はありません。ただし、24時間レンタルスペース、24時間レンタルロット、および障害者用駐車場は常に守られます。
+                すべての施設は、毎日午前2時から午前6時までの間、利用制限があります。カレンダーに正式に<q>休日</q>として記載されている日を除き、いかなる祝日や休会期間についても例外はありません。注意：24時間レンタルスペース、24時間レンタルロットおよび障害者用駐車場は常時適用されます。
               </div>
             </dd>
             <dt>
@@ -95,15 +95,15 @@ <h3>駐車場のよくある質問</h3>
         <h2>アクセシビリティの特徴</h2>
         <ul>
           <li>
-            FAQの意味構造は、ネイティブの<code>dl</code>、<code>dt</code>および<code>dd</code>要素を使用して伝えられます。<code>dt</code>要素にボタンロールを適用する代わりに、<code>dt</code>要素内に<code>button</code>要素が含まれているため、リスト構造が支援技術に伝えられます。同様に、ボタンによって表示または非表示にされる回答コンテンツを含む各<code>div</code>要素は<code>dd</code>要素の子です。<code>dl</code>構造は、一部の回答が非表示であっても、すべての<code>dd</code>要素がDOMに存在するため、常に完全です。
+            FAQの意味構造は、ネイティブの <code>dl</code>、<code>dt</code>および<code>dd</code> 要素を使用して伝えられます。リスト構造が支援技術に伝わるようにするため、<code>dt</code> 要素にボタンロールを適用する代わりに、<code>dt</code> 要素内に <code>button</code> 要素が含まれるようにします。同様に、ボタンによって表示または非表示にされる回答コンテンツを含む各 <code>div</code> 要素は <code>dd</code> 要素の子です。一部の回答が非表示であってもすべての <code>dd</code> 要素が DOM に存在するため、<code>dl</code> 構造は常に満たされています。
           </li>
-          <li>視覚障害のある人がディスクロージャーをインタラクティブとして識別しやすくし、ディスクロージャーボタンまたはそのラベルをクリックすると拡張状態が変わることを認識しやすくするために、ポインターがボタンまたはそのラベルの上にあるときに、背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
+          <li>視覚障害のある人がディスクロージャーをインタラクティブな要素として識別しやすくし、ディスクロージャーボタンまたはそのラベルをクリックすることで展開状態が変わることを認識しやすくするために、ポインターがボタンまたはそのラベルの上にあるときに、背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
           <li>
-            オペレーティングシステムのハイコントラスト設定が有効になっている一部のシステムで透明な境界線が表示されるため、透明性を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明性の代わりに、フォーカスされた要素にはより太い境界線と少ないパディングがあります。要素がフォーカスを受けると、その境界線は0から2ピクセルに変わり、パディングは2ピクセル減少します。要素がフォーカスを失うと、その境界線は2ピクセルから0に変わり、パディングは2ピクセル増加します。
+            オペレーティングシステムのハイコントラスト設定が有効になっている一部のシステムでは、透明な境界線は可視であるため、透明性を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明性の代わりに、フォーカスされた要素は境界線が太くなりなりパディングが少なくなります。要素がフォーカスを受けると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
           </li>
           <li>
-            ハイコントラスト設定で色が反転したときにCSS内のインラインSVG矢印グラフィックスが背景と十分なコントラストを持つようにするため、矢印の色はテキストコンテンツの色と同期されます。たとえば、<code>polygon</code>要素の<code>stroke</code>および<code>fill</code>プロパティにCSSの<code>currentcolor</code>値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。特定の色を使用して<code>polygon</code>プロパティを指定した場合、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
-            注記：SVG要素は、ハイコントラストモードで<code>currentcolor</code>値が更新されるように、CSS<code>forced-color-adjust</code>プロパティを<code>auto</code>に設定する必要があります。一部のブラウザーはデフォルト値として<code>auto</code>を使用しません。
+            ハイコントラスト設定で色が反転したときに CSS 内のインライン SVG 矢印画像が背景と十分なコントラストを持つようにするため、矢印の色はテキストコンテンツの色と同期されます。たとえば、矢印を描画するために使われる <code>polygon</code> 要素の <code>stroke</code> および <code>fill</code> プロパティに CSS の <code>currentcolor</code> 値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。特定の色を使用して <code>polygon</code> プロパティを指定した場合、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
+            注記：SVG 要素は、ハイコントラストモードで <code>currentcolor</code> 値が更新されるように、CSS <code>forced-color-adjust</code> プロパティを <code>auto</code> に設定する必要があります。一部のブラウザーはデフォルト値として <code>auto</code> を使用しません。
           </li>
         </ul>
       </section>
@@ -122,21 +122,21 @@ <h2 id="kbd_label">キーボードサポート</h2>
               <th>
                 <kbd>Tab</kbd>
               </th>
-              <td>キーボードフォーカスをディスクロージャーボタンに移動します。</td>
+              <td>キーボードフォーカスをディスクロージャーボタンに移動する。</td>
             </tr>
             <tr data-test-id="key-enter-or-space">
               <th>
-                <kbd>Space</kbd>または<br>
+                <kbd>Space</kbd> 又は<br>
                 <kbd>Enter</kbd>
               </th>
-              <td>ディスクロージャーボタンをアクティベートし、質問への回答の表示状態を切り替えます。</td>
+              <td>ディスクロージャーボタンをアクティベートし、質問への回答の可視性を切り替える。</td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2 id="rps_label">ロール、プロパティ、ステート、およびTabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
@@ -153,7 +153,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
                 <code>aria-controls="ID_REFERENCE"</code>
               </th>
               <td><code>button</code></td>
-              <td>ディスクロージャーボタンによって制御される要素を識別します。</td>
+              <td>ディスクロージャーボタンによって制御される要素を識別する。</td>
             </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
@@ -165,11 +165,11 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナーが<em>非表示</em>であることを示す。</li>
                   <li>
-                    CSS属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚状態を同期します。
+                    CSS 属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚状態を同期する。
                   </li>
-                  <li>表示/非表示の状態の視覚的指標は、オペレーティングシステムおよびブラウザのハイコントラストモードで信頼性のあるレンダリングを保証するために、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
+                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザのハイコントラストモードで確実にレンダリングされるよう、CSS の <code>:before</code> 疑似要素と <code>content</code> プロパティを使用して作成されている。</li>
                 </ul>
               </td>
             </tr>
@@ -183,11 +183,11 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナーが<em>表示</em>されていることを示す。</li>
                   <li>
-                    CSS属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚状態を同期します。
+                    CSS 属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚状態を同期する。
                   </li>
-                  <li>表示/非表示の状態の視覚的指標は、オペレーティングシステムおよびブラウザのハイコントラストモードで信頼性のあるレンダリングを保証するために、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
+                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザのハイコントラストモードで確実にレンダリングされるよう、CSS の <code>:before</code> 疑似要素と <code>content</code> プロパティを使用して作成されている。</li>
                 </ul>
               </td>
             </tr>
@@ -196,7 +196,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
       </section>
 
       <section>
-        <h2>JavaScriptおよびCSSのソースコード</h2>
+        <h2>JavaScript 及び　CSS のソースコード</h2>
         <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
         <ul id="css_js_files">
           <li>
@@ -211,7 +211,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_start_sep sc1_label" aria-label="Start of"></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>

From e21e85c3a7a72d2ea99faf4d70fd1a0b0989125d Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Tue, 16 Apr 2024 22:27:32 +0900
Subject: [PATCH 05/10] =?UTF-8?q?Disclosure=E3=81=AE=E7=94=BB=E5=83=8F?=
 =?UTF-8?q?=E8=AA=AC=E6=98=8E=E3=81=AE=E4=BE=8B=E3=81=AE=E3=83=81=E3=82=A7?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=EF=BC=86=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../disclosure/examples/disclosure-faq.html   | 18 ++---
 .../disclosure-image-description.html         | 80 +++++++++----------
 2 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index f963f196..5b7c3e6c 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -92,18 +92,18 @@ <h3>駐車場のよくある質問</h3>
       </section>
 
       <section>
-        <h2>アクセシビリティの特徴</h2>
+        <h2>アクセシビリティ機能</h2>
         <ul>
           <li>
             FAQの意味構造は、ネイティブの <code>dl</code>、<code>dt</code>および<code>dd</code> 要素を使用して伝えられます。リスト構造が支援技術に伝わるようにするため、<code>dt</code> 要素にボタンロールを適用する代わりに、<code>dt</code> 要素内に <code>button</code> 要素が含まれるようにします。同様に、ボタンによって表示または非表示にされる回答コンテンツを含む各 <code>div</code> 要素は <code>dd</code> 要素の子です。一部の回答が非表示であってもすべての <code>dd</code> 要素が DOM に存在するため、<code>dl</code> 構造は常に満たされています。
           </li>
-          <li>視覚障害のある人がディスクロージャーをインタラクティブな要素として識別しやすくし、ディスクロージャーボタンまたはそのラベルをクリックすることで展開状態が変わることを認識しやすくするために、ポインターがボタンまたはそのラベルの上にあるときに、背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
+          <li>視覚障害のある人がディスクロージャーをインタラクティブな要素として識別し、ディスクロージャーボタンまたはそのラベルをクリックすることで展開状態が変わることを認識できるように、ポインターがボタンまたはそのラベルの上にあるときに背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
           <li>
-            オペレーティングシステムのハイコントラスト設定が有効になっている一部のシステムでは、透明な境界線は可視であるため、透明性を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明性の代わりに、フォーカスされた要素は境界線が太くなりなりパディングが少なくなります。要素がフォーカスを受けると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
+            オペレーティングシステムのハイコントラスト設定が有効になっているシステムでは透明な境界線が表示されるため、透明を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明を使用せず、フォーカスされた要素は境界線が太くなりなり、パディングが少なくなります。要素がフォーカスを受け取ると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
           </li>
           <li>
-            ハイコントラスト設定で色が反転したときに CSS 内のインライン SVG 矢印画像が背景と十分なコントラストを持つようにするため、矢印の色はテキストコンテンツの色と同期されます。たとえば、矢印を描画するために使われる <code>polygon</code> 要素の <code>stroke</code> および <code>fill</code> プロパティに CSS の <code>currentcolor</code> 値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。特定の色を使用して <code>polygon</code> プロパティを指定した場合、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
-            注記：SVG 要素は、ハイコントラストモードで <code>currentcolor</code> 値が更新されるように、CSS <code>forced-color-adjust</code> プロパティを <code>auto</code> に設定する必要があります。一部のブラウザーはデフォルト値として <code>auto</code> を使用しません。
+            ハイコントラスト設定で色が反転したときに CSS 内のインライン SVG 矢印グラフィックが背景と十分なコントラストを持つように、矢印の色はテキストコンテンツの色と同期されます。たとえば、矢印を描画するために使われる <code>polygon</code> 要素の <code>stroke</code> および <code>fill</code> プロパティに CSS の <code>currentcolor</code> 値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。<code>polygon</code> プロパティに特定の色を使用してしまうと、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
+            注記：SVG 要素は、ハイコントラストモードで <code>currentcolor</code> 値が更新されるように、CSS の <code>forced-color-adjust</code> プロパティを <code>auto</code> に設定する必要があります。一部のブラウザーはデフォルト値として <code>auto</code> を使用しません。
           </li>
         </ul>
       </section>
@@ -129,7 +129,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
                 <kbd>Space</kbd> 又は<br>
                 <kbd>Enter</kbd>
               </th>
-              <td>ディスクロージャーボタンをアクティベートし、質問への回答の可視性を切り替える。</td>
+              <td>ディスクロージャーボタンをアクティベートし、質問への回答の表示を切り替える。</td>
             </tr>
           </tbody>
         </table>
@@ -167,9 +167,9 @@ <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex
                 <ul>
                   <li>ディスクロージャーボタンによって制御されるコンテナーが<em>非表示</em>であることを示す。</li>
                   <li>
-                    CSS 属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚状態を同期する。
+                    CSS 属性セレクター（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
-                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザのハイコントラストモードで確実にレンダリングされるよう、CSS の <code>:before</code> 疑似要素と <code>content</code> プロパティを使用して作成されている。</li>
+                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザのハイコントラストモードで画像が確実にレンダリングされるよう、CSS の <code>:before</code> 疑似要素と <code>content</code> プロパティを使用して作成されている。</li>
                 </ul>
               </td>
             </tr>
@@ -185,7 +185,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex
                 <ul>
                   <li>ディスクロージャーボタンによって制御されるコンテナーが<em>表示</em>されていることを示す。</li>
                   <li>
-                    CSS 属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚状態を同期する。
+                    CSS 属性セレクター（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
                   <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザのハイコントラストモードで確実にレンダリングされるよう、CSS の <code>:before</code> 疑似要素と <code>content</code> プロパティを使用して作成されている。</li>
                 </ul>
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index b714122d..ffa09170 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -37,12 +37,12 @@ <h2>この例について</h2>
         <p>類似の例には以下が含まれます：</p>
         <ul>
           <li>
-            <a href="disclosure-faq.html">よくある質問への回答の表示/非表示の例</a>
+            <a href="disclosure-faq.html">よくある質問への回答のディスクロージャー（表示/非表示）の例</a>
           </li>
           <li>
-            <a href="disclosure-navigation.html">ナビゲーションメニューの表示/非表示の例</a>
+            <a href="disclosure-navigation.html">ディスクロージャー（表示/非表示）ナビゲーションメニューの例</a>
           </li>
-          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付きナビゲーションメニューの表示/非表示の例</a></li>
+          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付きディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
         </ul>
       </section>
 
@@ -55,16 +55,16 @@ <h2 id="ex_label">例</h2>
           <figure>
             <img
               src="images/minard.png"
-              alt="チャールズ・ミナードの1869年のチャートには、ナポレオンの1812年のロシア遠征軍の男性数、彼らの動き、および帰還経路で遭遇した温度が示されています。"
+              alt="チャールズ・ミナードの 1869 年のチャートには、ナポレオンの 1812 年のロシア遠征軍の男性数、彼らの動き、および帰還経路で遭遇した温度が示されています。"
             >
             <figcaption>
               <p>
-                フランス軍のロシア遠征1812-1813年の逐次的な人的損失の図。引退後の橋梁及び道路の総監ミナード氏によって描かれた。パリ、1869年11月20日。
+                フランス軍のロシア遠征 1812-1813 年の逐次的な人的損失の図。引退後の橋梁及び道路の総監ミナード氏によって描かれた。パリ、1869 年 11 月 20 日。
               </p>
               <p>
                 男性の数は、一万人につき一ミリメートルの割合で色付きゾーンの幅によって表され、これらはまたゾーンの横に書かれています。赤はロシアへ進む男性を、黒は撤退する男性を表します。
               </p>
-              <p>地図を描くために使用された情報は、ティエール氏、セグール氏、フェゼナック氏、シャンブレー氏の著作と、10月28日からの軍の薬剤師ジャコブの未公開日記から取られました。</p>
+              <p>地図を描くために使用された情報は、ティエール氏、セグール氏、フェゼナック氏、シャンブレー氏の著作と、10 月 28 日からの軍の薬剤師ジャコブの未公開日記から取られました。</p>
               <p>軍の減少を目で判断しやすくするために、ミンスクとモビロウに送られ、オルシャとヴィテプスク近くで再合流したジェローム皇子とダヴースト元帥の下の軍隊が常に軍と一緒に行軍したと仮定しました。</p>
               <p><strong>注記: Wikipediaからのフランス語翻訳。</strong></p>
               <button type="button" aria-expanded="true" aria-controls="id_long_desc">ミナードのチャートのデータテーブル</button>
@@ -76,15 +76,15 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                       <th scope="col">場所</th>
                       <th scope="col">大体の日付</th>
                       <th scope="col">軍の規模</th>
-                      <th scope="col">温度C</th>
-                      <th scope="col">温度F</th>
+                      <th scope="col">温度 C</th>
+                      <th scope="col">温度 F</th>
                       <th scope="col">方向</th>
                     </tr>
                   </thead>
                   <tbody>
                     <tr>
                       <th scope="row">コウノ川</th>
-                      <td>6月24日</td>
+                      <td>6 月 24 日</td>
                       <td>442,000</td>
                       <td>na</td>
                       <td>na</td>
@@ -92,7 +92,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">ヴィルナ</th>
-                      <td>6月30日</td>
+                      <td>6 月 30 日</td>
                       <td>400,000</td>
                       <td>na</td>
                       <td>na</td>
@@ -108,7 +108,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">スモレンスク</th>
-                      <td>8月16日</td>
+                      <td>8 月 16 日</td>
                       <td>145,000</td>
                       <td>na</td>
                       <td>na</td>
@@ -124,7 +124,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">モジャイスク</th>
-                      <td>9月7日</td>
+                      <td>9 月 7 日</td>
                       <td>100,000</td>
                       <td>na</td>
                       <td>na</td>
@@ -132,7 +132,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">モスクワ</th>
-                      <td>9月14日</td>
+                      <td>9 月 14 日</td>
                       <td>100,000</td>
                       <td>na</td>
                       <td>na</td>
@@ -140,7 +140,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">マロ・ヤロセウリ</th>
-                      <td>10月18日</td>
+                      <td>10 月 18 日</td>
                       <td>96,000</td>
                       <td>0</td>
                       <td>32</td>
@@ -148,7 +148,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">モジャイスク</th>
-                      <td>10月24日</td>
+                      <td>10 月 24 日</td>
                       <td>87,000</td>
                       <td>0</td>
                       <td>32</td>
@@ -164,7 +164,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">スモレンスク</th>
-                      <td>11月14日</td>
+                      <td>11 月 14 日</td>
                       <td>37,000</td>
                       <td>-26</td>
                       <td>-13</td>
@@ -188,7 +188,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">ステュディエンスカ（増援到着）</th>
-                      <td>12月1日</td>
+                      <td>12 月 1 日</td>
                       <td>50,000</td>
                       <td>-25</td>
                       <td>-13</td>
@@ -196,7 +196,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">ミンスク</th>
-                      <td>12月1日</td>
+                      <td>12 月 1 日</td>
                       <td>28,000</td>
                       <td>-30</td>
                       <td>-22</td>
@@ -204,7 +204,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">モロデルノ</th>
-                      <td>12月6日</td>
+                      <td>12 月 6 日</td>
                       <td>28,000</td>
                       <td>-38</td>
                       <td>-34</td>
@@ -212,7 +212,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">スモルゲニ</th>
-                      <td>12月7日</td>
+                      <td>12 月 7 日</td>
                       <td>12,000</td>
                       <td>-33</td>
                       <td>-27</td>
@@ -228,7 +228,7 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
                     </tr>
                     <tr>
                       <th scope="row">コウノ（増援到着）</th>
-                      <td>12月14日</td>
+                      <td>12 月 14 日</td>
                       <td>10,000</td>
                       <td>na</td>
                       <td>na</td>
@@ -246,19 +246,13 @@ <h3 id="id_data_label">ナポレオンのロシア侵攻のチャールズ・ミ
       <section>
         <h2>アクセシビリティ機能</h2>
         <ul>
-          <li>視覚障害のある利用者がディスクロージャーを対話可能と識別し、ディスクロージャーボタンまたはそのラベルをクリックすると拡張状態が変わることを容易に認識できるように、ポインターがボタンまたはそのラベルの上にあるときに背景色が変わり、境界線が現れ、カーソルがポインターに変わります。</li>
+          <li>視覚障害のある人がディスクロージャーをインタラクティブな要素として識別し、ディスクロージャーボタンまたはそのラベルをクリックすることで展開状態が変わることを認識できるように、ポインターがボタンまたはそのラベルの上にあるときに背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
           <li>
-            オペレーティングシステムのハイコントラスト設定が有効なシステムでは透明な境界線が表示されるため、透明を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。
-            透明性を使用せず、フォーカスされた要素は境界線が太くなり、パディングが少なくなります。
-            要素がフォーカスを受け取ると、その境界線は0から2ピクセルに変わり、パディングは2ピクセル減少します。
-            要素がフォーカスを失うと、その境界線は2ピクセルから0に変わり、パディングは2ピクセル増加します。
+            オペレーティングシステムのハイコントラスト設定が有効になっているシステムでは透明な境界線が表示されるため、透明を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明を使用せず、フォーカスされた要素は境界線が太くなりなり、パディングが少なくなります。要素がフォーカスを受け取ると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
           </li>
           <li>
-            ハイコントラスト設定で色が反転したときにCSS内のインラインSVG矢印グラフィックが背景と十分なコントラストを持つように、矢印の色はテキストコンテンツの色と同期されます。
-            例えば、<code>polygon</code>要素の<code>stroke</code>および<code>fill</code>プロパティにCSSの<code>currentcolor</code>値を指定することで、ハイコントラストモードテキストの前景色と一致する矢印の色が設定されます。
-            <code>polygon</code>プロパティに特定の色を使用した場合、それらの色はハイコントラストモードでも変わらず、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致して矢印が見えなくなる可能性があります。<br>
-            注記: SVG要素はハイコントラストモードで<code>currentcolor</code>値が更新されるようにCSSの<code>forced-color-adjust</code>プロパティを<code>auto</code>に設定する必要があります。
-            一部のブラウザでは、デフォルト値として<code>auto</code>を使用しません。
+            ハイコントラスト設定で色が反転したときに CSS 内のインライン SVG 矢印グラフィックが背景と十分なコントラストを持つように、矢印の色はテキストコンテンツの色と同期されます。たとえば、矢印を描画するために使われる <code>polygon</code> 要素の <code>stroke</code> および <code>fill</code> プロパティに CSS の <code>currentcolor</code> 値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。<code>polygon</code> プロパティに特定の色を使用してしまうと、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
+            注記：SVG 要素は、ハイコントラストモードで <code>currentcolor</code> 値が更新されるように、CSS の <code>forced-color-adjust</code> プロパティを <code>auto</code> に設定する必要があります。一部のブラウザーはデフォルト値として <code>auto</code> を使用しません。
           </li>
         </ul>
       </section>
@@ -277,11 +271,11 @@ <h2 id="kbd_label">キーボードサポート</h2>
               <th>
                 <kbd>Tab</kbd>
               </th>
-              <td>キーボードフォーカスをディスクロージャーボタンに移動します。</td>
+              <td>キーボードフォーカスをディスクロージャーボタンに移動する。</td>
             </tr>
             <tr data-test-id="key-space-or-enter">
               <th>
-                <kbd>Space</kbd> または <br>
+                <kbd>Space</kbd> 又は<br>
                 <kbd>Enter</kbd>
               </th>
               <td>ディスクロージャーボタンをアクティベートし、長い説明の表示を切り替えます。</td>
@@ -291,7 +285,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
       </section>
 
       <section>
-        <h2 id="rps_label">ロール、プロパティ、ステート、およびTabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
@@ -308,7 +302,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
                 <code>aria-controls="ID_REFERENCE"</code>
               </th>
               <td><code>button</code></td>
-              <td>ディスクロージャーボタンによって制御される要素を特定します。</td>
+              <td>ディスクロージャーボタンによって制御される要素を識別する。</td>
             </tr>
             <tr data-test-id="aria-expanded">
               <td></td>
@@ -320,11 +314,11 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナーが<em>非表示</em>であることを示す。</li>
                   <li>
-                    CSS属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
+                    CSS 属性セレクター（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
-                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステムおよびブラウザのハイコントラストモードで画像が確実にレンダリングされるように、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
+                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザのハイコントラストモードで画像が確実にレンダリングされるよう、CSS の <code>:before</code> 疑似要素と <code>content</code> プロパティを使用して作成されている。</li>
                 </ul>
               </td>
             </tr>
@@ -338,11 +332,11 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナーが<em>表示</em>されていることを示す。</li>
                   <li>
-                    CSS属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
+                    CSS 属性セレクター（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
-                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステムおよびブラウザのハイコントラストモードで画像が確実にレンダリングされるように、CSSの<code>:before</code>疑似要素と<code>content</code>プロパティを使用して作成されます。</li>
+                  <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザのハイコントラストモードで確実にレンダリングされるよう、CSS の <code>:before</code> 疑似要素と <code>content</code> プロパティを使用して作成されている。</li>
                 </ul>
               </td>
             </tr>
@@ -351,7 +345,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
       </section>
 
       <section>
-        <h2>JavaScriptおよびCSSのソースコード</h2>
+        <h2>JavaScript 及び　CSS のソースコード</h2>
         <ul id="css_js_files">
           <li>
             CSS:
@@ -365,7 +359,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_start_sep sc1_label" aria-label="Start of"></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>

From b7a6a5dc0f7b7313d5bacad6da4a1004e1369201 Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Fri, 19 Apr 2024 23:15:47 +0900
Subject: [PATCH 06/10] =?UTF-8?q?Disclosure=E3=81=AE=E3=83=8A=E3=83=93?=
 =?UTF-8?q?=E3=82=B2=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=A1=E3=83=8B?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=81=AE=E4=BE=8B=E3=81=AE=E3=83=81=E3=82=A7?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=EF=BC=86=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../examples/disclosure-navigation.html       | 101 ++++++++----------
 1 file changed, 47 insertions(+), 54 deletions(-)

diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index e3ea0629..9cd86a48 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -33,31 +33,30 @@ <h2>この例について</h2>
         <div class="advisement">
           <h3>重要</h3>
           <p>
-            この例では、ナビゲーションリンクのセットを指すために日常的に「メニュー」という言葉を使用していますが、WAI-ARIAのmenuロールは使用していません。
-            サイトナビゲーションのこの実装は、支援技術がmenuロールを持つウィジェットに期待する複雑な機能を提供しないため、menuロールを使用していません。
-            典型的なサイトナビゲーションには、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーのパターンによって指定されたキーボード操作</a>のすべてが必要ありません。
+            この例では、ナビゲーションリンクのセットを指すために「メニュー」という単語を口語的な意味で使用していますが、WAI-ARIA のメニューロールは使用していません。
+            サイトナビゲーションのこの実装は、支援技術が menu ロールを持つウィジェットに期待する複雑な機能を提供しないため、menu ロールを使用していません。
+            典型的なサイトナビゲーションには、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーのパターンで指定されたキーボード操作</a>のすべてが必要ありません。
           </p>
         </div>
         <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
-          次の例は、架空の大学のウェブサイトのナビゲーションバーにおいて、<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用してリンクのドロップダウンリストを表示および非表示にする方法を示しています。
+          次の例は、架空の大学のウェブサイトのナビゲーションバーにおいて、<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用してリンクのドロップダウンリストを表示及び非表示にする方法を示しています。
           各ディスクロージャーボタンはウェブサイトのセクションを表しており、展開するとそのセクション内のページへのリンクリストが表示されます。
         </p>
         <p>類似の例には以下が含まれます：</p>
         <ul>
-          <li><a href="disclosure-faq.html">よくある質問への回答の表示/非表示の例</a></li>
-          <li><a href="disclosure-image-description.html">画像説明の表示/非表示の例</a></li>
-          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付き表示/非表示ナビゲーションメニューの例</a></li>
+          <li><a href="disclosure-faq.html">よくある質問への回答のディスクロージャー（表示/非表示）の例</a></li>
+          <li><a href="disclosure-image-description.html">画像説明のディスクロージャー（表示/非表示）の例</a></li>
+          <li><a href="disclosure-navigation-hybrid.html">トップレベルリンク付きディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
           <li><a href="../../menubar/examples/menubar-navigation.html">ナビゲーションメニューバーの例</a></li>
         </ul>
-        <h2>例の使用方法</h2>
+        <h2>使用例のオプション</h2>
         <p>
-          この例は、キーボードサポートを実装する2つの異なる方法を示しています。
-          以下のチェックボックスで切り替えます。
+          この例は、キーボードサポートを実装する 2 つの異なる方法を示しています。以下のチェックボックスで切り替えます。
         </p>
         <label for="arrow-behavior-switch">
           <input type="checkbox" id="arrow-behavior-switch" checked>
-          矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>のサポートを含める
+          オプションの矢印キー及び　<kbd>Home</kbd>、並びに　<kbd>End</kbd>　のサポートを含める
         </label>
       </section>
 
@@ -119,7 +118,7 @@ <h2 id="ex_label">例</h2>
                     <a href="#mythical-page-content">学習プログラム</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">優秀プログラム</a>
+                    <a href="#mythical-page-content">優等学位プログラム</a>
                   </li>
                   <li>
                     <a href="#mythical-page-content">オンラインコース</a>
@@ -144,7 +143,7 @@ <h2 id="ex_label">例</h2>
             <h3 id="mythical-page-heading">架空大学</h3>
             <p>
               サンプルコンテンツセクション。
-              上記のリンクを活性化すると、この領域が更新されてナビゲートされます。
+              上記のリンクを選択すると、この領域が更新されてナビゲートされます。
             </p>
           </div>
         </div>
@@ -154,29 +153,23 @@ <h3 id="mythical-page-heading">架空大学</h3>
       <section>
         <h2>アクセシビリティ機能</h2>
         <ol>
-          <li>この一連のディスクロージャーボタンは神話大学ウェブサイトのナビゲーションリンクの表示を制御するため、それらを含むリストは<q>神話大学</q>という名前のナビゲーションランドマークでラップされています。</li>
+          <li>この一連のディスクロージャーボタンは架空大学ウェブサイトのナビゲーションリンクの表示を制御するため、それらを含むリストは<q>架空大学</q>という名前のナビゲーションランドマークでラップされています。</li>
           <li>
-            リスト構造のセマンティクスは、支援技術の利用者にナビゲーションシステムの階層を伝えます。
-            3つのボタンのトップレベルセットは、3つのアイテムのリストにあり、各ボタンによって制御されるリンクのセットは、制御ボタンを含むアイテム内のネストされたリスト内に含まれています。
+            リスト構造のセマンティクスは、支援技術の利用者にナビゲーションシステムの階層を伝えます。トップレベルの 3 つのボタンのセットは 3 項目からなるリストに含まれ、各ボタンによって制御されるリンクのセットは、制御ボタンを含むアイテム内のネストされたリスト内に含まれています。
           </li>
           <li>
-            ドロップダウンが開かれ、フォーカスがナビゲーション領域内にある場合、<kbd>Esc</kbd>を押すとドロップダウンが閉じます。
-            ナビゲーション領域からフォーカスを移動すると、開いているドロップダウンも閉じます。
-            この<kbd>Esc</kbd>の振る舞いを実装することは、WCAG 2.1の<a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">1.4.13: ホバーまたはフォーカス時のコンテンツ</a>基準を満たすために必要です。
+            ドロップダウンが開かれ、フォーカスがナビゲーション領域内にある場合、<kbd>Esc</kbd> を押すとドロップダウンが閉じます。ナビゲーション領域からフォーカスを外すことでも、開いているドロップダウンは閉じます。この <kbd>Esc</kbd> の振る舞いを実装することは、WCAG 2.1 の <a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">1.4.13: ホバー又はフォーカスで表示されるコンテンツ</a>基準を満たすために必要です。
           </li>
-          <li>表示/非表示の状態の視覚的インジケーターは、CSSの<code>::after</code>疑似要素の境界スタイルを使用して作成されるため、オペレーティングシステムとブラウザのハイコントラストモードでキャレットが確実にレンダリングされます。</li>
+          <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザーのハイコントラストモードでキャレットが確実にレンダリングされるよう、CSS の <code>:after</code> 疑似要素のボーダースタイルを使用して作成されています。</li>
           <li>
-            オプショナルなナビゲーションキー（矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>）:
+            オプショナルなナビゲーションキー（矢印キー及び　<kbd>Home</kbd>、並びに　<kbd>End</kbd>）:
             <ol>
-              <li>オプショナルな矢印キーサポートを実装することで、フォーカスがナビゲーション領域内に含まれる場合にデフォルトのページスクロール動作を防ぎます。</li>
+              <li>オプショナルな矢印キーサポートを実装しており、フォーカスがナビゲーション領域内に含まれる場合、デフォルトのページスクロール動作を防いでいます。</li>
               <li>
-                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。
-                読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーを捕捉し、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。
-                この例とやり取りするとき、そのようなスクリーンリーダーは通常、この例がスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないため、読み取りモードにあります。
+                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。この例を操作するとき、そのようなスクリーンリーダーは通常、読み取りモードにあります。なぜならば、この例はスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないためです。
               </li>
               <li>
-                実装された場合、オプショナルなナビゲーションキーは、ボタンやリンク間のタブ移動を補完しますが、それに置き換わるものではありません。
-                これは、ボタンとリンクが、ページの<kbd>Tab</kbd>シーケンスの中で1つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される<code>grid</code>のようなウィジェットロールを持つ要素に含まれていないためです。
+                実装された場合、オプショナルなナビゲーションキーは、ボタンやリンク間のタブ移動を、置き換えるのではなく補います。これは、ボタンとリンクが、ページの <kbd>Tab</kbd> シーケンスの中で 1 つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される <code>grid</code> のようなウィジェットロールを持つ要素に含まれていないためです。
               </li>
             </ol>
           </li>
@@ -198,22 +191,22 @@ <h2 id="kbd_label">キーボードサポート</h2>
                 <kbd>Tab</kbd><br>
                 <kbd>Shift + Tab</kbd>
               </th>
-              <td>トップレベルのボタン間、およびドロップダウンが開いている場合は、ドロップダウン内のリンクを通じてキーボードフォーカスを移動します。</td>
+              <td>トップレベルのボタン間、及びドロップダウンが開いている場合は、ドロップダウン内のリンクを通じてキーボードフォーカスを移動する。</td>
             </tr>
             <tr data-test-id="key-enter-space">
               <th>
-                <kbd>Space</kbd>または<br>
+                <kbd>Space</kbd> 又は<br>
                 <kbd>Enter</kbd>
               </th>
               <td>
                 <ul>
-                  <li>フォーカスがディスクロージャーボタン上にある場合、ボタンをアクティブにして、ドロップダウンの表示を切り替えます。</li>
+                  <li>フォーカスがディスクロージャーボタン上にある場合、ボタンをアクティブにして、ドロップダウンの表示を切り替える。</li>
                   <li>
                     フォーカスがリンク上にある場合：
                     <ul>
-                      <li>任意のリンクに<code>aria-current</code>が設定されている場合は、それを削除します。</li>
-                      <li>フォーカスが当たっているリンクに<code>aria-current="page"</code>を設定します。</li>
-                      <li>フォーカスが当たっているリンクをアクティブにします。</li>
+                      <li>任意のリンクに <code>aria-current</code> が設定されている場合は、それを削除する。</li>
+                      <li>フォーカスが当たっているリンクに <code>aria-current="page"</code> を設定する。</li>
+                      <li>フォーカスが当たっているリンクをアクティブにする。</li>
                     </ul>
                   </li>
                 </ul>
@@ -223,32 +216,32 @@ <h2 id="kbd_label">キーボードサポート</h2>
               <th>
                 <kbd>Escape</kbd>
               </th>
-              <td>ドロップダウンが開いている場合、それを閉じてそのドロップダウンを制御するボタンにフォーカスを設定します。</td>
+              <td>ドロップダウンが開いている場合は閉じ、そのドロップダウンを制御するボタンにフォーカスを設定する。</td>
             </tr>
             <tr data-test-id="key-arrows">
               <th>
-                <kbd>Down Arrow</kbd>または<br>
+                <kbd>Down Arrow</kbd> 又は<br>
                 <kbd>Right Arrow</kbd><br>
                 (オプショナル)
               </th>
               <td>
                 <ul>
-                  <li>フォーカスがボタン上にあり、そのドロップダウンが折りたたまれていて、それが最後のボタンではない場合、次のボタンにフォーカスを移動します。</li>
-                  <li>フォーカスがボタン上にあり、そのドロップダウンが展開されている場合、ドロップダウン内の最初のリンクにフォーカスを移動します。</li>
-                  <li>フォーカスがリンク上にあり、それが最後のリンクではない場合、次のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがボタン上にあり、そのドロップダウンが折りたたまれていて、それが最後のボタンではない場合、次のボタンにフォーカスを移動する。</li>
+                  <li>フォーカスがボタン上にあり、そのドロップダウンが展開されている場合、ドロップダウン内の最初のリンクにフォーカスを移動する。</li>
+                  <li>フォーカスがリンク上にあり、それが最後のリンクではない場合、次のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="key-arrows">
               <th>
-                <kbd>Up Arrow</kbd>または<br>
+                <kbd>Up Arrow</kbd> 又は<br>
                 <kbd>Left Arrow</kbd><br>
                 (オプショナル)
               </th>
               <td>
                 <ul>
-                  <li>フォーカスがボタン上にあり、それが最初のボタンではない場合、前のボタンにフォーカスを移動します。</li>
-                  <li>フォーカスがリンク上にあり、それが最初のリンクではない場合、前のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがボタン上にあり、それが最初のボタンではない場合、前のボタンにフォーカスを移動する。</li>
+                  <li>フォーカスがリンク上にあり、それが最初のリンクではない場合、前のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
@@ -256,8 +249,8 @@ <h2 id="kbd_label">キーボードサポート</h2>
               <th><kbd>Home</kbd> (オプショナル)</th>
               <td>
                 <ul>
-                  <li>フォーカスがボタン上にあり、それが最初のボタンではない場合、最初のボタンにフォーカスを移動します。</li>
-                  <li>フォーカスがリンク上にあり、それが最初のリンクではない場合、最初のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがボタン上にあり、それが最初のボタンではない場合、最初のボタンにフォーカスを移動する。</li>
+                  <li>フォーカスがリンク上にあり、それが最初のリンクではない場合、最初のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
@@ -265,8 +258,8 @@ <h2 id="kbd_label">キーボードサポート</h2>
               <th><kbd>End</kbd> (オプショナル)</th>
               <td>
                 <ul>
-                  <li>フォーカスがボタン上にあり、それが最後のボタンではない場合、最後のボタンにフォーカスを移動します。</li>
-                  <li>フォーカスがリンク上にあり、それが最後のリンクではない場合、最後のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがボタン上にあり、それが最後のボタンではない場合、最後のボタンにフォーカスを移動する。</li>
+                  <li>フォーカスがリンク上にあり、それが最後のリンクではない場合、最後のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
@@ -275,7 +268,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
       </section>
 
       <section>
-        <h2 id="rps_label">ロール、プロパティ、ステート、およびTabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
@@ -294,7 +287,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               <td>
                 <code>button</code>
               </td>
-              <td>ディスクロージャーボタンは、<code>IDREF</code>値で識別されるコンテナの表示を制御します。</td>
+              <td>ディスクロージャーボタンは、<code>IDREF</code>値で識別されるコンテナの表示を制御する。</td>
             </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
@@ -306,9 +299,9 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示す。</li>
                   <li>
-                    CSS属性セレクター（例: <code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
+                    CSS 属性セレクター（例: <code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
                 </ul>
               </td>
@@ -323,9 +316,9 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示す。</li>
                   <li>
-                    CSS属性セレクター（例: <code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的状態を同期します。
+                    CSS 属性セレクター（例: <code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
                 </ul>
               </td>
@@ -338,14 +331,14 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               <td>
                 <code>a</code>
               </td>
-              <td>リンクによって参照されるページが現在表示されていることを示します。</td>
+              <td>リンクによって参照されるページが現在表示されていることを示す。</td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScriptおよびCSSソースコード</h2>
+        <h2>JavaScript 及び CSS ソースコード</h2>
         <!--  jsおよびcssファイルがこの例の名前で命名された後、以下の2つのリンクのhrefとテキストを適切なjsおよびcssファイルを参照するように変更します。  -->
         <ul id="css_js_files">
           <li>
@@ -360,7 +353,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_start_sep sc1_label" aria-label="Start of"></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>

From f16b0d42012be45850208fdb8087e0c34e47f404 Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Sun, 21 Apr 2024 07:30:41 +0900
Subject: [PATCH 07/10] =?UTF-8?q?Disclosure=E3=81=AE=E3=83=88=E3=83=83?=
 =?UTF-8?q?=E3=83=97=E3=83=AC=E3=83=99=E3=83=AB=E3=83=AA=E3=83=B3=E3=82=AF?=
 =?UTF-8?q?=E4=BB=98=E3=81=8D=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AE?=
 =?UTF-8?q?=E4=BE=8B=E3=81=AE=E3=83=81=E3=82=A7=E3=83=83=E3=82=AF=EF=BC=86?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../disclosure-navigation-hybrid.html         | 105 ++++++++----------
 .../examples/disclosure-navigation.html       |  12 +-
 2 files changed, 55 insertions(+), 62 deletions(-)

diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 7c892ad5..1e0504c5 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -33,31 +33,30 @@ <h2>この例について</h2>
         <div class="advisement">
           <h3>重要</h3>
           <p>
-            この例では、ナビゲーションリンクのセットを指すために俗に「メニュー」という言葉を使用していますが、WAI-ARIAのメニューロールは使用していません。
-            このサイトナビゲーションの実装は、支援技術がメニューロールのウィジェットに期待する複雑な機能を提供しないため、メニューロールを使用していません。
-            典型的なサイトナビゲーションは、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーパターンによって指定されたキーボード操作</a>をすべて必要としません。
+            この例では、ナビゲーションリンクのセットを指すために俗にいう「メニュー」という単語を使用していますが、WAI-ARIA のメニューロールは使用していません。
+            サイトナビゲーションのこの実装は、支援技術が menu ロールを持つウィジェットに期待する複雑な機能を提供しないため、menu ロールを使用していません。
+            典型的なサイトナビゲーションには、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーのパターンで指定されたキーボード操作</a>のすべてが必要ありません。
           </p>
         </div>
         <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
-          次の例は、架空の大学のウェブサイトのナビゲーションバーにおいて、リンクのドロップダウンリストを表示および非表示にするために<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用する方法を示しています。
+          次の例は、架空の大学のウェブサイトのナビゲーションバーにおいて、<a href="../disclosure-pattern.html">ディスクロージャーパターン</a>を使用してリンクのドロップダウンリストを表示及び非表示にする方法を示しています。
           他の<a href="disclosure-navigation.html">ディスクロージャーナビゲーションメニューの例</a>とは異なり、この例にはディスクロージャーボタンの隣にトップレベルリンクが含まれています。
         </p>
         <p>類似の例には以下が含まれます：</p>
         <ul>
-          <li><a href="disclosure-navigation.html">ディスクロージャーナビゲーションメニューの例</a></li>
-          <li><a href="disclosure-faq.html">よくある質問への回答の表示/非表示の例</a></li>
-          <li><a href="disclosure-image-description.html">画像説明の表示/非表示の例</a></li>
+          <li><a href="disclosure-navigation.html">ディスクロージャー（表示/非表示）ナビゲーションメニューの例</a></li>
+          <li><a href="disclosure-faq.html">よくある質問への回答のディスクロージャー（表示/非表示）の例</a></li>
+          <li><a href="disclosure-image-description.html">画像説明のディスクロージャー（表示/非表示）の例</a></li>
           <li><a href="../../menubar/examples/menubar-navigation.html">ナビゲーションメニューバーの例</a></li>
         </ul>
-        <h2>例の使用オプション</h2>
+        <h2>使用例のオプション</h2>
         <p>
-          この例では、キーボードサポートを実装する2つの異なる方法を示しています。
-          次のチェックボックスでそれらの間を切り替えることができます。
+          この例は、キーボードサポートを実装する 2 つの異なる方法を示しています。以下のチェックボックスで切り替えます。
         </p>
         <label for="arrow-behavior-switch">
           <input type="checkbox" id="arrow-behavior-switch" checked>
-          矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>のオプショナルサポートを含む
+          オプションの矢印キー及び　<kbd>Home</kbd>、並びに　<kbd>End</kbd>　のサポートを含める
         </label>
       </section>
 
@@ -108,7 +107,7 @@ <h2 id="ex_label">例</h2>
                     <a href="#mythical-page-content">訪問</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">写真ツアー</a>
+                    <a href="#mythical-page-content">フォトツアー</a>
                   </li>
                   <li>
                     <a href="#mythical-page-content">連絡先</a>
@@ -126,7 +125,7 @@ <h2 id="ex_label">例</h2>
                     <a href="#mythical-page-content">学習プログラム</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">優秀プログラム</a>
+                    <a href="#mythical-page-content">優等学位プログラム</a>
                   </li>
                   <li>
                     <a href="#mythical-page-content">オンラインコース</a>
@@ -151,7 +150,7 @@ <h2 id="ex_label">例</h2>
             <h3 id="mythical-page-heading">ホーム</h3>
             <p>
               サンプルコンテンツセクション。
-              上記のリンクをアクティベートすると、この領域が更新され、ナビゲートされます。
+              上記のリンクを選択すると、この領域が更新されてナビゲートされます。
             </p>
           </div>
           <footer class="sample-footer">架空大学のフッター情報</footer>
@@ -162,28 +161,22 @@ <h3 id="mythical-page-heading">ホーム</h3>
       <section>
         <h2>アクセシビリティ機能</h2>
         <ol>
-          <li>このリンクとディスクロージャーボタンのセットは架空大学ウェブサイトのナビゲーションを提供するために、それらを含むリストは<q>架空大学</q>と名付けられたナビゲーションランドマーク内にラップされています。</li>
+          <li>このリンクとディスクロージャーボタンのセットは架空大学ウェブサイトのナビゲーションを提供するため、それらを含むリストは<q>架空大学</q>と名付けられたナビゲーションランドマークでラップされています。</li>
           <li>
-            リストの構造のセマンティクスは、ナビゲーションシステムの階層を支援技術の利用者に伝えます。
-            トップレベルのリンクとそれに関連するディスクロージャーボタンを含むトップレベルアイテムが3つあるリストです。
-            ディスクロージャーボタンによって制御されるリンクのセットは、そのボタンを含むリストアイテム内にネストされたリストにあります。
+            リスト構造のセマンティクスは、支援技術の利用者にナビゲーションシステムの階層を伝えます。トップレベルのリストは　3　つのアイテムをもつリストで、それぞれの項目はトップレベルリンク及びそれに関連するディスクロージャーボタンを含みます。ディスクロージャーボタンによって制御されるリンクのセットは、そのボタンを含むリストアイテム内にネストされたリストにあります。
           </li>
           <li>
-            ドロップダウンが開いていて、ナビゲーション領域内にフォーカスがある場合、<kbd>Esc</kbd>を押すとドロップダウンが閉じます。
-            ナビゲーション領域外にフォーカスを移動すると、開いているドロップダウンも閉じます。
+            ドロップダウンが開かれ、フォーカスがナビゲーション領域内にある場合、<kbd>Esc</kbd> を押すとドロップダウンが閉じます。ナビゲーション領域からフォーカスを外すことでも、開いているドロップダウンは閉じます。
           </li>
           <li>
-            オプショナルなナビゲーションキー（矢印キー、<kbd>Home</kbd>、および<kbd>End</kbd>）：
+            オプショナルなナビゲーションキー（矢印キー及び　<kbd>Home</kbd>、並びに　<kbd>End</kbd>）:
             <ol>
-              <li>オプショナルな矢印キーサポートを有効にすると、ナビゲーション領域内にフォーカスがある場合にデフォルトのページスクロール動作を防ぎます。</li>
+              <li>オプショナルな矢印キーサポートを有効にすると、フォーカスがナビゲーション領域内に含まれる場合、デフォルトのページスクロール動作が防がれます。</li>
               <li>
-                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを実行していないキーボード利用者の利益のためのものです。
-                読み取りおよびインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにある場合、これらのキーをページに渡しません。
-                この例と対話する際、そのようなスクリーンリーダーは通常、この例がスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないため、読み取りモードにあります。
+                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。この例を操作するとき、そのようなスクリーンリーダーは通常、読み取りモードにあります。なぜならば、この例はスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないためです。
               </li>
               <li>
-                実装されている場合、オプショナルなナビゲーションキーは、ボタンとリンク間のタビングを補完しますが、置き換えません。
-                これは、ボタンとリンクが<code>grid</code>のようなウィジェットロールで囲まれておらず、そのロールがページ<kbd>Tab</kbd>シーケンスの中で1つの停止点を占め、そのすべての子孫のフォーカスを管理することが期待されていないためです。
+                実装された場合、オプショナルなナビゲーションキーは、ボタンやリンク間のタブ移動を、置き換えるのではなく補います。これは、ボタンとリンクが、ページの <kbd>Tab</kbd> シーケンスの中で 1 つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される <code>grid</code> のようなウィジェットロールを持つ要素に含まれていないためです。
               </li>
             </ol>
           </li>
@@ -205,22 +198,22 @@ <h2>キーボードサポート</h2>
                 <kbd>Tab</kbd><br>
                 <kbd>Shift + Tab</kbd>
               </th>
-              <td>トップレベルのリンクとボタン、およびドロップダウンが開いている場合はドロップダウン内のリンクを通じてキーボードフォーカスを移動します。</td>
+              <td>トップレベルのリンクとボタン間、及びドロップダウンが開いている場合は、ドロップダウン内のリンクを通じてキーボードフォーカスを移動する。</td>
             </tr>
             <tr data-test-id="key-enter-space">
               <th>
-                <kbd>Space</kbd> or <br>
+                <kbd>Space</kbd> 又は<br>
                 <kbd>Enter</kbd>
               </th>
               <td>
                 <ul>
-                  <li>フォーカスがディスクロージャーボタンにある場合、ボタンをアクティブにしてドロップダウンの可視性を切り替えます。</li>
+                  <li>フォーカスがディスクロージャーボタン上にある場合、ボタンをアクティブにして、ドロップダウンの表示を切り替える。</li>
                   <li>
-                    フォーカスがリンクにある場合：
+                    フォーカスがリンク上にある場合：
                     <ul>
-                      <li>いずれかのリンクに<code>aria-current</code>が設定されている場合、それを削除します。</li>
-                      <li>フォーカスされたリンクに<code>aria-current="page"</code>を設定します。</li>
-                      <li>フォーカスされたリンクをアクティブにします。</li>
+                      <li>任意のリンクに <code>aria-current</code> が設定されている場合は、それを削除する。</li>
+                      <li>フォーカスが当たっているリンクに <code>aria-current="page"</code> を設定する。</li>
+                      <li>フォーカスが当たっているリンクをアクティブにする。</li>
                     </ul>
                   </li>
                 </ul>
@@ -230,32 +223,32 @@ <h2>キーボードサポート</h2>
               <th>
                 <kbd>Escape</kbd>
               </th>
-              <td>ドロップダウンが開いている場合、それを閉じてそのドロップダウンを制御するボタンにフォーカスを設定します。</td>
+              <td>ドロップダウンが開いている場合は閉じ、そのドロップダウンを制御するボタンにフォーカスを設定する。</td>
             </tr>
             <tr data-test-id="key-arrows">
               <th>
-                <kbd>Down Arrow</kbd> or <br>
+                <kbd>Down Arrow</kbd> 又は<br>
                 <kbd>Right Arrow</kbd><br>
                 (オプション)
               </th>
               <td>
                 <ul>
-                  <li>フォーカスがトップレベルのリンクまたは折りたたまれたドロップダウンのボタンにあり、最後のトップレベルアイテムではない場合、次のトップレベルのリンクまたはボタンにフォーカスを移動します。</li>
-                  <li>フォーカスがトップレベルのボタンにあり、そのドロップダウンが展開されている場合、ドロップダウン内の最初のリンクにフォーカスを移動します。</li>
-                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最後のリンクではない場合、次のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがトップレベルのリンク又は折りたたまれたドロップダウンのボタン上にあり、それが最後のトップレベルアイテムではない場合、次のトップレベルのリンク又はボタンにフォーカスを移動する。</li>
+                  <li>フォーカスがトップレベルのボタン上ににあり、そのドロップダウンが展開されている場合、ドロップダウン内の最初のリンクにフォーカスを移動する。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンク上にあり、それが最後のリンクではない場合、次のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="key-arrows">
               <th>
-                <kbd>Up Arrow</kbd> or <br>
+                <kbd>Up Arrow</kbd> 又は<br>
                 <kbd>Left Arrow</kbd><br>
                 (オプション)
               </th>
               <td>
                 <ul>
-                  <li>フォーカスがトップレベルのリンクまたはボタンにあり、最初のアイテムではない場合、前のリンクまたはボタンにフォーカスを移動します。</li>
-                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最初のリンクではない場合、前のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがトップレベルのリンク又はボタン上にあり、それが最初のアイテムではない場合、前のリンク又はボタンにフォーカスを移動する。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンク上ににあり、それが最初のリンクではない場合、前のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
@@ -263,8 +256,8 @@ <h2>キーボードサポート</h2>
               <th><kbd>Home</kbd> (オプション)</th>
               <td>
                 <ul>
-                  <li>フォーカスがトップレベルのリンクボタンにあり、最初のアイテムではない場合、最初のアイテムにフォーカスを移動します。</li>
-                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最初のリンクではない場合、最初のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがトップレベルのリンクボタン上にあり、それが最初のアイテムではない場合、最初のアイテムにフォーカスを移動する。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンク上にあり、それが最初のリンクではない場合、最初のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
@@ -272,8 +265,8 @@ <h2>キーボードサポート</h2>
               <th><kbd>End</kbd> (オプション)</th>
               <td>
                 <ul>
-                  <li>フォーカスがトップレベルのリンクまたはボタンにあり、最後のアイテムではない場合、最後のアイテムにフォーカスを移動します。</li>
-                  <li>フォーカスが展開されたドロップダウン内のリンクにあり、最後のリンクではない場合、最後のリンクにフォーカスを移動します。</li>
+                  <li>フォーカスがトップレベルのリンク又はボタン上にあり、それが最後のアイテムではない場合、最後のアイテムにフォーカスを移動する。</li>
+                  <li>フォーカスが展開されたドロップダウン内のリンク上にあり、それが最後のリンクではない場合、最後のリンクにフォーカスを移動する。</li>
                 </ul>
               </td>
             </tr>
@@ -282,7 +275,7 @@ <h2>キーボードサポート</h2>
       </section>
 
       <section>
-        <h2 id="rps_label">ロール、プロパティ、ステート、およびTabindex属性</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
@@ -301,7 +294,7 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               <td>
                 <code>button</code>
               </td>
-              <td>IDREF値で識別されるコンテナの可視性をディスクロージャーボタンが制御していることを示します。</td>
+              <td>ディスクロージャーボタンが <code>IDREF</code> 値で識別されるコンテナの表示を制御していることを示す。</td>
             </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
@@ -313,9 +306,9 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>非表示</em>であることを示す。</li>
                   <li>
-                    CSS属性セレクタ（例：<code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的な状態を同期させます。
+                    CSS 属性セレクター（例: <code>[aria-expanded="false"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
                 </ul>
               </td>
@@ -330,9 +323,9 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               </td>
               <td>
                 <ul>
-                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示します。</li>
+                  <li>ディスクロージャーボタンによって制御されるコンテナが<em>表示</em>されていることを示す。</li>
                   <li>
-                    CSS属性セレクタ（例：<code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code>属性の値と視覚的な状態を同期させます。
+                    CSS 属性セレクター（例: <code>[aria-expanded="true"]</code>）を使用して、<code>aria-expanded</code> 属性の値と視覚的状態を同期する。
                   </li>
                 </ul>
               </td>
@@ -345,15 +338,15 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびTabinde
               <td>
                 <code>a</code>
               </td>
-              <td>リンクによって参照されるページが現在表示されていることを示します。</td>
+              <td>リンクによって参照されるページが現在表示されていることを示す。</td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScriptおよびCSSのソースコード</h2>
-        <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
+        <h2>JavaScript 及び CSS ソースコード</h2>
+        <!--  jsおよびcssファイルがこの例の名前で命名された後、以下の2つのリンクのhrefとテキストを適切なjsおよびcssファイルを参照するように変更します。  -->
         <ul id="css_js_files">
           <li>
             CSS：
@@ -367,7 +360,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_start_sep sc1_label" aria-label="Start of"></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>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 9cd86a48..59bb810a 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -33,7 +33,7 @@ <h2>この例について</h2>
         <div class="advisement">
           <h3>重要</h3>
           <p>
-            この例では、ナビゲーションリンクのセットを指すために「メニュー」という単語を口語的な意味で使用していますが、WAI-ARIA のメニューロールは使用していません。
+            この例では、ナビゲーションリンクのセットを指すために俗にいう「メニュー」という単語を使用していますが、WAI-ARIA のメニューロールは使用していません。
             サイトナビゲーションのこの実装は、支援技術が menu ロールを持つウィジェットに期待する複雑な機能を提供しないため、menu ロールを使用していません。
             典型的なサイトナビゲーションには、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーのパターンで指定されたキーボード操作</a>のすべてが必要ありません。
           </p>
@@ -104,7 +104,7 @@ <h2 id="ex_label">例</h2>
                     <a href="#mythical-page-content">フォトツアー</a>
                   </li>
                   <li>
-                    <a href="#mythical-page-content">接続</a>
+                    <a href="#mythical-page-content">連絡先</a>
                   </li>
                 </ul>
               </li>
@@ -222,7 +222,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
               <th>
                 <kbd>Down Arrow</kbd> 又は<br>
                 <kbd>Right Arrow</kbd><br>
-                (オプショナル)
+                (オプション)
               </th>
               <td>
                 <ul>
@@ -236,7 +236,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
               <th>
                 <kbd>Up Arrow</kbd> 又は<br>
                 <kbd>Left Arrow</kbd><br>
-                (オプショナル)
+                (オプション)
               </th>
               <td>
                 <ul>
@@ -246,7 +246,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
               </td>
             </tr>
             <tr data-test-id="key-home-end">
-              <th><kbd>Home</kbd> (オプショナル)</th>
+              <th><kbd>Home</kbd> (オプション)</th>
               <td>
                 <ul>
                   <li>フォーカスがボタン上にあり、それが最初のボタンではない場合、最初のボタンにフォーカスを移動する。</li>
@@ -255,7 +255,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
               </td>
             </tr>
             <tr data-test-id="key-home-end">
-              <th><kbd>End</kbd> (オプショナル)</th>
+              <th><kbd>End</kbd> (オプション)</th>
               <td>
                 <ul>
                   <li>フォーカスがボタン上にあり、それが最後のボタンではない場合、最後のボタンにフォーカスを移動する。</li>

From 7a78aaae8adbff1eb8d015b859169ddba0068b2b Mon Sep 17 00:00:00 2001
From: Shimada Takayuki <taka@tsmd.jp>
Date: Mon, 17 Jun 2024 06:13:19 +0900
Subject: [PATCH 08/10] Apply suggestions from code review

Co-authored-by: Kazuhiko Tsuchiya <kaz.tsuchiya@gmail.com>
---
 content/patterns/disclosure/disclosure-pattern.html  |  4 ++--
 .../patterns/disclosure/examples/disclosure-faq.html |  6 +++---
 .../examples/disclosure-image-description.html       |  4 ++--
 .../examples/disclosure-navigation-hybrid.html       | 12 ++++++------
 .../disclosure/examples/disclosure-navigation.html   | 12 ++++++------
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index ac146d4a..25e7efe0 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -50,13 +50,13 @@ <h2>キーボードインタラクション</h2>
       <section id="roles_states_properties">
         <h2>WAI-ARIA ロール、ステート、およびプロパティ</h2>
         <ul>
-          <li>コンテンツを表示および非表示にする要素はロール<a href="#button" class="role-reference">button</a>を持ちます。</li>
+          <li>コンテンツを表示および非表示にする要素はロール <a href="#button" class="role-reference">button</a> を持ちます。</li>
           <li>
             コンテンツが表示されているとき、ロール <code>button</code> を持つ要素は <a href="#aria-expanded" class="state-reference">aria-expanded</a> が <code>true</code> に設定されます。
             コンテンツエリアが非表示のとき、<code>false</code> に設定されます。
           </li>
           <li>
-            オプションで、ロール <code>button</code> を持つ要素は、表示または非表示にされるすべてのコンテンツを含む要素を参照する<a href="#aria-controls" class="property-reference">aria-controls</a>の値を指定しています。
+            オプションで、ロール <code>button</code> を持つ要素は、表示または非表示にされるすべてのコンテンツを含む要素を参照する <a href="#aria-controls" class="property-reference">aria-controls</a> の値を指定しています。
           </li>
         </ul>
       </section>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index 5b7c3e6c..999895c4 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -95,11 +95,11 @@ <h3>駐車場のよくある質問</h3>
         <h2>アクセシビリティ機能</h2>
         <ul>
           <li>
-            FAQの意味構造は、ネイティブの <code>dl</code>、<code>dt</code>および<code>dd</code> 要素を使用して伝えられます。リスト構造が支援技術に伝わるようにするため、<code>dt</code> 要素にボタンロールを適用する代わりに、<code>dt</code> 要素内に <code>button</code> 要素が含まれるようにします。同様に、ボタンによって表示または非表示にされる回答コンテンツを含む各 <code>div</code> 要素は <code>dd</code> 要素の子です。一部の回答が非表示であってもすべての <code>dd</code> 要素が DOM に存在するため、<code>dl</code> 構造は常に満たされています。
+            FAQの意味構造は、ネイティブの <code>dl</code>、<code>dt</code> および <code>dd</code> 要素を使用して伝えられます。リスト構造が支援技術に伝わるようにするため、<code>dt</code> 要素にボタンロールを適用する代わりに、<code>dt</code> 要素内に <code>button</code> 要素が含まれるようにします。同様に、ボタンによって表示または非表示にされる回答コンテンツを含む各 <code>div</code> 要素は <code>dd</code> 要素の子です。一部の回答が非表示であってもすべての <code>dd</code> 要素が DOM に存在するため、<code>dl</code> 構造は常に満たされています。
           </li>
           <li>視覚障害のある人がディスクロージャーをインタラクティブな要素として識別し、ディスクロージャーボタンまたはそのラベルをクリックすることで展開状態が変わることを認識できるように、ポインターがボタンまたはそのラベルの上にあるときに背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
           <li>
-            オペレーティングシステムのハイコントラスト設定が有効になっているシステムでは透明な境界線が表示されるため、透明を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明を使用せず、フォーカスされた要素は境界線が太くなりなり、パディングが少なくなります。要素がフォーカスを受け取ると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
+            オペレーティングシステムのハイコントラスト設定が有効になっているシステムでは透明な境界線が可視になるため、透明であることを用いてフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明を用いる代わりに、フォーカスされた要素は境界線が太くなり、パディングが少なくなります。要素がフォーカスを受け取ると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
           </li>
           <li>
             ハイコントラスト設定で色が反転したときに CSS 内のインライン SVG 矢印グラフィックが背景と十分なコントラストを持つように、矢印の色はテキストコンテンツの色と同期されます。たとえば、矢印を描画するために使われる <code>polygon</code> 要素の <code>stroke</code> および <code>fill</code> プロパティに CSS の <code>currentcolor</code> 値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。<code>polygon</code> プロパティに特定の色を使用してしまうと、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
@@ -129,7 +129,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
                 <kbd>Space</kbd> 又は<br>
                 <kbd>Enter</kbd>
               </th>
-              <td>ディスクロージャーボタンをアクティベートし、質問への回答の表示を切り替える。</td>
+              <td>ディスクロージャーボタンをアクティベートし、質問への回答を表示するかどうかを切り替える。</td>
             </tr>
           </tbody>
         </table>
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index ffa09170..ecdd178a 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -248,7 +248,7 @@ <h2>アクセシビリティ機能</h2>
         <ul>
           <li>視覚障害のある人がディスクロージャーをインタラクティブな要素として識別し、ディスクロージャーボタンまたはそのラベルをクリックすることで展開状態が変わることを認識できるように、ポインターがボタンまたはそのラベルの上にあるときに背景色が変わり、境界線が表示され、カーソルがポインターに変わります。</li>
           <li>
-            オペレーティングシステムのハイコントラスト設定が有効になっているシステムでは透明な境界線が表示されるため、透明を使用してフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明を使用せず、フォーカスされた要素は境界線が太くなりなり、パディングが少なくなります。要素がフォーカスを受け取ると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
+            オペレーティングシステムのハイコントラスト設定が有効になっているシステムでは透明な境界線が可視になるため、透明であることを用いてフォーカスされた要素と他の要素との視覚的な違いを作り出すことはできません。透明を用いる代わりに、フォーカスされた要素は境界線が太くなり、パディングが少なくなります。要素がフォーカスを受け取ると、その境界線は 0 から 2 ピクセルに変わり、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変わり、パディングは 2 ピクセル増加します。
           </li>
           <li>
             ハイコントラスト設定で色が反転したときに CSS 内のインライン SVG 矢印グラフィックが背景と十分なコントラストを持つように、矢印の色はテキストコンテンツの色と同期されます。たとえば、矢印を描画するために使われる <code>polygon</code> 要素の <code>stroke</code> および <code>fill</code> プロパティに CSS の <code>currentcolor</code> 値を指定することにより、ハイコントラストモードテキストの前景色に合わせて矢印の色が設定されます。<code>polygon</code> プロパティに特定の色を使用してしまうと、それらの色はハイコントラストモードで同じままになり、矢印と背景の間のコントラストが不十分になるか、色がハイコントラストモードの背景と一致する場合は矢印が見えなくなる可能性があります。<br>
@@ -278,7 +278,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
                 <kbd>Space</kbd> 又は<br>
                 <kbd>Enter</kbd>
               </th>
-              <td>ディスクロージャーボタンをアクティベートし、長い説明の表示を切り替えます。</td>
+              <td>ディスクロージャーボタンをアクティベートし、長い説明を表示するかどうかを切り替える。</td>
             </tr>
           </tbody>
         </table>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 1e0504c5..0d88bf96 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -33,7 +33,7 @@ <h2>この例について</h2>
         <div class="advisement">
           <h3>重要</h3>
           <p>
-            この例では、ナビゲーションリンクのセットを指すために俗にいう「メニュー」という単語を使用していますが、WAI-ARIA のメニューロールは使用していません。
+            この例では、ナビゲーションリンクのセットを指すために俗にいう「メニュー」という単語を使用していますが、WAI-ARIA の menu ロールは使用していません。
             サイトナビゲーションのこの実装は、支援技術が menu ロールを持つウィジェットに期待する複雑な機能を提供しないため、menu ロールを使用していません。
             典型的なサイトナビゲーションには、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーのパターンで指定されたキーボード操作</a>のすべてが必要ありません。
           </p>
@@ -163,20 +163,20 @@ <h2>アクセシビリティ機能</h2>
         <ol>
           <li>このリンクとディスクロージャーボタンのセットは架空大学ウェブサイトのナビゲーションを提供するため、それらを含むリストは<q>架空大学</q>と名付けられたナビゲーションランドマークでラップされています。</li>
           <li>
-            リスト構造のセマンティクスは、支援技術の利用者にナビゲーションシステムの階層を伝えます。トップレベルのリストは　3　つのアイテムをもつリストで、それぞれの項目はトップレベルリンク及びそれに関連するディスクロージャーボタンを含みます。ディスクロージャーボタンによって制御されるリンクのセットは、そのボタンを含むリストアイテム内にネストされたリストにあります。
+            リスト構造のセマンティクスは、支援技術の利用者にナビゲーションシステムの階層を伝えます。トップレベルのリストは 3 つのアイテムをもつリストで、それぞれの項目はトップレベルリンク及びそれに関連するディスクロージャーボタンを含みます。ディスクロージャーボタンによって制御されるリンクのセットは、そのボタンを含むリストアイテム内にネストされたリストにあります。
           </li>
           <li>
             ドロップダウンが開かれ、フォーカスがナビゲーション領域内にある場合、<kbd>Esc</kbd> を押すとドロップダウンが閉じます。ナビゲーション領域からフォーカスを外すことでも、開いているドロップダウンは閉じます。
           </li>
           <li>
-            オプショナルなナビゲーションキー（矢印キー及び　<kbd>Home</kbd>、並びに　<kbd>End</kbd>）:
+            オプションのナビゲーションキー（矢印キー及び 　<kbd>Home</kbd>、並びに <kbd>End</kbd>）:
             <ol>
-              <li>オプショナルな矢印キーサポートを有効にすると、フォーカスがナビゲーション領域内に含まれる場合、デフォルトのページスクロール動作が防がれます。</li>
+              <li>オプションの矢印キーのサポートを有効にすると、フォーカスがナビゲーション領域内に含まれる場合、デフォルトのページスクロール動作を防いでいます。</li>
               <li>
-                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。この例を操作するとき、そのようなスクリーンリーダーは通常、読み取りモードにあります。なぜならば、この例はスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないためです。
+                オプションのナビゲーションキーのサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。この例を操作するとき、そのようなスクリーンリーダーは通常、読み取りモードにあります。なぜならば、この例はスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないためです。
               </li>
               <li>
-                実装された場合、オプショナルなナビゲーションキーは、ボタンやリンク間のタブ移動を、置き換えるのではなく補います。これは、ボタンとリンクが、ページの <kbd>Tab</kbd> シーケンスの中で 1 つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される <code>grid</code> のようなウィジェットロールを持つ要素に含まれていないためです。
+                実装された場合、オプションのナビゲーションキーは、ボタンやリンク間のタブ移動を、置き換えるのではなく補います。これは、ボタンとリンクが、ページの <kbd>Tab</kbd> シーケンスの中で 1 つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される <code>grid</code> のようなウィジェットロールを持つ要素に含まれていないためです。
               </li>
             </ol>
           </li>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 59bb810a..48d0e540 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -33,7 +33,7 @@ <h2>この例について</h2>
         <div class="advisement">
           <h3>重要</h3>
           <p>
-            この例では、ナビゲーションリンクのセットを指すために俗にいう「メニュー」という単語を使用していますが、WAI-ARIA のメニューロールは使用していません。
+            この例では、ナビゲーションリンクのセットを指すために俗にいう「メニュー」という単語を使用していますが、WAI-ARIA の menu ロールは使用していません。
             サイトナビゲーションのこの実装は、支援技術が menu ロールを持つウィジェットに期待する複雑な機能を提供しないため、menu ロールを使用していません。
             典型的なサイトナビゲーションには、<a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">メニューとメニューバーのパターンで指定されたキーボード操作</a>のすべてが必要ありません。
           </p>
@@ -160,16 +160,16 @@ <h2>アクセシビリティ機能</h2>
           <li>
             ドロップダウンが開かれ、フォーカスがナビゲーション領域内にある場合、<kbd>Esc</kbd> を押すとドロップダウンが閉じます。ナビゲーション領域からフォーカスを外すことでも、開いているドロップダウンは閉じます。この <kbd>Esc</kbd> の振る舞いを実装することは、WCAG 2.1 の <a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">1.4.13: ホバー又はフォーカスで表示されるコンテンツ</a>基準を満たすために必要です。
           </li>
-          <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザーのハイコントラストモードでキャレットが確実にレンダリングされるよう、CSS の <code>:after</code> 疑似要素のボーダースタイルを使用して作成されています。</li>
+          <li>表示/非表示の状態の視覚的インジケーターは、オペレーティングシステム及びブラウザーのハイコントラストモードでキャレットが確実にレンダリングされるよう、CSS の <code>::after</code> 疑似要素のボーダースタイルを使用して作成されています。</li>
           <li>
-            オプショナルなナビゲーションキー（矢印キー及び　<kbd>Home</kbd>、並びに　<kbd>End</kbd>）:
+            オプションのナビゲーションキー（矢印キー及び　 <kbd>Home</kbd>、並びに <kbd>End</kbd>）:
             <ol>
-              <li>オプショナルな矢印キーサポートを実装しており、フォーカスがナビゲーション領域内に含まれる場合、デフォルトのページスクロール動作を防いでいます。</li>
+              <li>オプションの矢印キーのサポートを実装しており、フォーカスがナビゲーション領域内に含まれる場合、デフォルトのページスクロール動作を防いでいます。</li>
               <li>
-                オプショナルなナビゲーションキーサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。この例を操作するとき、そのようなスクリーンリーダーは通常、読み取りモードにあります。なぜならば、この例はスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないためです。
+                オプションのナビゲーションキーのサポートは、主にスクリーンリーダーを使用していないキーボードユーザーのためのものです。読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードにあるときはこれらのキーをページに渡しません。この例を操作するとき、そのようなスクリーンリーダーは通常、読み取りモードにあります。なぜならば、この例はスクリーンリーダーのインタラクションモードをトリガーするウィジェットロールを使用していないためです。
               </li>
               <li>
-                実装された場合、オプショナルなナビゲーションキーは、ボタンやリンク間のタブ移動を、置き換えるのではなく補います。これは、ボタンとリンクが、ページの <kbd>Tab</kbd> シーケンスの中で 1 つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される <code>grid</code> のようなウィジェットロールを持つ要素に含まれていないためです。
+                実装された場合、オプションのナビゲーションキーは、ボタンやリンク間のタブ移動を、置き換えるのではなく補います。これは、ボタンとリンクが、ページの <kbd>Tab</kbd> シーケンスの中で 1 つの停止だけを占め、そのすべての子孫のフォーカスを管理することが期待される <code>grid</code> のようなウィジェットロールを持つ要素に含まれていないためです。
               </li>
             </ol>
           </li>

From ff88edfa01692e8b86d476491108008e91deeb7b Mon Sep 17 00:00:00 2001
From: Kazuhiko Tsuchiya <kaz.tsuchiya@gmail.com>
Date: Fri, 28 Jun 2024 17:53:14 +0900
Subject: [PATCH 09/10] Update
 content/patterns/disclosure/examples/disclosure-navigation-hybrid.html

Co-authored-by: Shimada Takayuki <taka@tsmd.jp>
---
 .../disclosure/examples/disclosure-navigation-hybrid.html       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 0d88bf96..0146bc78 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -198,7 +198,7 @@ <h2>キーボードサポート</h2>
                 <kbd>Tab</kbd><br>
                 <kbd>Shift + Tab</kbd>
               </th>
-              <td>トップレベルのリンクとボタン間、及びドロップダウンが開いている場合は、ドロップダウン内のリンクを通じてキーボードフォーカスを移動する。</td>
+              <td>トップレベルのリンクとボタン間をキーボードフォーカスを移動させる。またドロップダウンが開いている場合は、ドロップダウン内のリンクを通して移動させる。</td>
             </tr>
             <tr data-test-id="key-enter-space">
               <th>

From af7955b9a2281fbd644be4d359f5feb10f3e1121 Mon Sep 17 00:00:00 2001
From: Kazuhiko Tsuchiya <kaz.tsuchiya@gmail.com>
Date: Fri, 28 Jun 2024 17:54:19 +0900
Subject: [PATCH 10/10] Update
 content/patterns/disclosure/examples/disclosure-navigation.html

Co-authored-by: Shimada Takayuki <taka@tsmd.jp>
---
 content/patterns/disclosure/examples/disclosure-navigation.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 48d0e540..abc69658 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -191,7 +191,7 @@ <h2 id="kbd_label">キーボードサポート</h2>
                 <kbd>Tab</kbd><br>
                 <kbd>Shift + Tab</kbd>
               </th>
-              <td>トップレベルのボタン間、及びドロップダウンが開いている場合は、ドロップダウン内のリンクを通じてキーボードフォーカスを移動する。</td>
+              <td>トップレベルのリンクとボタン間をキーボードフォーカスを移動させる。またドロップダウンが開いている場合は、ドロップダウン内のリンクを通して移動させる。</td>
             </tr>
             <tr data-test-id="key-enter-space">
               <th>