Skip to content

SCR14 の翻訳 #2127

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

Open
caztcha wants to merge 3 commits into
base: main
Choose a base branch
from
Open

SCR14 の翻訳 #2127

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
44a03d0
SCR14 の翻訳
caztcha Jun 13, 2026
f143db7
Procedure の翻訳漏れ修正
caztcha Jun 13, 2026
1c245ab
Apply suggestion from @caztcha
caztcha Jun 16, 2026
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
95 changes: 47 additions & 48 deletions techniques/client-side-script/SCR14.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<!DOCTYPE html><html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8">
<title>SCR14: Using scripts to make nonessential alerts optional | WAI | W3C</title>
<title>SCR14: 不可欠ではないアラートの表示を任意にするために、スクリプトを使用する | WAI | W3C</title>



Expand All @@ -11,21 +11,19 @@



<!-- 日本語訳されるまでの一時的なスクリプト -->
<script src="../untranslated-note.js"></script>
</head>
<body dir="ltr">

<a href="#main" class="button button--skip-link">Skip to content</a>
<div class="minimal-header-container default-grid">
<header class="minimal-header" id="site-header">
<div class="minimal-header-name">
<a href="https://w3c.github.io/wcag/techniques/">WCAG 2.2 Techniques</a>
<a href="https://waic.jp/translations/WCAG22/Techniques/">WCAG 2.2 テクニック集</a>
</div>

<div class="minimal-header-subtitle">Examples of ways to meet WCAG; not required</div>

<a class="minimal-header-link" href="https://w3c.github.io/wcag/techniques/about">About WCAG Techniques</a>
<a class="minimal-header-link" href="https://waic.jp/translations/WCAG22/Techniques/about">WCAG テクニック集について</a>
<div class="minimal-header-logo">
<a href="http://w3.org/" aria-label="W3C">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44">
Expand Down Expand Up @@ -54,54 +52,52 @@

<div class="default-grid with-gap leftcol">
<aside class="box nav-hack sidebar standalone-resource__sidebar">
<header class="box-h">Page Contents</header>
<header class="box-h">このページの内容</header>
<div class="box-i">
<nav aria-label="page contents" class="navtoc">
<ul><li><a href="#technique">About this Technique</a></li>
<li><a href="#description">Description</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#tests">Tests</a></li>
<ul><li><a href="#technique">このテクニックについて</a></li>
<li><a href="#description">解説</a></li>
<li><a href="#examples">事例</a></li>
<li><a href="#tests">検証</a></li>
</ul>
</nav>
</div>
</aside>

<main id="main" class="standalone-resource__main">
<!-- 日本語訳されるまでの一時的な注記 -->
<div class="untranslated-note"><p>このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。<br>[ <a href="https://waic.jp/translations/WCAG21/Techniques/">WCAG 2.1 達成方法集</a> ]</p></div>

<h1><span>Technique SCR14:</span>Using scripts to make nonessential alerts optional</h1>
<h1><span>テクニック SCR14:</span>不可欠ではないアラートの表示を任意にするために、スクリプトを使用する</h1>




<section id="technique" class="box">
<h2 class="box-h box-h-icon">About this Technique</h2>
<h2 class="box-h box-h-icon">このテクニックについて</h2>
<div class="box-i">



<p>This technique relates to:</p>
<p>このテクニックは、次に関連する:</p>
<ul>

<li>

<a href="https://w3c.github.io/wcag/understanding/interruptions">2.2.4: Interruptions</a>
(<strong>Sufficient</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/interruptions">2.2.4: 割込み</a>
(<strong>十分なテクニック</strong>)
</li>

<li>

<a href="https://w3c.github.io/wcag/understanding/status-messages">4.1.3: Status Messages</a>
(<strong>Advisory</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/status-messages">4.1.3: ステータスメッセージ</a>
(<strong>参考テクニック</strong>)
</li>

</ul>




<p>This technique applies to scripting technologies which use scripting alerts for non-emergency communication.</p>
<p>このテクニックは、緊急ではない情報提供のアラートにスクリプトを使用するウェブコンテンツ技術に適用される。</p>

</div>
</section>
Expand All @@ -111,17 +107,17 @@ <h2 class="box-h box-h-icon">About this Technique</h2>


<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to toggle announcements to screen readers of changes in a stock-price alert component. By default, when the stock price changes, the change is announced by screen readers. This could be annoying to some users, so there are buttons to allow users to toggle the announcements on or off.</p>
<p>This technique uses the <code class="language-html">aria-live</code> property to turn the stock component into a live region and the <code class="language-html">aria-atomic</code> property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the <code class="language-html">aria-live</code> property is set to <code class="language-html">assertive</code>; if announcements are turned off, the <code class="language-html">aria-live</code> property is set to <code class="language-html">off</code>. The two buttons used to control the announcements use the <code class="language-html">aria-pressed</code> property, updated to either <code class="language-html">true</code> or <code class="language-html">false</code>, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.</p>
<h2>解説</h2>
<p>このテクニックの目的は、株価アラートコンポーネントにおける変更を、通知するかどうかを切り替えることである。デフォルトでは、株価が変動すると、スクリーンリーダーによって変更が通知される。これは一部の利用者にとって煩わしい場合があるため、利用者が通知のオン又はオフを切り替えられるボタンが用意されている。</p>
<p>このテクニックでは、<code class="language-html">aria-live</code> プロパティを用いて株価コンポーネントをライブリージョンにして、<code class="language-html">aria-atomic</code> プロパティを用いて、株価が更新された際に更新された部分だけでなくコンポーネントのコンテンツ全体を読み上げるようスクリーンリーダーに指示する。このデモでは、株価は 10 秒ごとに更新される。通知がオンの場合、<code class="language-html">aria-live</code> プロパティは <code class="language-html">assertive</code> に設定され、オフの場合は <code class="language-html">off</code> に設定される。通知の制御に使用される二つのボタンは、<code class="language-html">aria-pressed</code> プロパティ (<code class="language-html">true</code> 又は <code class="language-html">false</code> に更新される) を用いて、どのボタンが押されているかをスクリーンリーダーの利用者に伝え、それによってスクリーンリーダーが株価の更新を読み上げるかどうかが決まる。実際には、ページに複数回の訪問があっても設定が維持されるよう、コンテンツ制作者は利用者のプリファレンスを保存するためのクッキー (又は同等のもの) の設定を検討すべきである。</p>
</section>
<section id="examples">
<h2>Examples</h2>
<h2>事例</h2>
<section class="example" id="example-1-updating-screen-reader-settings-for-stock-price-update-alerts">
<h3>Example 1: Updating screen reader settings for stock price update alerts</h3>
<p>The script below will update a stock value in an aria-live component every 10 seconds. If the user presses the "Turn Announcements Off" button, their screen reader will stop making announcements when the stock value changes; if they press the "Turn Announcements On" button, the announcements will start again.</p>
<h3>事例 1: 株価更新アラートに関するスクリーンリーダーの設定を変更する</h3>
<p>以下のスクリプトは、aria-live コンポーネント内の株価を 10秒 ごとに更新する。利用者が「Turn Announcements Off」ボタンを押すと、株価が変動した際のスクリーンリーダーによる通知が停止する。「Turn Announcements On」ボタンを押すと、通知が再開する。</p>
<section id="the-javascript">
<h4>The JavaScript</h4>
<h4>JavaScript</h4>

<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function (e) {
Expand Down Expand Up @@ -161,7 +157,7 @@ <h4>The JavaScript</h4>
&lt;/script&gt;</code></pre>
</section>
<section id="the-html">
<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
<h4><abbr title="HyperText Markup Language">HTML</abbr></h4>

<pre xml:space="preserve"><code class="language-html">&lt;body&gt;
&lt;h1&gt;Turbo Encabulator Stock Information&lt;/h1&gt;
Expand All @@ -178,7 +174,7 @@ <h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
&lt;/div&gt;
&lt;/body&gt;</code></pre>
</section>
<p class="working-example">Working example of this code: <a href="../../working-examples/script-toggle-aria-alerts/">Demonstration of toggling ARIA alerts</a>.</p>
<p class="working-example">このコードの動作例: <a href="https://www.w3.org/WAI/WCAG22/working-examples/script-toggle-aria-alerts/">Demonstration of toggling ARIA alerts</a></p>

</section>
</section>
Expand All @@ -188,18 +184,18 @@ <h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>



<section id="tests"><h2>Tests</h2>
<section class="procedure" id="procedure"><h3>Procedure</h3>
<p>For a web page that supports non-emergency interruptions:</p>
<section id="tests"><h2>検証</h2>
<section class="procedure" id="procedure"><h3>手順</h3>
<p>緊急ではない中断をサポートするウェブページにおいて:</p>
<ol>
<li>Load the web page and verify that no non-emergency alerts are displayed.</li>
<li>Verify there is a mechanism to activate and deactivate the non-emergency interruptions.</li>
<li>ウェブページを読み込んだとき、緊急ではないアラートが表示されないことを確認する。</li>
<li>緊急ではない中断を有効化および無効化するメカニズムがあることを確認する。</li>
</ol>
</section>
<section class="results" id="expected-results">
<h3>Expected Results</h3>
<h3>期待される結果</h3>
<ul>
<li>For a web page that supports non-emergency interruptions, checks #1 and #2 are true.</li>
<li>緊急ではない中断をサポートするウェブページでは、チェック 1 及び 2 が真である。</li>
</ul>
</section>
</section>
Expand All @@ -219,14 +215,13 @@ <h3>Expected Results</h3>
<svg focusable="false" aria-hidden="true" class="icon-comments" viewBox="0 0 28 28">
<path d="M22 12c0 4.422-4.922 8-11 8-0.953 0-1.875-0.094-2.75-0.25-1.297 0.922-2.766 1.594-4.344 2-0.422 0.109-0.875 0.187-1.344 0.25h-0.047c-0.234 0-0.453-0.187-0.5-0.453v0c-0.063-0.297 0.141-0.484 0.313-0.688 0.609-0.688 1.297-1.297 1.828-2.594-2.531-1.469-4.156-3.734-4.156-6.266 0-4.422 4.922-8 11-8s11 3.578 11 8zM28 16c0 2.547-1.625 4.797-4.156 6.266 0.531 1.297 1.219 1.906 1.828 2.594 0.172 0.203 0.375 0.391 0.313 0.688v0c-0.063 0.281-0.297 0.484-0.547 0.453-0.469-0.063-0.922-0.141-1.344-0.25-1.578-0.406-3.047-1.078-4.344-2-0.875 0.156-1.797 0.25-2.75 0.25-2.828 0-5.422-0.781-7.375-2.063 0.453 0.031 0.922 0.063 1.375 0.063 3.359 0 6.531-0.969 8.953-2.719 2.609-1.906 4.047-4.484 4.047-7.281 0-0.812-0.125-1.609-0.359-2.375 2.641 1.453 4.359 3.766 4.359 6.375z"></path>
</svg>
<h2>Help improve this page</h2>
<h2>このページを改善する</h2>
</header>
<div class="box-i">
<p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D">public-agwg-comments@w3.org</a> or via GitHub</p>
<p>あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。</p>
<div class="button-group">
<a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D" class="button"><span>E-mail</span></a>
<a href="https://github.com/w3c/wcag/issues/" class="button"><span>Fork &amp; Edit on GitHub</span></a>
<a href="https://github.com/w3c/wcag/issues/new" class="button"><span>New GitHub Issue</span></a>
<a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSdIpvogLx8kGIMewhQ6MzhG2pOCQZ50iIBViGg8pUrRJuslKg/viewform?entry.685195438=https%3A%2F%2Fwaic.jp%2Ftranslations%2FWCAG22%2FUnderstanding%2Ffocus-not-obscured-minimum" id="file-issue">翻訳に関するお問い合わせ (Google フォーム)</a>
<a href="https://github.com/waic/wcag22/" class="button"><span>GitHub</span></a>
</div>
</div>
</aside>
Expand All @@ -248,12 +243,15 @@ <h2>Help improve this page</h2>
<a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide</a> project,
co-funded by the European Commission.
</p>
<p>この文書は、2025 年 5 月 21 日付けの <a href="https://w3c.github.io/wcag/techniques/">Techniques for WCAG 2.2</a> を、<a href="https://waic.jp/">ウェブアクセシビリティ基盤委員会 (WAIC)</a> の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。
</p>
<p>この翻訳文書の利用条件については、<a href="https://waic.jp/license-for-translated-documents/">WAICが提供する翻訳文書のライセンス</a>をご覧ください。</p>
</div>
</footer>

<footer class="site-footer grid-4q" aria-label="Site">
<div class="q1-start q3-end about">
<div>
<!--div>
<p><a class="largelink" href="https://www.w3.org/WAI/" dir="auto" translate="no" lang="en">W3C Web Accessibility Initiative (WAI)</a></p>
<p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
</div>
Expand All @@ -264,12 +262,12 @@ <h2>Help improve this page</h2>
<li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg focusable="false" aria-hidden="true" class="icon-youtube " viewBox="0 0 32 32"><path d="M31.327 8.273c-0.386-1.353-1.431-2.398-2.756-2.777l-0.028-0.007c-2.493-0.668-12.528-0.668-12.528-0.668s-10.009-0.013-12.528 0.668c-1.353 0.386-2.398 1.431-2.777 2.756l-0.007 0.028c-0.443 2.281-0.696 4.903-0.696 7.585 0 0.054 0 0.109 0 0.163l-0-0.008c-0 0.037-0 0.082-0 0.126 0 2.682 0.253 5.304 0.737 7.845l-0.041-0.26c0.386 1.353 1.431 2.398 2.756 2.777l0.028 0.007c2.491 0.669 12.528 0.669 12.528 0.669s10.008 0 12.528-0.669c1.353-0.386 2.398-1.431 2.777-2.756l0.007-0.028c0.425-2.233 0.668-4.803 0.668-7.429 0-0.099-0-0.198-0.001-0.297l0 0.015c0.001-0.092 0.001-0.201 0.001-0.31 0-2.626-0.243-5.196-0.708-7.687l0.040 0.258zM12.812 20.801v-9.591l8.352 4.803z"></path></svg> YouTube</a></li>
<li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li>
</ul>
</div>
</div-->
<div dir="auto" translate="no" lang="en">
<p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
</div>
</div>
<div dir="auto" translate="no" class="q4-start q4-end" lang="en">
<!--div dir="auto" translate="no" class="q4-start q4-end" lang="en">
<ul style="margin-bottom:0">
<li><a href="/WAI/about/contacting/">Contact WAI</a></li>
<li><a href="/WAI/sitemap/">Site Map</a></li>
Expand All @@ -278,7 +276,7 @@ <h2>Help improve this page</h2>
<li><a href="/WAI/translations/"> Translations</a></li>
<li><a href="/WAI/roles/">Resources for Roles</a></li>
</ul>
</div>
</div-->
</footer>

<link rel="stylesheet" href="../a11y-light.css">
Expand All @@ -292,7 +290,7 @@ <h2>Help improve this page</h2>
</script>
<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>

<script>
<!--script>
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDoNotTrack", true]);
Expand All @@ -308,7 +306,8 @@ <h2>Help improve this page</h2>
</script>
<noscript>
<p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328&amp;rec=1" style="border:0;" alt="" /></p>
</noscript>
</noscript-->
<script src="https://waic.jp/docs/js/translation-contact.js"></script>


</body></html>