ボタン パターンの日本語化 #130
Open
ボタン パターンの日本語化 #130
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for waic-apg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
調整しました。
|
ChatGPT による翻訳内容を確認し、修正を加えました。 9c6b55d 主な修正点は以下のとおりです。 WCAG の訳出ガイドラインに準じて、用語や表記を修正。 |
調整しました。
|
サンプルページを調整しました。 ボタンの例 |
|
もう一つのサンプルページを調整しました。 ボタンの例（IDLバージョン） |
tsmd
commented
May 20, 2024
| <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 "…" (ellipsis) to the button label, e.g., "Save as…". | ||
| <a class="role-reference" href="#button">ボタン</a> は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などの利用者のアクションやイベントのトリガを可能にするウィジェットです。 |
There was a problem hiding this comment.
「performing a delete operation」の「performing」が抜けてるかもしれないです。
また「利用者のアクション」とするよりは、「アクションやイベントを利用者がトリガーできるようにする」といったニュアンスが近いのかなと。
Suggested change
| <a class="role-reference" href="#button">ボタン</a> は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などの利用者のアクションやイベントのトリガを可能にするウィジェットです。 | |
| <a class="role-reference" href="#button">ボタン</a> は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作の実行などのアクションやイベントを利用者がトリガーできるようにするウィジェットです。 |
| ボタンがトグルボタンであることを支援技術に伝えるには、<a href="#aria-pressed" class="state-reference">aria-pressed</a> 属性に値を指定します。 | ||
| 例えば、オーディオプレーヤーのミュートというラベルのボタンは、押された状態を true に設定することで、音がミュートされていることを示すことができます。 | ||
| <strong>重要：</strong>トグルボタンのラベルは、その状態が変化しても変化しないことが重要です。 | ||
| この例では、押された状態が true のとき、ラベルは "ミュート" のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています" のように言うでしょう。 |
There was a problem hiding this comment.
スクリーンリーダーは「言う」より「読み上げる」の方が一般的な表現な気がしました。
Suggested change
| この例では、押された状態が true のとき、ラベルは "ミュート" のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています" のように言うでしょう。 | |
| この例では、押された状態が true のとき、ラベルは "ミュート" のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています" のように読み上げるでしょう。 |
Comment on lines
+42
to
+45
| ウィジェットの外観及び役割は、それが提供する機能と一致することが重要です。 | ||
| それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。 | ||
| このような場合、要素に <code>button</code> の役割を与えることは、支援技術利用者が要素の機能を理解するのに役立ちます。 | ||
| しかし、より良い解決策は、機能と ARIA の役割が一致するように視覚デザインを調整することです。 |
There was a problem hiding this comment.
ARIAの文脈で「role」を使う時は「役割」ではなく「ロール」としておきたいです。
Suggested change
| ウィジェットの外観及び役割は、それが提供する機能と一致することが重要です。 | |
| それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。 | |
| このような場合、要素に <code>button</code> の役割を与えることは、支援技術利用者が要素の機能を理解するのに役立ちます。 | |
| しかし、より良い解決策は、機能と ARIA の役割が一致するように視覚デザインを調整することです。 | |
| ウィジェットの外観及びロールは、それが提供する機能と一致することが重要です。 | |
| それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。 | |
| このような場合、要素に <code>button</code> ロールを与えることは、支援技術利用者が要素の機能を理解するのに役立ちます。 | |
| しかし、より良い解決策は、機能と ARIA ロールが一致するように視覚デザインを調整することです。 |
| 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. | ||
| ボタンを押すとダイアログが閉じる場合、ダイアログのコンテキストで実行された機能が論理的に別の要素につながらない限り、フォーカスは通常、ダイアログを開いたボタンに戻ります。 | ||
| 例えば、ダイアログのキャンセルボタンを押すと、フォーカスはダイアログを開いたボタンに戻ります。 | ||
| しかし、ダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。 |
There was a problem hiding this comment.
ダイアログが開かれたページそのものであることが「the」に込められてる感があったので、日本語ではもう少し明示的に訳してもよいかもしれません。
Suggested change
| しかし、ダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。 | |
| しかし、ダイアログがそのダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。 |
| </li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section id="roles_states_properties"> | ||
| <h2>WAI-ARIA Roles, States, and Properties</h2> | ||
| <h2>WAI-ARIAの役割、状態、およびプロパティ</h2> |
There was a problem hiding this comment.
この辺はカタカナにしたいです！
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> |
There was a problem hiding this comment.
Suggested change
| <li>ボタンは <a class="role-reference" href="#button">button</a> の役割を持っています。</li> | |
| <li>ボタンは <a class="role-reference" href="#button">button</a> のロールを持っています。</li> |
Comment on lines
+102
to
+103
| ボタンがトグルボタンの場合、ボタンは <a href="#aria-pressed" class="state-reference">aria-pressed</a> の状態を持ちます。 | ||
| ボタンがオンに切り替えられると、この状態の値は <code>true</code> になり、オフに切り替えられると、この状態の値は <code>false</code> になります。 |
There was a problem hiding this comment.
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> になります。 |
tsmd
commented
May 20, 2024
| <p>The following command and toggle button examples demonstrate the <a href="../button-pattern.html">Button Pattern</a>.</p> | ||
| <p>Similar examples include:</p> | ||
| <h2>この例について</h2> | ||
| <p>以下のコマンドとトグルボタンの例は、<a href="../button-pattern.html">ボタンパターン</a> のデモンストレーションです。</p> |
There was a problem hiding this comment.
Suggested change
| <p>以下のコマンドとトグルボタンの例は、<a href="../button-pattern.html">ボタンパターン</a> のデモンストレーションです。</p> | |
| <p>以下のコマンド及びトグルボタンの例は、<a href="../button-pattern.html">ボタンパターン</a> のデモンストレーションです。</p> |
Comment on lines
+130
to
+131
| <li>要素を <code>button</code> ウィジェットとして識別します。</li> | ||
| <li>ボタンのアクセシブルな名前は、要素のテキストコンテンツによって定義されます。</li> |
There was a problem hiding this comment.
このセクションはリストで、言い切りの形にするとより馴染むかなと思います！
Suggested change
| <li>要素を <code>button</code> ウィジェットとして識別します。</li> | |
| <li>ボタンのアクセシブルな名前は、要素のテキストコンテンツによって定義されます。</li> | |
| <li>要素を <code>button</code> ウィジェットとして識別する。</li> | |
| <li>ボタンのアクセシブルな名前は、要素のテキストコンテンツによって定義される。</li> |
Comment on lines
+143
to
+144
| <li>要素をタブの順序に含めます。</li> | ||
| <li><code>href</code> 属性を持っていない <code>a</code> 要素に必要です。</li> |
There was a problem hiding this comment.
こちらも言い切りの形に。
2つめのliは、bacause が訳出されていなかったので「ため」を足しました。
Suggested change
| <li>要素をタブの順序に含めます。</li> | |
| <li><code>href</code> 属性を持っていない <code>a</code> 要素に必要です。</li> | |
| <li>要素をタブ順序に含める。</li> | |
| <li><code>href</code> 属性を持たないため <code>a</code> 要素に必要。</li> |
Comment on lines
+154
to
+155
| <li>ボタンをトグルボタンとして識別します。</li> | ||
| <li>トグルボタンが押されていないことを示します。</li> |
There was a problem hiding this comment.
Suggested change
| <li>ボタンをトグルボタンとして識別します。</li> | |
| <li>トグルボタンが押されていないことを示します。</li> | |
| <li>ボタンをトグルボタンとして識別する。</li> | |
| <li>トグルボタンが押されていないことを示す。</li> |
Comment on lines
+165
to
+166
| <li>ボタンをトグルボタンとして識別します。</li> | ||
| <li>トグルボタンが押されていることを示します。</li> |
There was a problem hiding this comment.
Suggested change
| <li>ボタンをトグルボタンとして識別します。</li> | |
| <li>トグルボタンが押されていることを示します。</li> | |
| <li>ボタンをトグルボタンとして識別する。</li> | |
| <li>トグルボタンが押されていることを示す。</li> |
Comment on lines
+146
to
+147
| <li>要素をタブの順序に含めます。</li> | ||
| <li><code>href</code> 属性を持たない <code>a</code> 要素に必要です。</li> |
There was a problem hiding this comment.
Suggested change
| <li>要素をタブの順序に含めます。</li> | |
| <li><code>href</code> 属性を持たない <code>a</code> 要素に必要です。</li> | |
| <li>要素をタブ順序に含める。</li> | |
| <li><code>href</code> 属性を持たないため <code>a</code> 要素に必要。</li> |
Comment on lines
+157
to
+159
| <li>JavaScript で <code>button.ariaPressed = 'false';</code> と設定します。</li> | ||
| <li>この設定は、ボタンをトグルボタンとして識別します。</li> | ||
| <li>トグルボタンが押されていないことを示します。</li> |
There was a problem hiding this comment.
言い切りの形にしつつ、
ひとつめのliの「Set」は過去分詞系だとおもいました。
ふたつめのliは、「この設定は」という謎の節が生み出されていたのでトリました。
Suggested change
| <li>JavaScript で <code>button.ariaPressed = 'false';</code> と設定します。</li> | |
| <li>この設定は、ボタンをトグルボタンとして識別します。</li> | |
| <li>トグルボタンが押されていないことを示します。</li> | |
| <li>JavaScript にて <code>button.ariaPressed = 'false';</code> によって設定される。</li> | |
| <li>ボタンをトグルボタンとして識別する。</li> | |
| <li>トグルボタンが押されていないことを示す。</li> |
Comment on lines
+169
to
+171
| <li>JavaScript で<code>button.ariaPressed = 'true';</code> と設定します。</li> | ||
| <li>この設定は、ボタンをトグルボタンとして識別します。</li> | ||
| <li>トグルボタンが押されていることを示します。</li> |
There was a problem hiding this comment.
同上です
Suggested change
| <li>JavaScript で<code>button.ariaPressed = 'true';</code> と設定します。</li> | |
| <li>この設定は、ボタンをトグルボタンとして識別します。</li> | |
| <li>トグルボタンが押されていることを示します。</li> | |
| <li>JavaScript にて <code>button.ariaPressed = 'true';</code> によって設定される。</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> |
There was a problem hiding this comment.
Suggested change
| <td>ボタンのアクセシブルな名前の計算から SVG を除外します。</td> | |
| <td>ボタンのアクセシブルな名前の計算から SVG を除外する。</td> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
close #87
ボタン パターン
https://deploy-preview-130--waic-apg.netlify.app/patterns/button/button-pattern
ボタンの例
https://deploy-preview-130--waic-apg.netlify.app/patterns/button/examples/button
ボタンの例（IDLバージョン）
https://deploy-preview-130--waic-apg.netlify.app/patterns/button/examples/button_idl