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

Alert and Message Dialog Patternの日本語化 #134

Open
wants to merge 3 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
12 changes: 6 additions & 6 deletions content/index/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td>
<ul>
<li><a href="../patterns/alert/examples/alert.html">Alert</a></li>
<li><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
<li><a href="../patterns/alertdialog/examples/alertdialog.html">アラートダイアログの例</a></li>
</ul>
</td>
</tr>
<tr>
<td><code>alertdialog</code></td>
<td><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></td>
<td><a href="../patterns/alertdialog/examples/alertdialog.html">アラートダイアログの例</a></td>
</tr>
<tr>
<td><code>article</code></td>
Expand Down Expand Up @@ -551,7 +551,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-describedby</code></td>
<td>
<ul>
<li><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
<li><a href="../patterns/alertdialog/examples/alertdialog.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/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
Expand All @@ -564,7 +564,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-disabled</code></td>
<td>
<ul>
<li><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
<li><a href="../patterns/alertdialog/examples/alertdialog.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/toolbar/examples/toolbar.html">Toolbar</a></li>
</ul>
Expand Down Expand Up @@ -665,7 +665,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td>
<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/alertdialog/examples/alertdialog.html">アラートダイアログの例</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/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>
Expand Down Expand Up @@ -732,7 +732,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-modal</code></td>
<td>
<ul>
<li><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
<li><a href="../patterns/alertdialog/examples/alertdialog.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/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
Expand Down
33 changes: 16 additions & 17 deletions content/patterns/alertdialog/alertdialog-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>Alert and Message Dialogs 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,46 +14,45 @@
</head>
<body>
<main>
<h1>Alert and Message Dialogs Pattern</h1>
<h1>アラート及びメッセージダイアログ パターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->

<section id="about">
<h2>About This Pattern</h2>
<h2>このパターンについて</h2>
<p>
An alert dialog is a <a href="../dialog-modal/dialog-modal-pattern.html">modal dialog</a> that interrupts the user's workflow to communicate an important message and acquire a response.
Examples include action confirmation prompts and error message confirmations.
The <a href="#alertdialog" class="role-reference">alertdialog</a> role enables assistive technologies and browsers to distinguish alert dialogs from other dialogs so they have the option of giving alert dialogs special treatment, such as playing a system alert sound.
アラートダイアログは、重要なメッセージを伝えて応答を取得するため、利用者のワークフローを中断する<a href="../dialog-modal/dialog-modal-pattern.html">モーダルダイアログ</a>です。アクションの確認プロンプトやエラーメッセージの確認などが例として挙げられます。<a href="#alertdialog" class="role-reference">alertdialog</a> ロールは、支援技術やブラウザがアラートダイアログを他のダイアログと区別できるようにするためのもので、システムアラート音を再生するなど、アラートダイアログに特別な処理を施すオプションを持っています。
</p>
</section>

<section id="examples">
<h2>Example</h2>
<p><a href="../alertdialog/examples/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</p>
<h2></h2>
<p><a href="../alertdialog/examples/alertdialog.html">アラートダイアログの例</a>:アラートダイアログのデモンストレーションである確認プロンプト。</p>
</section>

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

<section id="roles_states_properties">
<h2>WAI-ARIA Roles, States, and Properties</h2>
<h2>WAI-ARIA のロール、ステート、及びプロパティ</h2>
<ul>
<li>
The element that contains all elements of the dialog, including the alert message and any dialog buttons, has role <a class="role-reference" href="#alertdialog">alertdialog</a>.
アラートメッセージやダイアログボタンといった、ダイアログのすべての要素を包含する要素には、<a class="role-reference" href="#alertdialog">alertdialog</a> ロールがあります。
</li>
<li>
The element with role <code>alertdialog</code> has either:
<code>alertdialog</code> ロールを持つ要素は、以下のいずれかを持っています:
<ul>
<li>
A value for <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> that refers to the element containing the title of the dialog if the dialog has a visible label.
ダイアログに可視ラベルがある場合、ダイアログのタイトルを含む要素を参照する <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> の値。
</li>
<li>
A value for <a href="#aria-label" class="property-reference">aria-label</a> if the dialog does not have a visible label.
ダイアログに可視ラベルがない場合、<a href="#aria-label" class="property-reference">aria-label</a> の値。
</li>
</ul>
</li>
<li>
The element with role <code>alertdialog</code> has a value set for <a href="#aria-describedby" class="property-reference">aria-describedby</a> that refers to the element containing the alert message.
<code>alertdialog</code> ロールを持つ要素には、アラートメッセージを含む要素を参照する <a href="#aria-describedby" class="property-reference">aria-describedby</a> の値が設定されています。
</li>
</ul>
</section>
Expand Down
Loading