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

Alert Patternの日本語化 #133

Merged
merged 16 commits into from
May 1, 2024
Merged

Alert Patternの日本語化 #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
b4dd2de
Alert Patternの日本語化
tsmd Aug 26, 2023
baf4fc7
一部の語句（role, state, tabindex）の訳出を統一
tsmd Sep 26, 2023
04cf0cb
ChatGPT の翻訳内容の確認と修正
caztcha Oct 23, 2023
05f1967
Update content/patterns/alert/alert-pattern.html
caztcha Apr 12, 2024
a11c885
Update content/patterns/alert/alert-pattern.html
caztcha Apr 12, 2024
48a056c
Update content/patterns/alert/alert-pattern.html
caztcha Apr 12, 2024
64ebb8f
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
a6cb01c
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
6c35885
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
37cf926
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
0174c54
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
7b98819
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
fd44e67
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
2c3c428
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
a839f16
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 2024
8573668
Update content/patterns/alert/examples/alert.html
caztcha Apr 12, 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
6 changes: 3 additions & 3 deletions content/index/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td><code>alert</code></td>
<td>
<ul>
<li><a href="../patterns/alert/examples/alert.html">Alert</a></li>
<li><a href="../patterns/alert/examples/alert.html">アラートの例</a></li>
<li><a href="../patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
</ul>
</td>
Expand Down Expand Up @@ -466,7 +466,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
</tr>
<tr>
<td><code>aria-atomic</code></td>
<td><a href="../patterns/alert/examples/alert.html">Alert</a></td>
<td><a href="../patterns/alert/examples/alert.html">アラートの例</a></td>
</tr>
<tr>
<td><code>aria-autocomplete</code></td>
Expand Down Expand Up @@ -720,7 +720,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-live</code></td>
<td>
<ul>
<li><a href="../patterns/alert/examples/alert.html">Alert</a></li>
<li><a href="../patterns/alert/examples/alert.html">アラートの例</a></li>
<li><a href="../patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control</a></li>
<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>
<li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
Expand Down
35 changes: 14 additions & 21 deletions content/patterns/alert/alert-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>Alert 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,42 +14,35 @@
</head>
<body>
<main>
<h1>Alert Pattern</h1>
<h1>アラート パターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->

<section id="about">
<h2>About This Pattern</h2>
<h2>このパターンについて</h2>
<p>
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.
Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound.
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.
<a class="role-reference" href="#alert">アラート</a>は、利用者のタスクを中断することなく、利用者の注意を引くように、簡潔で重要なメッセージを表示する要素です。動的にレンダリングされたアラートは、ほとんどのスクリーンリーダーで自動的にアナウンスされ、一部のオペレーティングシステムでは、アラート音が鳴る場合があります。現時点でスクリーンリーダーは、ページの読み込みが完了する前にページ上に存在するアラートを、利用者に通知しないことに注意することが重要です。
</p>
<p>
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.
The <a href="../alertdialog/alertdialog-pattern.html">Alert Dialog Pattern</a> is designed for situations where interrupting work flow is necessary.
アラートは、重要かつ一刻を争うかもしれない情報を、利用者の作業継続を妨げることなく提供することを目的としているため、キーボードフォーカスに影響を与えないようにすることが非常に重要です。<a href="../alertdialog/alertdialog-pattern.html">アラートダイアログ パターン</a>は、ワークフローを中断する必要がある状況のために設計されたものです。
</p>
<p>
It is also important to avoid designing alerts that disappear automatically.
An alert that disappears too quickly can lead to failure to meet
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html">WCAG 2.0 success criterion 2.2.3</a>.
Another critical design consideration is the frequency of interruption caused by alerts.
Frequent interruptions inhibit usability for people with visual and cognitive disabilities, which makes meeting the requirements of
<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">WCAG 2.0 success criterion 2.2.4</a> more difficult.
アラートが自動的に消えるように設計しないことも重要です。あまりにも早く消えるアラートは、<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> の要件を満たすことが難しくなります。
</p>
</section>

<section id="examples">
<h2>Example</h2>
<p><a href="examples/alert.html">Alert Example</a></p>
<h2>例</h2>
<p><a href="examples/alert.html">アラートの例</a></p>
</section>

<section id="keyboard_interaction">
<h2>Keyboard Interaction</h2>
<p>Not applicable.</p>
<h2>キーボードの操作</h2>
<p>該当なし。</p>
</section>

<section id="roles_states_properties">
<h2>WAI-ARIA Roles, States, and Properties</h2>
<p>The widget has a role of <a class="role-reference" href="#alert">alert</a>.</p>
<h2>WAI-ARIA のロール、ステート、及びプロパティ</h2>
<p>ウィジェットは <a class="role-reference" href="#alert">alert</a> ロールを持っています。</p>
</section>
</main>
</body>
Expand Down
79 changes: 39 additions & 40 deletions content/patterns/alert/examples/alert.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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert Example</title>
<title>アラートの例</title>

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

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

<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
<h2 id="ex_label">例</h2>
</div>
<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>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<p>これはテストです。典型的なアラートは、エラー、警告状態、又は利用者のタスクの文脈において重要な情報の着信といったイベントによって、トリガーされます。</p>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_label ex_start_sep" aria-label="の開始"></div>
<div id="ex1">
<button type="button" id="alert-trigger">Trigger Alert</button>
<button type="button" id="alert-trigger">アラートをトリガーする</button>

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

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

<section>
<h2>Accessibility Features</h2>
<h2>アクセシビリティ機能</h2>
<p>
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.
For example, screen readers may interrupt all other speech and preface announcement of the new alert text with a special sound or phrase.
アラートは重要な情報のため、支援技術はアラートのテキストの変更に注意を向けるための特別な動作を提供する場合があります。例えば、スクリーンリーダーは他のすべての読み上げに割り込んで、新しいアラートテキストの前に特別な音又はフレーズでアナウンスする場合があります。
</p>
</section>

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

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
<th scope="col">ロール</th>
<th scope="col">属性</th>
<th scope="col">要素</th>
<th scope="col">使用法</th>
</tr>
</thead>
<tbody>
<tr data-test-id="alert-role">
<th scope="row"><code>alert</code></th>
<td></td>
<td><code>div</code></td>
<td>Identifies the element as the container where alert content will be added or updated.</td>
<td>アラートのコンテンツが追加又は更新されるコンテナとしての要素を識別します。</td>
</tr>
<tr data-test-id="test-not-required">
<td></td>
<th scope="row">
<code>aria-live=<q>assertive</q></code>
</th>
<td>Implicit on <code>div</code></td>
<td><code>div</code> に暗黙的に割り当て</td>
<td>
<ul>
<li>This does not have to be declared in the code because it is implicit in the alert role.</li>
<li>Tells assistive technologies to interrupt other processes to provide users with immediate notification of relevant alert container changes.</li>
<li>これは alert ロールによって暗黙的に割り当てられるため、コードで宣言する必要はありません。</li>
<li>関連するアラートコンテナの変更の即時通知を利用者に提供するために、他のプロセスに割り込むよう支援技術に指示します。</li>
</ul>
</td>
</tr>
Expand All @@ -107,11 +106,11 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<th scope="row">
<code>aria-atomic=<q>true</q></code>
</th>
<td>Implicit on <code>div</code></td>
<td><code>div</code> に暗黙的</td>
<td>
<ul>
<li>This does not have to be declared in the code because it is implicit in the alert role.</li>
<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>
<li>これは alert ロールによって暗黙的に割り当てられるため、コードで宣言する必要はありません。</li>
<li>アラートの要素の内容の一部だけが変更された場合でも、内容の全部をアラートメッセージとして使用するように、支援技術に指示します。</li>
</ul>
</td>
</tr>
Expand All @@ -120,7 +119,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</section>

<section>
<h2>JavaScript and CSS Source Code</h2>
<h2>JavaScript 及び CSS のソースコード</h2>
<ul id="css_js_files">
<li>
CSS:
Expand All @@ -134,18 +133,18 @@ <h2>JavaScript and CSS Source Code</h2>
</section>

<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<h2 id="sc1_label">HTML のソースコード</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_label sc1_start_sep" 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="End of"></div>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_label sc1_end_sep" aria-label="の終了"></div>
<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>

<section id="at-support">
<h2>Assistive Technology Support</h2>
<h2>支援技術のサポート</h2>
<iframe
class="support-levels-alert"
src="https://aria-at.w3.org/embed/reports/alert"
Expand Down