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.

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

ボタン パターンの日本語化 #130

Open
wants to merge 7 commits into
base: waic-main
Choose a base branch
from
Open

ボタン パターンの日本語化 #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a70a97f
ボタン パターンの日本語化
tsmd Aug 10, 2023
b09ebfb
ボタンの例の日本語化
tsmd Aug 16, 2023
532d1a3
ボタン（IDLバージョン）の例の日本語化
tsmd Aug 16, 2023
241b8f7
一部の語句（role, state, tabindex）の訳出を統一
tsmd Sep 25, 2023
9c6b55d
Update button-pattern.html
DaichiImai Apr 24, 2024
c86a089
Update button.html
DaichiImai Apr 24, 2024
17b22b5
Update button_idl.html
DaichiImai Apr 25, 2024
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
10 changes: 5 additions & 5 deletions content/index/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ <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.html">Button</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>
</tr>
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,8 +765,8 @@ <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.html">Button</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>
</td>
Expand Down
95 changes: 48 additions & 47 deletions content/patterns/button/button-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>Button 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,92 +14,93 @@
</head>
<body>
<main>
<h1>Button Pattern</h1>
<h1>ボタン パターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->

<section id="about">
<h2>About This Pattern</h2>
<h2>このパターンについて</h2>
<p>
A <a class="role-reference" href="#button">button</a> is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
A common convention for informing users that a button launches a dialog is to append &quot;&#8230;&quot; (ellipsis) to the button label, e.g., &quot;Save as&#8230;&quot;.
<a class="role-reference" href="#button">ボタン</a> は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などの利用者のアクションやイベントのトリガを可能にするウィジェットです。
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

「performing a delete operation」の「performing」が抜けてるかもしれないです。
また「利用者のアクション」とするよりは、「アクションやイベントを利用者がトリガーできるようにする」といったニュアンスが近いのかなと。

Suggested change
<a class="role-reference" href="#button">ボタン</a> は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などの利用者のアクションやイベントのトリガを可能にするウィジェットです。
<a class="role-reference" href="#button">ボタン</a> は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作の実行などのアクションやイベントを利用者がトリガーできるようにするウィジェットです。

ボタンがダイアログを起動することを利用者に知らせるための一般的な方法は、ボタンラベルに &quot;&#8230;&quot;（省略記号）を付加することです。例： &quot;名前を付けて保存&#8230;&quot;
</p>
<p>In addition to the ordinary button widget, WAI-ARIA supports 2 other types of buttons:</p>
<p>通常のボタンウィジェットに加えて、WAI-ARIA は2種類のボタンをサポートしています：</p>
<ul>
<li>
Toggle button: A two-state button that can be either off (not pressed) or on (pressed).
To tell assistive technologies that a button is a toggle button, specify a value for the attribute <a href="#aria-pressed" class="state-reference">aria-pressed</a>.
For example, a button labelled mute in an audio player could indicate that sound is muted by setting the pressed state true.
<strong>Important:</strong> it is critical the label on a toggle does not change when its state changes.
In this example, when the pressed state is true, the label remains &quot;Mute&quot; so a screen reader would say something like &quot;Mute toggle button pressed&quot;.
Alternatively, if the design were to call for the button label to change from &quot;Mute&quot; to &quot;Unmute,&quot; the aria-pressed attribute would not be needed.
トグルボタン：オフ（押されていない状態）とオン（押された状態）の2つの状態を持つボタン。
ボタンがトグルボタンであることを支援技術に伝えるには、<a href="#aria-pressed" class="state-reference">aria-pressed</a> 属性に値を指定します。
例えば、オーディオプレーヤーのミュートというラベルのボタンは、押された状態を true に設定することで、音がミュートされていることを示すことができます。
<strong>重要：</strong>トグルボタンのラベルは、その状態が変化しても変化しないことが重要です。
この例では、押された状態が true のとき、ラベルは &quot;ミュート&quot; のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています" のように言うでしょう。
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

スクリーンリーダーは「言う」より「読み上げる」の方が一般的な表現な気がしました。

Suggested change
この例では、押された状態が true のとき、ラベルは &quot;ミュート&quot; のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています" のように言うでしょう。
この例では、押された状態が true のとき、ラベルは &quot;ミュート&quot; のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています" のように読み上げるでしょう。

そうではなく、ボタンのラベルが "ミュート" から "ミュート解除" に変わるようなデザインであれば、aria-pressed 属性は必要ありません。
</li>
<li>Menu button: as described in the <a href="../menu-button/menu-button-pattern.html">menu button pattern</a>, a button is revealed to assistive technologies as a menu button if it has the property <a href="#aria-haspopup" class="property-reference">aria-haspopup</a> set to either <code>menu</code> or <code>true</code>.</li>
<li>メニューボタン： <a href="../menu-button/menu-button-pattern.html">メニューボタン パターン</a> で説明されているように、ボタンが支援技術にメニューボタンとして認識されるためには、<a href="#aria-haspopup" class="property-reference">aria-haspopup</a> プロパティが <code>menu</code> 又は <code>true</code> に設定されている必要があります。</li>
</ul>
<div class="note">
<h3>Note</h3>
<h3>ノート</h3>
<p>
The types of actions performed by buttons are distinctly different from the function of a link (see <a href="../link/link-pattern.html">link pattern</a>).
It is important that both the appearance and role of a widget match the function it provides.
Nevertheless, elements occasionally have the visual style of a link but perform the action of a button.
In such cases, giving the element role <code>button</code> helps assistive technology users understand the function of the element.
However, a better solution is to adjust the visual design so it matches the function and ARIA role.
ボタンによって実行されるアクションの種類は、リンクの機能（ <a href="../link/link-pattern.html">リンクパターン</a> を参照）とは明確に異なります。
ウィジェットの外観及び役割は、それが提供する機能と一致することが重要です。
それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。
このような場合、要素に <code>button</code> の役割を与えることは、支援技術利用者が要素の機能を理解するのに役立ちます。
しかし、より良い解決策は、機能と ARIA の役割が一致するように視覚デザインを調整することです。
Comment on lines +42 to +45
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ARIAの文脈で「role」を使う時は「役割」ではなく「ロール」としておきたいです。

Suggested change
ウィジェットの外観及び役割は、それが提供する機能と一致することが重要です。
それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。
このような場合、要素に <code>button</code> の役割を与えることは、支援技術利用者が要素の機能を理解するのに役立ちます。
しかし、より良い解決策は、機能と ARIA の役割が一致するように視覚デザインを調整することです。
ウィジェットの外観及びロールは、それが提供する機能と一致することが重要です。
それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。
このような場合、要素に <code>button</code> ロールを与えることは、支援技術利用者が要素の機能を理解するのに役立ちます。
しかし、より良い解決策は、機能と ARIA ロールが一致するように視覚デザインを調整することです。

</p>
</div>
</section>

<section id="examples">
<h2>Examples</h2>
<h2>例</h2>
<ul>
<li><a href="examples/button.html">Button Examples</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.</li>
<li><a href="examples/button.html">ボタンの例</a> ：クリック可能なHTMLの <code>div</code> 要素及び <code>span</code> 要素を使って、アクセシブルなコマンドボタン及びトグルボタンを作った例。</li>
<li>
<a href="examples/button_idl.html">Button Examples (IDL)</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.
This example uses the <a class="specref" href="#idl-interface">IDL Interface</a>.
<a href="examples/button_idl.html">ボタンの例（IDL）</a> ：クリック可能なHTMLの <code>div</code> 要素及び <code>span</code> 要素を使って、アクセシブルなコマンド及びトグルボタンを作った例。
この例では <a class="specref" href="#idl-interface">IDLインターフェイス</a> を用いています。
</li>
</ul>
</section>

<section id="keyboard_interaction">
<h2>Keyboard Interaction</h2>
<p>When the button has focus:</p>
<h2>キーボード操作</h2>
<p>ボタンにフォーカスがある場合：</p>
<ul>
<li><kbd>Space</kbd>: Activates the button.</li>
<li><kbd>Enter</kbd>: Activates the button.</li>
<li><kbd>Space</kbd> ：ボタンをアクティブにします。</li>
<li><kbd>Enter</kbd> ：ボタンをアクティブにします。</li>
<li>
Following button activation, focus is set depending on the type of action the button performs. For example:
ボタンをアクティブにした後、フォーカスの設定はボタンが実行するアクションの種類によって異なります。例えば：
<ul>
<li>
If activating the button opens a dialog, the focus moves inside the dialog.
(see <a href="../dialog-modal/dialog-modal-pattern.html">dialog pattern</a>)
ボタンを押すとダイアログが開く場合、フォーカスはダイアログ内に移動します。
（ <a href="../dialog-modal/dialog-modal-pattern.html">ダイアログ パターン</a> を参照）
</li>
<li>
If activating the button closes a dialog, focus typically returns to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element.
For example, activating a cancel button in a dialog returns focus to the button that opened the dialog.
However, if the dialog were confirming the action of deleting the page from which it was opened, the focus would logically move to a new context.
ボタンを押すとダイアログが閉じる場合、ダイアログのコンテキストで実行された機能が論理的に別の要素につながらない限り、フォーカスは通常、ダイアログを開いたボタンに戻ります。
例えば、ダイアログのキャンセルボタンを押すと、フォーカスはダイアログを開いたボタンに戻ります。
しかし、ダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ダイアログが開かれたページそのものであることが「the」に込められてる感があったので、日本語ではもう少し明示的に訳してもよいかもしれません。

Suggested change
しかし、ダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。
しかし、ダイアログがそのダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。

</li>
<li>If activating the button does not dismiss the current context, then focus typically remains on the button after activation, e.g., an Apply or Recalculate button.</li>
<li>If the button action indicates a context change, such as move to next step in a wizard or add another search criteria, then it is often appropriate to move focus to the starting point for that action.</li>
<li>ボタンを押しても現在のコンテキストがなくならない場合、フォーカスは通常、押した後もボタン上に残ります（例：適用ボタン又は再計算ボタン）。</li>
<li>もしボタンのアクションが、ウィザードで次のステップに進む、または別の検索条件を追加するなどのコンテキスト変更を示している場合、そのアクションの開始点にフォーカスを移動することが適切です。</li>
<li>
If the button is activated with a shortcut key, the focus usually remains in the context from which the shortcut key was activated.
For example, if <kbd>Alt + U</kbd> were assigned to an &quot;Up&quot; button that moves the currently focused item in a list one position higher in the list, pressing <kbd>Alt + U</kbd> when the focus is in the list would not move the focus from the list.
ボタンがショートカットキーで起動された場合、フォーカスは通常、ショートカットキーが起動されたコンテキストに残ります。
例えば、<kbd>Alt + U</kbd> がリストの現在フォーカスのある項目を1つ上の位置に移動させる &quot;Up&quot; ボタンに割り当てられている場合、フォーカスがリストにあるときに <kbd>Alt + U</kbd> を押しても、フォーカスはリストから移動しません。
</li>
</ul>
</li>
</ul>
</section>

<section id="roles_states_properties">
<h2>WAI-ARIA Roles, States, and Properties</h2>
<h2>WAI-ARIAの役割、状態、およびプロパティ</h2>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

この辺はカタカナにしたいです！

Suggested change
<h2>WAI-ARIAの役割、状態、およびプロパティ</h2>
<h2>WAI-ARIA ロール、ステート、及びプロパティ</h2>

<ul>
<li>The button has role of <a class="role-reference" href="#button">button</a>.</li>
<li>ボタンは <a class="role-reference" href="#button">button</a> の役割を持っています。</li>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Suggested change
<li>ボタンは <a class="role-reference" href="#button">button</a> の役割を持っています。</li>
<li>ボタンは <a class="role-reference" href="#button">button</a> のロールを持っています。</li>

<li>
The <code>button</code> has an accessible label.
By default, the accessible name is computed from any text content inside the button element.
However, it can also be provided with <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> or <a href="#aria-label" class="property-reference">aria-label</a>.
<code>button</code> はアクセシブルなラベルを持ちます。
デフォルトでは、アクセシブルな名前はボタン要素内のテキストから計算されます。
しかし、<a href="#aria-labelledby" class="property-reference">aria-labelledby</a> 又は <a href="#aria-label" class="property-reference">aria-label</a> で指定することもできます。
</li>
<li>If a description of the button's function is present, the button element has <a href="#aria-describedby" class="property-reference">aria-describedby</a> set to the ID of the element containing the description.</li>
<li>When the action associated with a button is unavailable, the button has <a class="state-reference" href="#aria-disabled">aria-disabled</a> set to <code>true</code>.</li>
<li>ボタンの機能に関する説明がある場合、ボタン要素の <a href="#aria-describedby" class="property-reference">aria-describedby</a> には、説明を含む要素のIDが設定されます。</li>
<li>ボタンに関連するアクションが利用できない場合、ボタンは <a class="state-reference" href="#aria-disabled">aria-disabled</a> に <code>true</code> が設定されます。</li>
<li>
If the button is a toggle button, it has an <a href="#aria-pressed" class="state-reference">aria-pressed</a> state.
When the button is toggled on, the value of this state is <code>true</code>, and when toggled off, the state is <code>false</code>.
ボタンがトグルボタンの場合、ボタンは <a href="#aria-pressed" class="state-reference">aria-pressed</a> の状態を持ちます。
ボタンがオンに切り替えられると、この状態の値は <code>true</code> になり、オフに切り替えられると、この状態の値は <code>false</code> になります。
Comment on lines +102 to +103
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Suggested change
ボタンがトグルボタンの場合、ボタンは <a href="#aria-pressed" class="state-reference">aria-pressed</a> の状態を持ちます。
ボタンがオンに切り替えられると、この状態の値は <code>true</code> になり、オフに切り替えられると、この状態の値は <code>false</code> になります。
ボタンがトグルボタンの場合、ボタンは <a href="#aria-pressed" class="state-reference">aria-pressed</a> のステートを持ちます。
ボタンがオンに切り替えられると、このステートの値は <code>true</code> になり、オフに切り替えられると、このステートの値は <code>false</code> になります。

</li>
</ul>
</section>
Expand Down
Loading