Skip to content

Commit

Permalink
ChatGPT の翻訳内容の確認と修正
Browse files Browse the repository at this point in the history
  • Loading branch information
@caztcha
caztcha committed Oct 16, 2023
1 parent 2bc97be commit d7c0105
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 45 deletions.
24 changes: 11 additions & 13 deletions content/patterns/alertdialog/alertdialog-pattern.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>アラートとメッセージダイアログ パターン</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,47 +14,45 @@
</head>
<body>
<main>
<h1>アラートとメッセージダイアログ パターン</h1>
<h1>アラート及びメッセージダイアログ パターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->

<section id="about">
<h2>このパターンについて</h2>
<p>
アラートダイアログは、重要なメッセージを伝え、応答を取得するためにユーザーのワークフローを中断する<a href="../dialog-modal/dialog-modal-pattern.html">モーダルダイアログ</a>です。
アクションの確認プロンプトやエラーメッセージの確認などが例として挙げられます。
<a href="#alertdialog" class="role-reference">alertdialog</a>ロールは、支援技術やブラウザがアラートダイアログを他のダイアログと区別できるようにするためのもので、システムアラート音を再生するなど、アラートダイアログに特別な処理を施すオプションを持っています。
アラートダイアログは、重要なメッセージを伝えて応答を取得するため、利用者のワークフローを中断する<a href="../dialog-modal/dialog-modal-pattern.html">モーダルダイアログ</a>です。アクションの確認プロンプトやエラーメッセージの確認などが例として挙げられます。<a href="#alertdialog" class="role-reference">alertdialog</a> ロールは、支援技術やブラウザがアラートダイアログを他のダイアログと区別できるようにするためのもので、システムアラート音を再生するなど、アラートダイアログに特別な処理を施すオプションを持っています。
</p>
</section>

<section id="examples">
<h2>例</h2>
<p><a href="../alertdialog/examples/alertdialog.html">アラートダイアログの例</a>：アラートダイアログを示す確認プロンプト。</p>
<p><a href="../alertdialog/examples/alertdialog.html">アラートダイアログの例</a>：アラートダイアログのデモンストレーションである確認プロンプト。</p>
</section>

<section id="keyboard_interaction">
<h2>キーボードの操作</h2>
<p><a href="../dialog-modal/dialog-modal-pattern.html">モーダルダイアログのパターン</a>のキーボード操作セクションを参照してください。</p>
<p><a href="../dialog-modal/dialog-modal-pattern.html">モーダルダイアログのパターン</a>のキーボード操作のセクションを参照してください。</p>
</section>

<section id="roles_states_properties">
<h2>WAI-ARIAのロール、ステート、およびプロパティ</h2>
<h2>WAI-ARIA のロール、ステート、及びプロパティ</h2>
<ul>
<li>
ダイアログのすべての要素、アラートメッセージやダイアログボタンを含む要素を含む要素には、<a class="role-reference" href="#alertdialog">alertdialog</a>ロールがあります。
アラートメッセージやダイアログボタンといった、ダイアログのすべての要素を包含する要素には、<a class="role-reference" href="#alertdialog">alertdialog</a> ロールがあります。
</li>
<li>
<code>alertdialog</code>ロールを持つ要素は、以下のいずれかを持っています：
<code>alertdialog</code> ロールを持つ要素は、以下のいずれかを持っています：
<ul>
<li>
ダイアログに可視ラベルがある場合、ダイアログのタイトルを含む要素を参照する<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>の値。
ダイアログに可視ラベルがある場合、ダイアログのタイトルを含む要素を参照する <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> の値。
</li>
<li>
ダイアログに可視ラベルがない場合、<a href="#aria-label" class="property-reference">aria-label</a>の値。
ダイアログに可視ラベルがない場合、<a href="#aria-label" class="property-reference">aria-label</a> の値。
</li>
</ul>
</li>
<li>
<code>alertdialog</code>ロールを持つ要素には、アラートメッセージを含む要素を参照する<a href="#aria-describedby" class="property-reference">aria-describedby</a>の値が設定されています。
<code>alertdialog</code> ロールを持つ要素には、アラートメッセージを含む要素を参照する <a href="#aria-describedby" class="property-reference">aria-describedby</a> の値が設定されています。
</li>
</ul>
</section>
Expand Down
60 changes: 28 additions & 32 deletions content/patterns/alertdialog/examples/alertdialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,31 @@ <h1>アラートダイアログの例</h1>
<section>
<h2>この例について</h2>
<p>
下の確認プロンプトの例は、<a href="../alertdialog-pattern.html">アラートダイアログのパターン</a>を示しています。
また、2つのパターンによって提供される経験を簡単に比較するための<a href="../../alert/alert-pattern.html">アラートのパターン</a>の例も含まれています。
以下にある確認プロンプトの例は、<a href="../alertdialog-pattern.html">アラートダイアログのパターン</a>のデモンストレーションです。また、<a href="../../alert/alert-pattern.html">アラートのパターン</a>の例も含まれており、2 つのパターンによって提供されるユーザー体験を簡単に比較することができます。
</p>
<p>この例の使用方法：</p>
<ul>
<li>
"discard"ボタンを作動すると、<code>alertdialog</code>ロールを持つ確認ダイアログがトリガーされます。
「破棄」ボタンを作動すると、<code>alertdialog</code> ロールを持つ確認ダイアログがトリガーされます。
<ul>
<li>確認ダイアログの"yes"ボタンを作動すると、"Notes"テキストエリアの内容とノートのローカルストレージの両方が削除されます。</li>
<li data-test-id="save-button">"no"ボタンを作動するか、<kbd>escape</kbd>を押すと、ダイアログが閉じます。</li>
<li>ノートのテキストエリアにテキストが含まれていない場合、"discard"ボタンは無効になります。</li>
<li>確認ダイアログの「はい」ボタンを作動すると、「ノート」のテキストエリアの内容及びノートのローカルストレージの両方が削除されます。</li>
<li data-test-id="save-button">「いいえ」ボタンを作動するか、<kbd>escape</kbd> キーを押すと、ダイアログが閉じます。</li>
<li>ノートのテキストエリアにテキストが含まれていない場合、「破棄」ボタンは無効になります。</li>
</ul>
</li>
<li>
"Notes"テキストエリアの内容が<a href="https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute">ローカルストレージ</a>に保存されるときにアラートをトリガーするために"save"ボタンを作動します。
「保存」ボタンを作動すると、「ノート」のテキストエリアの内容が<a href="https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute">ローカルストレージ</a>に保存されると同時にアラートがトリガーされます。
<ul>
<li>成功した保存は、ノートが保存されたことをユーザーに通知する短いアラートをトリガーします。</li>
<li>ユーザーのローカルストレージの値が"Notes"フィールドと同じ場合、"save"ボタンは無効になります。</li>
<li>保存が成功することで、ノートが保存されたことを利用者に通知する短いアラートをトリガーします。</li>
<li>利用者のローカルストレージの値が「ノート」フィールドと同じ場合、「保存」ボタンは無効になります。</li>
</ul>
</li>
<li>必要に応じて"notes"テキストエリアを変更して、discardとsaveの機能を有効/無効にします。</li>
<li>必要に応じて「ノート」のテキストエリアを変更して、破棄及び保存の機能を有効、無効にします。</li>
</ul>
<p>類似の例には以下があります：</p>
<ul>
<li><a href="../../alert/examples/alert.html">アラート</a>：基本的なアラート。</li>
<li><a href="../../dialog-modal/examples/dialog.html">モーダルダイアログの例</a>：少ない量と多い量のコンテンツの両方を持つモーダルダイアログの複数のレイヤーを示す例。</li>
<li><a href="../../dialog-modal/examples/dialog.html">モーダルダイアログの例</a>：コンテンツの量が少ないものと多いもの、両方のモーダルダイアログを複数のレイヤーで示す例です。</li>
<li><a href="../../dialog-modal/examples/datepicker-dialog.html">日付選択ダイアログの例</a>：日付を選択するためのカレンダーグリッドを含むダイアログを示します。</li>
</ul>
</section>
Expand All @@ -69,7 +68,7 @@ <h2 id="ex_label">例</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_label ex_start_sep" aria-label="の開始"></div>
<div id="ex_alertdialog">
<label for="notes">ノート</label>
<textarea class="notes" name="notes" id="notes" rows="7">これは例のテキストボックスで、予想通りテキストが含まれています。ユーザーはこのテキストを保存するオプションを持っています - これは基本的なアラートをトリガーします - またはテキストを破棄するオプションを持っています - これはユーザーに確認を求めるアラートダイアログをトリガーします。</textarea>
<textarea class="notes" name="notes" id="notes" rows="7">これはテキストボックスの例で、その通りテキストが含まれています。利用者はこのテキストを保存するオプションを持っており、これは基本的なアラートをトリガーします。またはテキストを破棄するオプションを持っており、これは利用者に確認を求めるアラートダイアログをトリガーします。</textarea>
<div class="visually-hidden" id="notes_save_status" role="alert"></div>
<button type="button" id="notes_save">
保存
Expand Down Expand Up @@ -100,15 +99,13 @@ <h2 id="dialog_label" class="dialog_label">確認</h2>
<section>
<h2>アクセシビリティの特徴</h2>
<ul>
<li>アラートダイアログのアクセシブルな名前は、その見出し（"確認"）に設定されています。</li>
<li>ダイアログのプロンプト（"本当に...?"）は、<code>aria-describedby</code>を使用して参照されているため、ユーザーはプロンプトをすぐに認識できます。</li>
<li>アラートダイアログのアクセシブルな名前は、その見出し (「確認」) に設定されています。</li>
<li>ダイアログのプロンプト (「すべてのノートを破棄してもよろしいですか？」) は、<code>aria-describedby</code> を使用して参照されているため、利用者はプロンプトをすぐに認識できます。</li>
<li>
フォーカスは、ダイアログ内の最初のフォーカス可能な要素、つまり"No" <code>button</code>に自動的に設定されます。
これは最も破壊的でないアクションですので、"No"にフォーカスを合わせることで、ユーザーが破壊的な"Discard"アクションを誤って確認するのを防ぐのに役立ちます。
</li>
フォーカスは、ダイアログ内の最初のフォーカス可能な要素、つまり「いいえ」の <code>button</code> に自動的に設定されます。これは最も破壊的でないアクションであり、「いいえ」にフォーカスが当たることで、破壊的でやり直しができない「破棄」のアクションを、利用者が誤って確定してしまうのを防ぐのに役立ちます。
</li>
<li>
ボタンが無効の場合、HTMLの<code>disabled</code>属性の代わりに<code>aria-disabled</code>が使用されるため、ボタンはページの<kbd>Tab</kbd>シーケンスに残ります。
これにより、スクリーンリーダーのユーザーがボタンを発見し、インターフェースの動作を判断するのが容易になります。
ボタンが無効の場合、HTML の <code>disabled</code> 属性の代わりに <code>aria-disabled</code> が使用されるため、ボタンはページの <kbd>Tab</kbd> シーケンスに残ります。これにより、スクリーンリーダーの利用者がボタンを発見し、インターフェースの動作を判断するのが容易になります。
</li>
</ul>
</section>
Expand Down Expand Up @@ -147,18 +144,18 @@ <h2 id="kbd_label">キーボードのサポート</h2>
</tr>
<tr>
<th><kbd>Command + S</kbd></th>
<td>(Macのみ) フォーカスがあるときにノートの<code>textarea</code>の内容を保存します。</td>
<td>(Mac のみ) フォーカスがあるときにノートの <code>textarea</code> の内容を保存します。</td>
</tr>
<tr data-test-id="key-control-s">
<th><kbd>Control + S</kbd></th>
<td>(Windowsのみ) フォーカスがあるときにノートの<code>textarea</code>の内容を保存します。</td>
<td>(Windows のみ) フォーカスがあるときにノートの <code>textarea</code> の内容を保存します。</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">ロール、プロパティ、ステート、およびtabindex属性</h2>
<h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
Expand Down Expand Up @@ -203,37 +200,36 @@ <h2 id="rps_label">ロール、プロパティ、ステート、およびtabinde
<td></td>
<th scope="row"><code>aria-disabled="true"</code></th>
<td><code>button</code></td>
<td>ボタンが活性化できないことを支援技術のユーザーに伝えます。</td>
<td>ボタンが作動できないことを支援技術の利用者に伝えます。</td>
</tr>
</tbody>
</table>
<h3><code>aria-modal</code>と<code>aria-hidden</code>に関する注意</h3>
<h3><code>aria-modal</code> 及び <code>aria-hidden</code> に関する注意</h3>
<ul>
<li>
<code>aria-modal</code>プロパティはARIA 1.1で導入されました。
比較的新しいプロパティであるため、スクリーンリーダーのユーザーはそれに対するサポートの度合いが異なる場合があります。
<code>aria-modal</code> プロパティは ARIA 1.1 で導入されました。比較的新しいプロパティであるため、スクリーンリーダーの利用者はそれに対する異なるサポート度合いを体験するかもしれません。
</li>
<li><code>aria-modal</code>プロパティを<code>dialog</code>要素に適用することで、ダイアログの背景に<code>aria-hidden</code>を使用してコンテンツが非アクティブであることを支援技術に伝える技術を置き換えます。</li>
<li><code>aria-modal</code> プロパティを <code>dialog</code> 要素に適用することで、ダイアログの背景に <code>aria-hidden</code> を使用してコンテンツが非アクティブであることを支援技術に伝えるテクニックを、置き換えます。</li>
<li>
<code>aria-hidden</code>を使用してダイアログの外のコンテンツを支援技術のユーザーに対して非アクティブにするレガシーダイアログの実装では、以下が重要です：
<code>aria-hidden</code> を使用してダイアログの外のコンテンツを支援技術の利用者に対して非アクティブにするレガシーなダイアログの実装では、以下が重要です：
<ul>
<li>非アクティブなレイヤーの一部を含む各要素に<code>aria-hidden</code>が<code>true</code>に設定されていること。</li>
<li>ダイアログ要素が<code>aria-hidden</code>が<code>true</code>に設定されている要素の子孫でないこと。</li>
<li>非アクティブなレイヤーの各部分を含む要素で、<code>aria-hidden</code> が <code>true</code> に設定されていること。</li>
<li>ダイアログ要素は、<code>aria-hidden</code> が <code>true</code> に設定されている要素の子孫でないこと。</li>
</ul>
</li>
</ul>
</section>

<section>
<h2 id="src_label">JavascriptとCSSのソースコード</h2>
<h2 id="src_label">Javascript 及び CSS のソースコード</h2>
<ul id="css_js_files">
<li>CSS: <a href="css/alertdialog.css" type="text/css">alertdialog.css</a></li>
<li>Javascript: <a href="js/alertdialog.js" type="text/javascript">alertdialog.js</a>, <a href="../../../shared/js/utils.js">utils.js</a></li>
</ul>
</section>

<section>
<h2 id="sc1_label">HTMLのソースコード</h2>
<h2 id="sc1_label">HTML のソースコード</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" 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="の終了"></div>
Expand Down

0 comments on commit d7c0105

Please sign in to comment.