Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox Patternの日本語化 #137

Open
wants to merge 6 commits into
base: waic-main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions content/index/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td><code>checkbox</code></td>
<td>
<ul>
<li><a href="../patterns/checkbox/examples/checkbox-mixed.html">Checkbox (Mixed-State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox.html">Checkbox (Two State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox-mixed.html">チェックボックスの例 (混合状態)</a></li>
<li><a href="../patterns/checkbox/examples/checkbox.html">チェックボックスの例 (二重状態)</a></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -157,7 +157,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td>
<ul>
<li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control</a></li>
<li><a href="../patterns/checkbox/examples/checkbox.html">Checkbox (Two State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox.html">チェックボックスの例 (二重状態)</a></li>
<li><a href="../patterns/listbox/examples/listbox-grouped.html">Listbox with Grouped Options</a></li>
<li><a href="../patterns/menubar/examples/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<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 @@ -488,8 +488,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-checked</code></td>
<td>
<ul>
<li><a href="../patterns/checkbox/examples/checkbox-mixed.html">Checkbox (Mixed-State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox.html">Checkbox (Two State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox-mixed.html">チェックボックスの例 (混合状態)</a></li>
<li><a href="../patterns/checkbox/examples/checkbox.html">チェックボックスの例 (二重状態)</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/radio/examples/radio-activedescendant.html">Radio Group Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/radio/examples/radio-rating.html">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
Expand All @@ -515,7 +515,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../patterns/accordion/examples/accordion.html">Accordion</a></li>
<li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control</a></li>
<li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox-mixed.html">Checkbox (Mixed-State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox-mixed.html">チェックボックスの例 (混合状態)</a></li>
<li><a href="../patterns/combobox/examples/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/combobox/examples/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/combobox/examples/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
Expand Down Expand Up @@ -666,7 +666,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="../patterns/accordion/examples/accordion.html">Accordion</a></li>
<li><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
<li><a href="../patterns/checkbox/examples/checkbox.html">Checkbox (Two State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/checkbox/examples/checkbox.html">チェックボックスの例 (二重状態)</a></li>
<li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/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>
Expand Down
63 changes: 32 additions & 31 deletions content/patterns/checkbox/checkbox-pattern.html
Original file line number Diff line number Diff line change
@@ -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>Checkbox 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">
Expand All @@ -14,61 +14,62 @@
</head>
<body>
<main>
<h1>Checkbox Pattern</h1>
<h1>チェックボックス パターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->

<section id="about">
<h2>About This Pattern</h2>
<p>WAI-ARIA supports two types of <a href="#checkbox" class="role-reference">checkbox</a> widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.</p>
<h2>このパターンについて</h2>
<p>WAI-ARIA は、2種類の <a href="#checkbox" class="role-reference">チェックボックス</a> ウィジェットをサポートしています:二つの状態のチェックボックスは、--チェック済みとチェック済みでない--の2つの選択肢を切り替えるもので、三つの状態のチェックボックスは、これに加えて「部分的にチェックされた」という第三の状態を許容するものです。</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"dual-state" "tri-state" はハイフンで結合された単語なので、日本語でもうまく結合した感じに訳したいですね。「二状態」「二元」あたり? MDNの日本語訳を見ると「3 状態チェックボックス」のように言っているようです。
https://developer.mozilla.org/ja/docs/Web/API/Element/ariaChecked#mixed

partially checkedは以降でも何度も出てきますが、訳がだいぶ揺れているのでしっかり統一したいです。
Apple の HIG の日本語版だと「部分的にオン」と言ってますね。これに揃えるなら「部分的にチェック」?
https://developer.apple.com/jp/design/human-interface-guidelines/toggles

チェックボックスの状態は、オン(選択)、オフ(選択解除)、部分的にオンのいずれかです。

ダッシュはhyphen minusではなくem dashを使った方が良いと思います。

こう?

Suggested change
<p>WAI-ARIA は、2種類の <a href="#checkbox" class="role-reference">チェックボックス</a> ウィジェットをサポートしています:二つの状態のチェックボックスは、--チェック済みとチェック済みでない--の2つの選択肢を切り替えるもので、三つの状態のチェックボックスは、これに加えて「部分的にチェックされた」という第三の状態を許容するものです</p>
<p>WAI-ARIA は、2種類の <a href="#checkbox" class="role-reference">チェックボックス</a> ウィジェットをサポートしています:2つの選択肢——チェックされた、チェックされていない——を切り替える二状態チェックボックスと、これに加えて部分的にチェックされたという第三の状態を許容する三状態チェックボックスです</p>

<p>
One common use of a tri-state checkbox can be found in software installers where a single tri-state checkbox is used to represent and control the state of an entire group of install options.
And, each option in the group can be individually turned on or off with a dual state checkbox.
三つの状態のチェックボックスの一般的な使用方法の1つは、ソフトウェアのインストーラです。三つの状態のチェックボックスがインストールオプションのグループ全体の状態を表し、制御するために使用されます。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原文は1文ですね。
「インストーラです」ではなく「インストーラの中で...」かなと
たとえばこう?

Suggested change
三つの状態のチェックボックスの一般的な使用方法の1つは、ソフトウェアのインストーラです。三つの状態のチェックボックスがインストールオプションのグループ全体の状態を表し、制御するために使用されます
三状態チェックボックスの一般的な使用方法の1つは、ソフトウェアのインストーラの中で見られるもので、単一の三状態チェックボックスが、インストールオプションのグループ全体の状態を表示、制御するために使われます

そして、グループ内の各オプションは、二つの状態のチェックボックスで個別にオン又はオフにすることができます。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
そして、グループ内の各オプションは、二つの状態のチェックボックスで個別にオン又はオフにすることができます
そして、グループ内の各オプションは、二状態チェックボックスで個別にオン又はオフにすることができます

</p>
<ul>
<li>If all options in the group are checked, the overall state is represented by the tri-state checkbox displaying as checked.</li>
<li>If some of the options in the group are checked, the overall state is represented with the tri-state checkbox displaying as partially checked.</li>
<li>If none of the options in the group are checked, the overall state of the group is represented with the tri-state checkbox displaying as not checked.</li>
<li>グループ内のすべてのオプションがチェックされている場合、全体の状態は、三つの状態のチェックボックスがチェックされることで表現されます。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

displaying as checked は「チェック状態として表示」くらいですかね

Suggested change
<li>グループ内のすべてのオプションがチェックされている場合、全体の状態は、三つの状態のチェックボックスがチェックされることで表現されます</li>
<li>グループ内のすべてのオプションがチェックされている場合、全体の状態は、三状態チェックボックスをチェック状態として表示することで表現されます</li>

<li>グループ内の一部のオプションがチェックされている場合、全体の状態は、三つの状態のチェックボックスの一部がチェックされることで表現されます。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

partially checkedを「部分的にチェック」としたので

Suggested change
<li>グループ内の一部のオプションがチェックされている場合、全体の状態は、三つの状態のチェックボックスの一部がチェックされることで表現されます</li>
<li>グループ内の一部のオプションがチェックされている場合、全体の状態は、三状態チェックボックスを部分的にチェックされた状態として表示することで表現されます</li>

<li>グループ内のオプションが1つもチェックされていない場合、全体の状態は、三つの状態のチェックボックスがチェックされていないことで表現されます。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<li>グループ内のオプションが1つもチェックされていない場合、全体の状態は、三つの状態のチェックボックスがチェックされていないことで表現されます</li>
<li>グループ内のオプションが1つもチェックされていない場合、全体の状態は、三状態チェックボックスをチェックされていない状態として表示することで表現されます</li>

</ul>
<p>The user can use the tri-state checkbox to change all options in the group with a single action:</p>
<p>ユーザーは、三つの状態のチェックボックスを使用して、グループ内のすべてのオプションを1つのアクションで変更することができます:</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

an action ではなく a single action となっていて単一であることが強調されているので、その辺のニュアンスは出したいかもです。

Suggested change
<p>ユーザーは、三つの状態のチェックボックスを使用して、グループ内のすべてのオプションを1つのアクションで変更することができます</p>
<p>ユーザーは、三状態チェックボックスを使用して、グループ内のすべてのオプションをただ一回のアクションで変更することができます</p>

<ul>
<li>Checking the overall checkbox checks all options in the group.</li>
<li>Unchecking the overall checkbox will uncheck all options in the group.</li>
<li>全体のチェックボックスをチェックすると、グループ内のすべてのオプションがチェックされます。</li>
<li>全体のチェックボックスのチェックを外すと、グループ内のすべてのオプションのチェックが外れます。</li>
<li>
And, In some implementations, the system may remember which options were checked the last time the overall status was partially checked.
If this feature is provided, activating the overall checkbox a third time recreates that partially checked state where only some options in the group are checked.
そして、一部の実装では、最後にどのオプションがチェックされていたかを記憶する場合があります。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"the last time" はこの文脈では「前回」としたほうがいいですね。

Suggested change
そして、一部の実装では、最後にどのオプションがチェックされていたかを記憶する場合があります
そして、一部の実装では、前回どのオプションがチェックされていたかを記憶する場合があります

この機能が提供されている場合、全体のチェックボックスを3回目に作動させると、グループ内の一部のオプションのみがチェックされている状態が再現されます。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここのthird timeは「3回目」ではなく「3回」ですね。
"that partially checked state" の訳が落ちているかも。

Suggested change
この機能が提供されている場合、全体のチェックボックスを3回目に作動させると、グループ内の一部のオプションのみがチェックされている状態が再現されます。
この機能が提供されている場合、全体のチェックボックスを3回作動させると、部分的にチェックされた状態になり、グループ内の一部のオプションのみがチェックされている状態が再現されます。

</li>
</ul>
</section>

<section id="examples">
<h2>Examples</h2>
<h2></h2>
<ul>
<li><a href="examples/checkbox.html">Checkbox (Two-State) Example</a>: Demonstrates a simple 2-state checkbox.</li>
<li><a href="examples/checkbox-mixed.html">Checkbox (Mixed-State) Example</a>: Demonstrates a checkbox that uses the mixed value for aria-checked to reflect and control checked states within a group of two-state HTML checkboxes contained in an HTML <code>fieldset</code>.</li>
<li><a href="examples/checkbox.html">チェックボックス(二つの状態)の例</a>:シンプルな二つの状態のチェックボックスのデモンストレーションです。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<li><a href="examples/checkbox.html">チェックボックス(二つの状態)の例</a>シンプルな二つの状態のチェックボックスのデモンストレーションです</li>
<li><a href="examples/checkbox.html">チェックボックス(二状態)の例</a>シンプルな二状態チェックボックスのデモンストレーションです</li>

<li><a href="examples/checkbox-mixed.html">チェックボックス(三つの状態)の例</a>HTML <code>fieldset</code> 内に含まれる二つの状態の HTML チェックボックスのグループ内のチェック状態を反映し制御するために、aria-checked の混合値を使用するチェックボックスのデモンストレーションです。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mixed valueは aria-checked="mixed" という指定のことを指しているので、そのままmixedで良いかと。「aria-checked に mixed を指定」というくらいでしょうか。

Suggested change
<li><a href="examples/checkbox-mixed.html">チェックボックス(三つの状態)の例</a> :HTML <code>fieldset</code> 内に含まれる二つの状態の HTML チェックボックスのグループ内のチェック状態を反映し制御するために、aria-checked の混合値を使用するチェックボックスのデモンストレーションです</li>
<li><a href="examples/checkbox-mixed.html">チェックボックス(三状態)の例</a> :HTML <code>fieldset</code> 内に含まれる二状態の HTML チェックボックスのグループ内のチェック状態を反映し制御するために、aria-checked に mixed という値を指定するチェックボックスのデモンストレーションです</li>

</ul>
</section>

<section id="keyboard_interaction">
<h2>Keyboard Interaction</h2>
<p>When the checkbox has focus, pressing the <kbd>Space</kbd> key changes the state of the checkbox.</p>
<h2>キーボードの操作</h2>
<p>チェックボックスにフォーカスがあるとき、<kbd>Space</kbd> キーを押すとチェックボックスの状態が変わります。</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

以下 "the checkbox" の the を訳出すべきかどうか悩ましいですね。
ここで紹介しているチェックボックスパターンはこうだ、という話をしています
が、今の訳だとチェックボックス全般の話をしているようにも読めます。

かといって「このチェックボックス」とするのも変な気がしますね。
なくてもわかるような気もしますがどうしたもんですかね。

</section>

<section id="roles_states_properties">
<h2>WAI-ARIA Roles, States, and Properties</h2>
<h2>WAI-ARIAのロール、ステート、及びプロパティ</h2>
<ul>
<li>The checkbox has role <a href="#checkbox" class="role-reference">checkbox</a>.</li>
<li>チェックボックスには <a href="#checkbox" class="role-reference">checkbox</a> ロールがあります。</li>
<li>
The checkbox has an accessible label provided by one of the following:
チェックボックスには、以下のいずれかによってアクセシブルなラベルが提供されています:
<ul>
<li>Visible text content contained within the element with role <code>checkbox</code>.</li>
<li>A visible label referenced by the value of <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set on the element with role <code>checkbox</code>.</li>
<li><a href="#aria-label" class="property-reference">aria-label</a> set on the element with role <code>checkbox</code>.</li>
<li><code>checkbox</code> ロールを持つ要素内に含まれる表示可能なテキストコンテンツ。</li>
<li><code>checkbox</code> ロールを持つ要素に設定された <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> の値によって参照される表示可能なラベル。</li>
<li><code>checkbox</code> ロールを持つ要素に設定された <a href="#aria-label" class="property-reference">aria-label</a> </li>
</ul>
</li>
<li>When checked, the checkbox element has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>true</code>.</li>
<li>When not checked, it has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>false</code>.</li>
<li>When partially checked, it has state <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>mixed</code>.</li>
<li>If a set of checkboxes is presented as a logical group with a visible label, the checkboxes are included in an element with role <a href="#group" class="role-reference">group</a> that has the property <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> set to the ID of the element containing the label.</li>
<li>If the presentation includes additional descriptive static text relevant to a checkbox or checkbox group, the checkbox or checkbox group has the property <a href="#aria-describedby" class="property-reference">aria-describedby</a> set to the ID of the element containing the description.</li>
<li>チェックされている場合、チェックボックス要素の状態は <a href="#aria-checked" class="state-reference">aria-checked</a> <code>true</code> に設定されています。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この state は ARIA のロール、ステート、プロパティのうちのステートですね。WCAGのほうでは「状態 (state)」としているやつです。ARIA側ではどうしてましたっけ。カタカナ「ステート」?

Suggested change
<li>チェックされている場合、チェックボックス要素の状態は <a href="#aria-checked" class="state-reference">aria-checked</a> <code>true</code> に設定されています。</li>
<li>チェックされている場合、チェックボックス要素の <a href="#aria-checked" class="state-reference">aria-checked</a> ステートが <code>true</code> に設定されています。</li>

<li>チェックされていない場合、状態は <a href="#aria-checked" class="state-reference">aria-checked</a> <code>false</code> に設定されています。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<li>チェックされていない場合、状態は <a href="#aria-checked" class="state-reference">aria-checked</a> <code>false</code> に設定されています。</li>
<li>チェックされていない場合、 <a href="#aria-checked" class="state-reference">aria-checked</a> ステートが <code>false</code> に設定されています。</li>

<li>一部チェックされている場合、状態は二つの状態 <a href="#aria-checked" class="state-reference">aria-checked</a> <code>mixed</code> に設定されています。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<li>一部チェックされている場合、状態は二つの状態 <a href="#aria-checked" class="state-reference">aria-checked</a> <code>mixed</code> に設定されています。</li>
<li>部分的にチェックされている場合、 <a href="#aria-checked" class="state-reference">aria-checked</a> ステートが <code>mixed</code> に設定されています。</li>

<li>チェックボックスが論理的なグループとして表示可能なラベルとともに提示される場合、チェックボックスは、ラベルを含む要素のIDに設定されたプロパティ <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> を持つ <a href="#group" class="role-reference">group</a> ロールの要素に含まれています。</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

冒頭の a set of の訳が落ちているようです。「一連の」くらい?
「IDに設定された」は直訳だとそうなんですが、プロパティの値をそのIDにしたという意味で、これは「IDを設定した」くらいですかね。
なんだか読みにくいけど原文も読みにくいからいいか。

Suggested change
<li>チェックボックスが論理的なグループとして表示可能なラベルとともに提示される場合、チェックボックスは、ラベルを含む要素のIDに設定されたプロパティ <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> を持つ <a href="#group" class="role-reference">group</a> ロールの要素に含まれています。</li>
<li>一連のチェックボックスが論理的なグループとして、表示可能なラベルとともに提示される場合、チェックボックスは、ラベルを含む要素のIDを設定した <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> プロパティを持つ <a href="#group" class="role-reference">group</a> ロールの要素に含まれています。</li>

<li>チェックボックスまたはチェックボックスのグループに関連する静的な補足の説明テキストを表示させる場合、チェックボックスまたはチェックボックスのグループには、その説明テキストを含む要素のIDと関連づいた <a href="#aria-describedby" class="property-reference">aria-describedby</a> プロパティを設定します。</li>
</ul>
</section>
</main>
Expand Down
Loading