Skip to content

Commit

Permalink
ボタン(IDLバージョン)の例の日本語化
Browse files Browse the repository at this point in the history
  • Loading branch information
tsmd committed Aug 16, 2023
1 parent 8fc66fc commit 3c7a01c
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 51 deletions.
6 changes: 3 additions & 3 deletions content/index/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
95 changes: 47 additions & 48 deletions content/patterns/button/examples/button_idl.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -167,24 +166,24 @@ <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>
<tr data-test-id="svg-aria-hidden">
<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>
Expand All @@ -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();
Expand Down

0 comments on commit 3c7a01c

Please sign in to comment.