diff --git a/content/index/index.html b/content/index/index.html
index bc5bdcc3..d2893ba3 100644
--- a/content/index/index.html
+++ b/content/index/index.html
@@ -63,7 +63,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>button</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/button/examples/button_idl.html">Button  (IDL Version)</a></li>
+                <li><a href="../patterns/button/examples/button_idl.html">ボタンの例（IDLバージョン）</a></li>
                 <li><a href="../patterns/button/examples/button.html">ボタンの例</a></li>
               </ul>
             </td>
@@ -619,7 +619,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-hidden</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/button/examples/button_idl.html">Button  (IDL Version)</a></li>
+                <li><a href="../patterns/button/examples/button_idl.html">ボタンの例（IDLバージョン）</a></li>
                 <li><a href="../patterns/menubar/examples/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider-multithumb/examples/slider-multithumb.html">Horizontal Multi-Thumb Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -765,7 +765,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-pressed</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/button/examples/button_idl.html">Button  (IDL Version)</a></li>
+                <li><a href="../patterns/button/examples/button_idl.html">ボタンの例（IDLバージョン）</a></li>
                 <li><a href="../patterns/button/examples/button.html">ボタンの例</a></li>
                 <li><a href="../patterns/toolbar/examples/toolbar.html">Toolbar</a></li>
               </ul>
diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html
index 6eb3a156..ed431677 100644
--- a/content/patterns/button/examples/button_idl.html
+++ b/content/patterns/button/examples/button_idl.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Button Examples (IDL Version)</title>
+    <title>ボタンの例（IDLバージョン）</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -20,49 +20,48 @@
   <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="../button-pattern.html">Design Pattern</a></li>
+        <li><a href="https://github.com/w3c/aria-practices/projects/14">関連するIssues</a></li>
+        <li><a href="../button-pattern.html">デザインパターン</a></li>
       </ul>
     </nav>
 
     <main>
-      <h1>Button Examples (IDL Version)</h1>
+      <h1>ボタンの例（IDLバージョン）</h1>
 
       <section>
-        <h2>About This example</h2>
-        <p>The following examples of the <a href="../button-pattern.html">Button Pattern</a> demonstrate a new JavaScript syntax for coding ARIA attributes.</p>
+        <h2>この例について</h2>
+        <p>以下の<a href="../button-pattern.html">ボタンパターン</a>の例は、ARIA属性をコーディングするための新しいJavaScriptの構文を示しています。</p>
         <p>
-          The JavaScript for the example buttons on this page uses the <a class="specref" href="#idl-interface">IDL Interface defined in ARIA 1.2</a>.
-          The purpose of these examples is to illustrate how to use ARIA Attribute Reflection and provide a test case for browser and assistive technology interoperability.
-          Specifically, the <code>role</code> and <code>ariaPressed</code> attributes are accessed using dot notation instead of <code>setAttribute()</code> and <code>getAttribute()</code>.
-          In all other respects, these examples are identical to the <a href="button.html">Button Examples</a>.
+          このページの例のボタンに対するJavaScriptは、<a class="specref" href="#idl-interface">ARIA 1.2で定義されたIDLインターフェイス</a>を使用しています。
+          これらの例の目的は、ARIA属性リフレクションの使用方法を示し、ブラウザと支援技術の相互運用性のテストケースを提供することです。
+          具体的には、<code>role</code>および<code>ariaPressed</code>属性は、<code>setAttribute()</code>および<code>getAttribute()</code>の代わりにドット表記法を使用してアクセスされます。
+          その他の点では、これらの例は<a href="button.html">ボタンの例</a>と同一です。
         </p>
       </section>
 
       <section>
         <div class="example-header">
-          <h2 id="ex_label">Example</h2>
+          <h2 id="ex_label">例</h2>
         </div>
 
-        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_label ex_start_sep" aria-label="の開始"></div>
 
         <div id="example">
           <div class="advisement">
-            <h3>Important</h3>
+            <h3>重要</h3>
             <p>
-              This example is coded using syntax that was not introduced until version 1.2 of the ARIA specification.
-              When using a
-              <a href="https://github.com/w3c/aria-practices/issues/1692" target="_blank">browser that does not yet provide support for ARIA attribute reflection</a>,
-              the buttons will not be styled correctly.
+              この例は、ARIA仕様のバージョン1.2まで導入されなかった構文を使用してコーディングされています。
+              <a href="https://github.com/w3c/aria-practices/issues/1692" target="_blank">ARIA属性リフレクションのサポートをまだ提供していないブラウザ</a>を使用する場合、
+              ボタンは正しくスタイルされません。
             </p>
           </div>
 
-          <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
-          <div tabindex="0" id="action">Print Page</div>
+          <p>この<q>印刷</q>アクションボタンは<code>div</code>要素を使用しています。</p>
+          <div tabindex="0" id="action">ページを印刷</div>
 
-          <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
+          <p>この<q>ミュート</q>トグルボタンは<code>a</code>要素を使用しています。</p>
           <a tabindex="0" id="toggle">
-            Mute
+            ミュート
             <svg aria-hidden="true" focusable="false">
               <use xlink:href="#icon-sound"></use>
             </svg>
@@ -85,42 +84,42 @@ <h3>Important</h3>
           </svg>
         </div>
 
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_label ex_end_sep" aria-label="の終了"></div>
       </section>
 
       <section>
-        <h2 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>
             <tr data-test-id="key-enter">
               <th><kbd>Enter</kbd></th>
-              <td>Activates the button.</td>
+              <td>ボタンを作動させる。</td>
             </tr>
             <tr data-test-id="key-space">
               <th><kbd>Space</kbd></th>
-              <td>Activates the button.</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>
@@ -130,9 +129,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td><code>div</code>, <code>a</code></td>
               <td>
                 <ul>
-                  <li>Set in javascript with <code>element.role = 'button';</code>.</li>
-                  <li>Identifies the element as a <code>button</code> widget.</li>
-                  <li>Accessible name for the button is defined by the text content of the element.</li>
+                  <li><code>element.role = 'button';</code>でJavaScriptで設定。</li>
+                  <li>要素を<code>button</code>ウィジェットとして識別します。</li>
+                  <li>ボタンのアクセシブル名は、要素のテキストコンテンツによって定義されます。</li>
                 </ul>
               </td>
             </tr>
@@ -144,8 +143,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td><code>div</code>, <code>a</code></td>
               <td>
                 <ul>
-                  <li>Includes the element in the tab sequence.</li>
-                  <li>Needed on the <code>a</code> element because it does not have a <code>href</code> attribute.</li>
+                  <li>要素をタブ順序に含めます。</li>
+                  <li><code>href</code>属性を持たない<code>a</code>要素に必要です。</li>
                 </ul>
               </td>
             </tr>
@@ -155,9 +154,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td><code>a</code></td>
               <td>
                 <ul>
-                  <li>Set in javascript with <code>button.ariaPressed = 'false';</code>.</li>
-                  <li>Identifies the button as a toggle button.</li>
-                  <li>Indicates the toggle button is not pressed.</li>
+                  <li><code>button.ariaPressed = 'false';</code>でJavaScriptで設定。</li>
+                  <li>ボタンをトグルボタンとして識別します。</li>
+                  <li>トグルボタンが押されていないことを示します。</li>
                 </ul>
               </td>
             </tr>
@@ -167,9 +166,9 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td><code>a</code></td>
               <td>
                 <ul>
-                  <li>Set in javascript with <code>button.ariaPressed = 'true';</code>.</li>
-                  <li>Identifies the button as a toggle button.</li>
-                  <li>Indicates the toggle button is pressed.</li>
+                  <li><code>button.ariaPressed = 'true';</code>でJavaScriptで設定。</li>
+                  <li>ボタンをトグルボタンとして識別します。</li>
+                  <li>トグルボタンが押されていることを示します。</li>
                 </ul>
               </td>
             </tr>
@@ -177,14 +176,14 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td></td>
               <th scope="row"><code>aria-hidden="true"</code></th>
               <td><code>svg</code></td>
-              <td>Excludes SVG from accessible name calculation for the button.</td>
+              <td>ボタンのアクセシブル名の計算からSVGを除外します。</td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScriptとCSSのソースコード</h2>
 
         <ul id="css_js_files">
           <li>
@@ -199,10 +198,10 @@ <h2>JavaScript and CSS Source Code</h2>
       </section>
 
       <section>
-        <h2 id="sc1_label">HTML Source Code</h2>
-        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+        <h2 id="sc1_label">HTMLソースコード</h2>
+        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_label sc1_start_sep" aria-label="の開始"></div>
         <pre><code id="sc1"></code></pre>
-        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_label sc1_end_sep" aria-label="の終了"></div>
         <script>
           sourceCode.add('sc1', 'example', 'ex_label', 'css_js_files');
           sourceCode.make();

Key	Function	キー	機能
`Enter`	Activates the button.	ボタンを作動させる。
`Space`	Activates the button.	ボタンを作動させる。
Role	Attribute	Element	Usage	役割
`div`, `a`	- Set in javascript with `element.role = 'button';`. - Identifies the element as a `button` widget. - Accessible name for the button is defined by the text content of the element. + `element.role = 'button';`でJavaScriptで設定。 + 要素を`button`ウィジェットとして識別します。 + ボタンのアクセシブル名は、要素のテキストコンテンツによって定義されます。
`div`, `a`	- Includes the element in the tab sequence. - Needed on the `a` element because it does not have a `href` attribute. + 要素をタブ順序に含めます。 + `href`属性を持たない`a`要素に必要です。
`a`	- Set in javascript with `button.ariaPressed = 'false';`. - Identifies the button as a toggle button. - Indicates the toggle button is not pressed. + `button.ariaPressed = 'false';`でJavaScriptで設定。 + ボタンをトグルボタンとして識別します。 + トグルボタンが押されていないことを示します。
`a`	- Set in javascript with `button.ariaPressed = 'true';`. - Identifies the button as a toggle button. - Indicates the toggle button is pressed. + `button.ariaPressed = 'true';`でJavaScriptで設定。 + ボタンをトグルボタンとして識別します。 + トグルボタンが押されていることを示します。
	`aria-hidden="true"`	`svg`	Excludes SVG from accessible name calculation for the button.	ボタンのアクセシブル名の計算からSVGを除外します。