Skip to content

feat(checkbox): チェックボックスパターンと例の日本語翻訳 #158

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.

Sign up for GitHub

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

Open
ef81sp wants to merge 18 commits into
base: waic-main
Choose a base branch
from
+172 −169
Open

feat(checkbox): チェックボックスパターンと例の日本語翻訳 #158

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
841579a
feat(checkbox): チェックボックスパターンと例の日本語翻訳
ef81sp Sep 15, 2025
77043ce
typo
ef81sp Sep 21, 2025
a8b2782
typo
ef81sp Sep 21, 2025
96da3bb
typo
ef81sp Sep 21, 2025
0e075af
typo
ef81sp Sep 21, 2025
ef5948e
typo
ef81sp Oct 7, 2025
de7db76
s/3 ?値/三値/
ef81sp Oct 7, 2025
9c7e9de
mixedは属性値
ef81sp Oct 7, 2025
939ad12
separatorのaria-labelledbyの順序を修正
ef81sp Oct 14, 2025
9e5785a
用語統一: aria-checked の「状態」を「ステート」に変更
ef81sp Oct 25, 2025
a0c05e1
表現改善: 「同様の例」を「類似の例」に変更
ef81sp Oct 25, 2025
013651a
表現改善: 「一連の」を「複数の...のセット」に変更
ef81sp Oct 25, 2025
07e33ed
用語統一: 「アクティブになる」を「動作する」に変更
ef81sp Oct 25, 2025
c9ce650
表現改善: 透明な境界線の説明をより正確に修正
ef81sp Oct 25, 2025
3416829
表現改善: ensureの訳を明示的に訳出
ef81sp Oct 25, 2025
f0eeb8d
用語統一: アクセシブルな名前に英語表記を追加
ef81sp Oct 25, 2025
9f59fcb
表現統一: チェックボックスの状態表現を統一
ef81sp Oct 25, 2025
6f2540e
翻訳統一: check/uncheck 関連の訳語を統一
ef81sp Nov 25, 2025
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
65 changes: 33 additions & 32 deletions content/patterns/checkbox/checkbox-pattern.html
View file
Open in desktop
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,64 +14,65 @@
</head>
<body>
<main>
<h1>Checkbox Pattern</h1>
<h1>チェックボックスのパターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/962f6e771dccd4e3bbf8b83da717fb8d75b861da -->

<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">checkbox</a> ウィジェットをサポートしています。二値状態のチェックボックスは、チェック済みと未チェックの 2 つの選択肢を切り替え、三値状態のチェックボックスは、部分的にチェック済みとして知られる追加の 3 番目の状態を許可します。</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 つは、ソフトウェアインストーラーにあります。そこでは、単一の 三値状態チェックボックスを使用して、インストールオプションのグループ全体の状態を表し、制御します。
そして、グループ内の各オプションは二値状態チェックボックスで個別にオン又はオフにできます。
</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>
<li>グループ内の一部のオプションがチェックされている場合、全体の状態は、部分的にチェック済みとして表示される三値状態チェックボックスで表されます。</li>
<li>グループ内のどのオプションもチェックされていない場合、グループの全体の状態は、チェックされていないと表示される三値状態チェックボックスで表されます。</li>
</ul>
<p>The user can use the tri-state checkbox to change all options in the group with a single action:</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.
そして、一部の実装では、システムは、全体の状態が最後に部分的にチェックされたときにどのオプションがチェックされたかを記憶している場合があります。
この機能が提供されている場合、全体のチェックボックスを3回目にアクティブにすると、グループ内の一部のオプションのみがチェックされている部分的にチェックされた状態が再作成されます。
</li>
</ul>
</section>

<section id="examples">
<img alt="" src="../../images/pattern-checkbox.svg">
<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>
<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>
</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>
<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>
<li>チェックボックスのセットが可視ラベルを持つ論理グループとして提示される場合、チェックボックスは、<a href="#aria-labelledby" class="property-reference">aria-labelledby</a> プロパティがラベルを含む要素の ID に設定された <a href="#group" class="role-reference">group</a> ロールを持つ要素に含まれます。</li>
<li>プレゼンテーションにチェックボックス又はチェックボックスグループに関連する追加の説明的な静的テキストが含まれている場合、チェックボックス又はチェックボックスグループには、説明を含む要素の ID に設定された <a href="#aria-describedby" class="property-reference">aria-describedby</a> プロパティがあります。</li>
Copy link
Contributor Author

@ef81sp ef81sp Oct 7, 2025

Choose a reason for hiding this comment

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

presentationは「提示」とすると用語集で定まっている

Suggested change
<li>プレゼンテーションにチェックボックス又はチェックボックスグループに関連する追加の説明的な静的テキストが含まれている場合、チェックボックス又はチェックボックスグループには、説明を含む要素の ID に設定された <a href="#aria-describedby" class="property-reference">aria-describedby</a> プロパティがあります。</li>
<li>提示にチェックボックス又はチェックボックスグループに関連する追加の説明的な静的テキストが含まれている場合、チェックボックス又はチェックボックスグループは、説明を含む要素の ID に設定された <a href="#aria-describedby" class="property-reference">aria-describedby</a> プロパティを持ちます。</li>

しかし提示だとしっくりこないですね……
A has a property の訳も統一したい

</ul>
</section>
</main>
</body>
</html>
</html>
Loading