Skip to content

Commit be65a9e

Browse files
bakerabakera
authored
Merge pull request #133 from waic/alert-ja
Alert Patternの日本語化
2 parents 684d2e4 + 8573668 commit be65a9e

File tree

3 files changed

+56
-64
lines changed

3 files changed

+56
-64
lines changed

‎content/index/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
3636
<td><code>alert</code></td>
3737
<td>
3838
<ul>
39-
<li><a href="../patterns/alert/examples/alert.html">Alert</a></li>
39+
<li><a href="../patterns/alert/examples/alert.html">アラートの例</a></li>
4040
<li><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
4141
</ul>
4242
</td>
@@ -466,7 +466,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
466466
</tr>
467467
<tr>
468468
<td><code>aria-atomic</code></td>
469-
<td><a href="../patterns/alert/examples/alert.html">Alert</a></td>
469+
<td><a href="../patterns/alert/examples/alert.html">アラートの例</a></td>
470470
</tr>
471471
<tr>
472472
<td><code>aria-autocomplete</code></td>
@@ -720,7 +720,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
720720
<td><code>aria-live</code></td>
721721
<td>
722722
<ul>
723-
<li><a href="../patterns/alert/examples/alert.html">Alert</a></li>
723+
<li><a href="../patterns/alert/examples/alert.html">アラートの例</a></li>
724724
<li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control</a></li>
725725
<li><a href="../patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
726726
<li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>

‎content/patterns/alert/alert-pattern.html‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="ja">
33
<head>
44
<meta charset="UTF-8">
55
<meta content="width=device-width, initial-scale=1.0" name="viewport">
6-
<title>Alert Pattern</title>
6+
<title>アラート パターン</title>
77

88
<!-- Core JS and CSS shared by all patterns -->
99
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -14,42 +14,35 @@
1414
</head>
1515
<body>
1616
<main>
17-
<h1>Alert Pattern</h1>
17+
<h1>アラート パターン</h1>
18+
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
1819

1920
<section id="about">
20-
<h2>About This Pattern</h2>
21+
<h2>このパターンについて</h2>
2122
<p>
22-
An <a class="role-reference" href="#alert">alert</a> is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
23-
Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound.
24-
It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes.
23+
<a class="role-reference" href="#alert">アラート</a>は、利用者のタスクを中断することなく、利用者の注意を引くように、簡潔で重要なメッセージを表示する要素です。動的にレンダリングされたアラートは、ほとんどのスクリーンリーダーで自動的にアナウンスされ、一部のオペレーティングシステムでは、アラート音が鳴る場合があります。現時点でスクリーンリーダーは、ページの読み込みが完了する前にページ上に存在するアラートを、利用者に通知しないことに注意することが重要です。
2524
</p>
2625
<p>
27-
Because alerts are intended to provide important and potentially time-sensitive information without interfering with the user's ability to continue working, it is crucial they do not affect keyboard focus.
28-
The <a href="../alertdialog/alertdialog-pattern.html">Alert Dialog Pattern</a> is designed for situations where interrupting work flow is necessary.
26+
アラートは、重要かつ一刻を争うかもしれない情報を、利用者の作業継続を妨げることなく提供することを目的としているため、キーボードフォーカスに影響を与えないようにすることが非常に重要です。<a href="../alertdialog/alertdialog-pattern.html">アラートダイアログ パターン</a>は、ワークフローを中断する必要がある状況のために設計されたものです。
2927
</p>
3028
<p>
31-
It is also important to avoid designing alerts that disappear automatically.
32-
An alert that disappears too quickly can lead to failure to meet
33-
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html">WCAG 2.0 success criterion 2.2.3</a>.
34-
Another critical design consideration is the frequency of interruption caused by alerts.
35-
Frequent interruptions inhibit usability for people with visual and cognitive disabilities, which makes meeting the requirements of
36-
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">WCAG 2.0 success criterion 2.2.4</a> more difficult.
29+
アラートが自動的に消えるように設計しないことも重要です。あまりにも早く消えるアラートは、<a href="https://waic.jp/translations/WCAG21/Understanding/no-timing.html">WCAG 2.1 達成基準 2.2.3</a> を満たすことができなくなる可能性があります。アラートによる割り込みの頻度も重要な設計上の考慮事項です。頻繁な割り込みは、視覚や認知に障害を持つ人々の利用性を阻害するため、<a href="https://waic.jp/translations/WCAG21/Understanding/interruptions.html">WCAG 2.1 達成基準 2.2.4</a> の要件を満たすことが難しくなります。
3730
</p>
3831
</section>
3932

4033
<section id="examples">
41-
<h2>Example</h2>
42-
<p><a href="examples/alert.html">Alert Example</a></p>
34+
<h2>例</h2>
35+
<p><a href="examples/alert.html">アラートの例</a></p>
4336
</section>
4437

4538
<section id="keyboard_interaction">
46-
<h2>Keyboard Interaction</h2>
47-
<p>Not applicable.</p>
39+
<h2>キーボードの操作</h2>
40+
<p>該当なし。</p>
4841
</section>
4942

5043
<section id="roles_states_properties">
51-
<h2>WAI-ARIA Roles, States, and Properties</h2>
52-
<p>The widget has a role of <a class="role-reference" href="#alert">alert</a>.</p>
44+
<h2>WAI-ARIA のロール、ステート、及びプロパティ</h2>
45+
<p>ウィジェットは <a class="role-reference" href="#alert">alert</a> ロールを持っています。</p>
5346
</section>
5447
</main>
5548
</body>

‎content/patterns/alert/examples/alert.html‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="ja">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Alert Example</title>
6+
<title>アラートの例</title>
77

88
<!-- Core JS and CSS shared by all examples -->
99
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -20,85 +20,84 @@
2020
<body>
2121
<nav aria-label="Related Links" class="feedback">
2222
<ul>
23-
<li><a href="https://github.com/w3c/aria-practices/projects/20">Related Issues</a></li>
24-
<li><a href="../alert-pattern.html">Design Pattern</a></li>
23+
<li><a href="https://github.com/w3c/aria-practices/projects/20">関連するIssues</a></li>
24+
<li><a href="../alert-pattern.html">デザインパターン</a></li>
2525
</ul>
2626
</nav>
2727
<main>
28-
<h1>Alert Example</h1>
28+
<h1>アラートの例</h1>
29+
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->
2930

3031
<section>
31-
<h2>About This Example</h2>
32+
<h2>この例について</h2>
3233
<p>
33-
The below example demonstrates the <a href="../alert-pattern.html">Alert Pattern</a>.
34-
Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
34+
以下の例は、<a href="../alert-pattern.html">アラート パターン</a>のデモンストレーションです。<q>アラートをトリガーする</q>ボタンを動作させると、この例のアラートの要素の中にメッセージが挿入されます。
3535
</p>
36-
<p>Similar examples include:</p>
36+
<p>類似の例には以下があります：</p>
3737
<ul>
38-
<li><a href="../../alertdialog/examples/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</li>
38+
<li><a href="../../alertdialog/examples/alertdialog.html">アラートダイアログの例</a>: アラートダイアログによる確認プロンプトのデモです。</li>
3939
</ul>
4040
</section>
4141

4242
<section>
4343
<div class="example-header">
44-
<h2 id="ex_label">Example</h2>
44+
<h2 id="ex_label">例</h2>
4545
</div>
46-
<p>This is just a test. A typical alert is triggered by an event, such as an error, warning condition, or the arrival of information that is important in the context of the user's task.</p>
47-
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
46+
<p>これはテストです。典型的なアラートは、エラー、警告状態、又は利用者のタスクの文脈において重要な情報の着信といったイベントによって、トリガーされます。</p>
47+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_label ex_start_sep" aria-label="の開始"></div>
4848
<div id="ex1">
49-
<button type="button" id="alert-trigger">Trigger Alert</button>
49+
<button type="button" id="alert-trigger">アラートをトリガーする</button>
5050

5151
<div id="example" role="alert"></div>
5252

53-
<!-- The following script element contains the content that will be inserted into the alert element. -->
53+
<!-- 以下のscript要素には、アラートの要素に挿入される内容が含まれています。 -->
5454
<script type="text/template" id="alert-template">
55-
<p>Hello</p>
55+
<p>こんにちは</p>
5656
</script>
5757
</div>
58-
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
58+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_label ex_end_sep" aria-label="の終了"></div>
5959
</section>
6060

6161
<section>
62-
<h2>Accessibility Features</h2>
62+
<h2>アクセシビリティ機能</h2>
6363
<p>
64-
Because an alert is for critical information, assistive technologies may provide special behaviors designed to help call attention to changes in the text of an alert.
65-
For example, screen readers may interrupt all other speech and preface announcement of the new alert text with a special sound or phrase.
64+
アラートは重要な情報のため、支援技術はアラートのテキストの変更に注意を向けるための特別な動作を提供する場合があります。例えば、スクリーンリーダーは他のすべての読み上げに割り込んで、新しいアラートテキストの前に特別な音又はフレーズでアナウンスする場合があります。
6665
</p>
6766
</section>
6867

6968
<section>
70-
<h2 id="kbd_label">Keyboard Support</h2>
71-
<p>No keyboard interaction needed.</p>
69+
<h2 id="kbd_label">キーボードのサポート</h2>
70+
<p>キーボードによるインタラクションは必要ありません。</p>
7271
</section>
7372

7473
<section>
75-
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
74+
<h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
7675
<table aria-labelledby="rps_label" class="data attributes">
7776
<thead>
7877
<tr>
79-
<th scope="col">Role</th>
80-
<th scope="col">Attribute</th>
81-
<th scope="col">Element</th>
82-
<th scope="col">Usage</th>
78+
<th scope="col">ロール</th>
79+
<th scope="col">属性</th>
80+
<th scope="col">要素</th>
81+
<th scope="col">使用法</th>
8382
</tr>
8483
</thead>
8584
<tbody>
8685
<tr data-test-id="alert-role">
8786
<th scope="row"><code>alert</code></th>
8887
<td></td>
8988
<td><code>div</code></td>
90-
<td>Identifies the element as the container where alert content will be added or updated.</td>
89+
<td>アラートのコンテンツが追加又は更新されるコンテナとしての要素を識別します。</td>
9190
</tr>
9291
<tr data-test-id="test-not-required">
9392
<td></td>
9493
<th scope="row">
9594
<code>aria-live=<q>assertive</q></code>
9695
</th>
97-
<td>Implicit on <code>div</code></td>
96+
<td><code>div</code> に暗黙的に割り当て</td>
9897
<td>
9998
<ul>
100-
<li>This does not have to be declared in the code because it is implicit in the alert role.</li>
101-
<li>Tells assistive technologies to interrupt other processes to provide users with immediate notification of relevant alert container changes.</li>
99+
<li>これは alert ロールによって暗黙的に割り当てられるため、コードで宣言する必要はありません。</li>
100+
<li>関連するアラートコンテナの変更の即時通知を利用者に提供するために、他のプロセスに割り込むよう支援技術に指示します。</li>
102101
</ul>
103102
</td>
104103
</tr>
@@ -107,11 +106,11 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
107106
<th scope="row">
108107
<code>aria-atomic=<q>true</q></code>
109108
</th>
110-
<td>Implicit on <code>div</code></td>
109+
<td><code>div</code> に暗黙的</td>
111110
<td>
112111
<ul>
113-
<li>This does not have to be declared in the code because it is implicit in the alert role.</li>
114-
<li>Tells assistive technologies to use the entire content of the alert element as the alert message even if only a portion of it has changed.</li>
112+
<li>これは alert ロールによって暗黙的に割り当てられるため、コードで宣言する必要はありません。</li>
113+
<li>アラートの要素の内容の一部だけが変更された場合でも、内容の全部をアラートメッセージとして使用するように、支援技術に指示します。</li>
115114
</ul>
116115
</td>
117116
</tr>
@@ -120,7 +119,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
120119
</section>
121120

122121
<section>
123-
<h2>JavaScript and CSS Source Code</h2>
122+
<h2>JavaScript 及び CSS のソースコード</h2>
124123
<ul id="css_js_files">
125124
<li>
126125
CSS:
@@ -134,18 +133,18 @@ <h2>JavaScript and CSS Source Code</h2>
134133
</section>
135134

136135
<section>
137-
<h2 id="sc1_label">HTML Source Code</h2>
138-
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
136+
<h2 id="sc1_label">HTML のソースコード</h2>
137+
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_label sc1_start_sep" aria-label="の開始"></div>
139138
<pre><code id="sc1"></code></pre>
140-
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
139+
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_label sc1_end_sep" aria-label="の終了"></div>
141140
<script>
142141
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
143142
sourceCode.make();
144143
</script>
145144
</section>
146-
145+
147146
<section id="at-support">
148-
<h2>Assistive Technology Support</h2>
147+
<h2>支援技術のサポート</h2>
149148
<iframe
150149
class="support-levels-alert"
151150
src="https://aria-at.w3.org/embed/reports/alert"

0 commit comments

Comments
 (0)