Skip to content

SCR19 の翻訳 #2131

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 2 commits into
base: main
Choose a base branch
from
Open

SCR19 の翻訳 #2131

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7cbc5a2
SCR19 の翻訳
caztcha Jun 13, 2026
8291829
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
113 changes: 55 additions & 58 deletions techniques/client-side-script/SCR19.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +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>SCR19: Using an onchange event on a select element without causing a change of
context | WAI | W3C</title>
<title>SCR19: select 要素の onchange イベントは、コンテキストの変化を引き起こすことのないように使用する | WAI | W3C</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css">
Expand All @@ -10,20 +9,18 @@



<!-- 日本語訳されるまでの一時的なスクリプト -->
<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 @@ -52,71 +49,68 @@

<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="#resources">Related Resources</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="#resources">関連リソース</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 SCR19:</span>Using an <code class="language-javascript">onchange</code> event on a <code class="language-html">select</code> element without causing a change of
context</h1>
<h1><span>テクニック SCR19:</span><code class="language-html">select</code> 要素の <code class="language-javascript">onchange</code> イベントは、コンテキストの変化を引き起こすことのないように使用する</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/on-input">3.2.2: On Input</a>
(<strong>Sufficient</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/on-input">3.2.2: 入力時</a>
(<strong>十分なテクニック</strong>)
</li>

<li>

<a href="https://w3c.github.io/wcag/understanding/change-on-request">3.2.5: Change on Request</a>
(<strong>Sufficient</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/change-on-request">3.2.5: 要求による変化</a>
(<strong>十分なテクニック</strong>)
</li>

</ul>




<p>This technique applies to HTML with support for scripting.</p>
<p>このテクニックは、スクリプトをサポートする HTML に適用される。</p>

</div>
</section>


<section id="description"><h2>Description</h2>
<p>The objective of this technique is to demonstrate how to correctly use an onchange event with a select element to update other elements on the web page. This technique will not cause a change of context. When there are one or more select elements on the web page, an onchange event on one, can update the options in another select element on the web page. All of the data required by the select elements is included within the web page.</p>
<p> It is important to note that the select item which is modified is after the trigger select element in the reading order of the web page. This ensures that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus. This technique relies on JavaScript support in the user agent. </p>
</section><section id="examples"><h2>Examples</h2>
<section class="example" id="example-1"><h3>Example 1</h3>
<p>This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately. The first select element contains a list of continents. The second select element will contain a partial list of countries located in the selected continent. There is an onchange event associated with the continent select. When the continent selection changes, the items in the country select are modified using JavaScript via the Document Object Model (DOM). All of the data required, the list of countries and continents, is included within the web page.</p>
<p>Overview of the code below</p>
<section id="description"><h2>解説</h2>
<p>このテクニックの目的は、ウェブページの他の要素を更新する select 要素において onchange イベントを正しく使用する方法を示すことである。この達成方法は、コンテキストの変化を引き起こさない。ウェブページに一つかそれ以上の select 要素があるとき、一方の onchange イベントは、そのウェブページの別の select 要素における選択肢を更新できる。そして、select 要素によって必要とされるデータのすべてが、ウェブページの中に含まれている。</p>
<p>ウェブページでの音声読み上げ順序において、選択によって変更されるアイテムが、トリガーとなる select 要素の後にあることに注意することが重要である。これは、支援技術が変化を察知するのを確実にし、変更されたアイテムがフォーカスされたとき、利用者は新しいデータを認識する。なお、この達成方法は、ユーザエージェントによる JavaScript のサポート状況に依存する。</p>
</section><section id="examples"><h2>事例</h2>
<section class="example" id="example-1"><h3>事例 1</h3>
<p>この事例には、二つの select 要素がある。最初の select 要素でアイテムが選択されたとき、二つめの select 要素の選択肢が適切に更新される。最初の select 要素には、大陸のリストがある。そして、二つめの select 要素には、選択された大陸に位置する国々の一部のリストがある。onchange イベントは、大陸の選択に連動している。大陸の選択が変わると、国の選択肢は、ドキュメントオブジェクトモデル (DOM) を通して JavaScript を用いて変更される。必要であるすべてのデータ、国と大陸のリスト、はウェブページの中に含まれている。</p>
<p>以下のコードの概要</p>
<ul>
<li><code class="language-javascript">countryLists</code> array variable which contains the list of countries for each continent in the trigger select element.</li>
<li><code class="language-javascript">countryChange()</code> function which is called by the onchange event of the continent select element.</li>
<li>The HTML code to create the select elements in the body of the web page.</li>
<li>トリガーとなる select 要素の大陸ごとの国々のリストを含む <code class="language-javascript">countryLists</code> 配列</li>
<li>大陸の select 要素の onchange イベントによって呼ばれる <code class="language-javascript">countryChange()</code> 関数</li>
<li>ウェブページの本文の select 要素を作成する HTML コード</li>
</ul>

<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
Expand Down Expand Up @@ -196,12 +190,12 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<p class="working-example"> Here is a working example: <a href="../../working-examples/script-dynamic-select/">Dynamic Select</a>
<p class="working-example">動作例: <a href="https://www.w3.org/WAI/WCAG22/working-examples/script-dynamic-select/">Dynamic Select</a>
</p>

</section>
</section><section id="resources"><h2>Related Resources</h2>
<p style="margin-bottom: 1.5em;"><em><small>No endorsement implied.</small></em></p>
</section><section id="resources"><h2>関連リソース</h2>
<p style="margin-bottom: 1.5em;"><em><small>推奨を意味するものではない。</small></em></p>



Expand All @@ -217,20 +211,20 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
</section>


<section id="tests"><h2>Tests</h2>
<section class="procedure" id="procedure"><h3>Procedure</h3>
<section id="tests"><h2>検証</h2>
<section class="procedure" id="procedure"><h3>手順</h3>
<ol>
<li> Navigate to the trigger select element (in this example, the one to select continents) and change the value of the select. </li>
<li> Navigate to the select element that is updated by the trigger (in this example, the one to select countries). </li>
<li> Check that the matching option values are displayed in the other select element. </li>
<li> Navigate to the trigger select element, navigate through the options but do not change the value. </li>
<li> Check that the matching option values are still displayed in the associated element.</li>
<li>トリガーとなる select 要素 (この事例では、大陸を選択するセレクトメニュー) に移動し、選択肢の値を変える。</li>
<li>トリガーによって更新された select 要素 (この事例では、国を選択するセレクトメニュー) へ移動する。</li>
<li>一致する選択肢の値が、他の select 要素に表示されていることをチェックする。</li>
<li>トリガーとなる select 要素へ移動し、選択肢へ移動するが、値を変えない。</li>
<li>一致する選択肢の値が、関連付けられた要素にまだ表示されていることをチェックする。</li>
</ol>
<p>It is recommended that the select elements are tested with an assistive technology to verify that the changes to the associated element are recognized.</p>
<p>関連付けられた要素の変化が認識されることを確かめるために、select 要素を支援技術を用いて検証することが望ましい。</p>
</section>
<section class="results" id="expected-results"><h3>Expected Results</h3>
<section class="results" id="expected-results"><h3>期待される結果</h3>
<ul>
<li> Step #3 and #5 are true. </li>
<li>手順 3 及び 5 が真である。</li>
</ul>
</section>
</section>
Expand All @@ -250,14 +244,13 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
<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 @@ -279,12 +272,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 @@ -295,12 +291,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 @@ -309,7 +305,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 @@ -323,7 +319,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 @@ -339,7 +335,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>