Skip to content

SCR26 の翻訳 #2136

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

SCR26 の翻訳 #2136

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca6f35d
SCR26 の翻訳
caztcha Jun 15, 2026
d4e5ae9
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
92 changes: 45 additions & 47 deletions techniques/client-side-script/SCR26.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>SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element | WAI | W3C</title>
<title>SCR26: 動的なコンテンツを、Document Object Model の、そのトリガーとなる要素の直後に挿入する | 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 @@ -9,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 @@ -51,62 +49,59 @@

<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 SCR26:</span>Inserting dynamic content into the Document Object Model immediately following its trigger element</h1>
<h1><span>テクニック SCR26:</span>動的なコンテンツを、Document Object Model の、そのトリガーとなる要素の直後に挿入する</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
このテクニックは

<a href="https://w3c.github.io/wcag/understanding/focus-order">2.4.3: Focus Order</a>
(<strong>Sufficient</strong>
when used for changing a web page dynamically).</p>
<a href="https://waic.jp/translations/WCAG22/Understanding/focus-order">2.4.3: フォーカス順序</a>
(ウェブページを動的に変更するために用いる場合、<strong>十分なテクニック</strong>) に関連する。</p>




<p>This technique applies to HTML and script.</p>
<p>このテクニックは、HTML 及びスクリプトに適用される。</p>

</div>
</section>


<section id="description"><h2>Description</h2>
<p>The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.</p>
<p>The reading order in a screen-reader is based on the order of the HTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its <code class="language-javascript">onclick</code> event. These elements are natively focusable, and their <code class="language-javascript">onclick</code> event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.</p>
<p>Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted. </p>
</section><section id="examples"><h2>Examples</h2>
<section class="example" id="example-1"><h3>Example 1</h3>
<section id="description"><h2>解説</h2>
<p>このテクニックの目的は、Document Object Model (DOM) に挿入されたユーザインタフェースの要素をタブ順序及びスクリーンリーダーの読み上げ順序がユーザエージェント標準のふるまいによって正しく設定されるような方法で配置することである。このテクニックは、メニューやダイアログのように隠れているものと表示されているもの、全てのユーザインタフェース要素に利用することができる。</p>
<p>スクリーンリーダーの読み上げ順序は、Document Object Model 内の HTML の要素の順序に基づいており、それはタブ順序についても同様である。このテクニックでは、新しいコンテンツを DOM のそのトリガーとなる要素の直後に挿入する。トリガーとなる要素は、リンク又はボタンでなければならず、スクリプトはその <code class="language-javascript">onclick</code> イベントにより呼び出されなければならない。これらの要素はもともとフォーカス可能であり、その <code class="language-javascript">onclick</code> イベントはデバイスに依存しない。フォーカスは選択された要素に残り、その後に挿入された新しいコンテンツは、タブ順序及びスクリーンリーダーの読み上げ順序の両方において、次の順番となる。</p>
<p>このテクニックは同期された更新にも利用できることに注目して欲しい。(AJAX と呼ばれることのある) 非同期の更新では、支援技術に非同期のコンテンツが挿入されたことを通知するために追加のテクニックが必要となる。</p>
</section><section id="examples"><h2>事例</h2>
<section class="example" id="example-1"><h3>事例 1</h3>

<p>This example creates a menu when a link is clicked and inserts it after the link. The <code class="language-javascript">onclick</code> event of the link is used to call the ShowHide script, passing in an <code class="language-html">id</code> for the new menu as a parameter.</p>
<p>この例では、リンクがクリックされた際にメニューを生成し、そのリンクの後に挿入する。リンクの <code class="language-javascript">onclick</code> イベントは新しいメニューのための <code class="language-html">id</code> をパラメータとして渡す ShowHide スクリプトを呼び出すために使用される。</p>

<pre xml:space="preserve"><code class="language-html">&lt;button aria-expanded="false" type="button" onclick="ShowHide('foo',this)"&gt;
Toggle
&lt;/button&gt;</code></pre>

<p>The ShowHide script creates a <code class="language-html">div</code> containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new <code class="language-html">div</code> to be in the DOM after the menu. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.</p>
<p>ShowHide スクリプトは新しいメニューを含む <code class="language-html">div</code> を生成し、リンクを挿入する。最終行がスクリプトの核心となる。スクリプトのトリガーとなる要素の親を探し、新しい子として生成された div をそれに追加する。これにより、新しい <code class="language-html">div</code> は DOM 内でメニューの次になる。利用者が Tab キーを押したときには、フォーカスがメニュー内で最初のフォーカス可能な項目となる生成されたリンクに移動する。</p>

<pre xml:space="preserve"><code class="language-javascript">function ShowHide(id,src){
var el = document.getElementById(id);
Expand All @@ -131,23 +126,23 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
}
}</code></pre>

<p>CSS is used to make the <code class="language-html">div</code> and link look like a menu.</p>
<p>CSS は <code class="language-html">div</code> およびリンクをメニューのように見せるために利用される。</p>

</section>
</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>Find all areas of the page that trigger dialogs that are not pop-up windows.</li>
<li>Check that the dialogs are triggered from the click event of a button or a link.</li>
<li>Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.</li>
<li>ポップアップではないダイアログのトリガーとなる全てのエリアを探す。</li>
<li>そのダイアログがボタン又はリンクのクリックイベントによりトリガーされることをチェックする。</li>
<li>スクリプトによって生成された DOM を調査できるツールを使って、ダイアログが DOM 内で次の位置にきていることをチェックする。</li>
</ol>
</section>
<section class="results" id="expected-results"><h3>Expected Results</h3>
<section class="results" id="expected-results"><h3>期待される結果</h3>
<ul>
<li>#2 and #3 are true.</li>
<li>2 及び 3 が真である。</li>
</ul>
</section>
</section>
Expand All @@ -167,14 +162,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 @@ -196,12 +190,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 @@ -212,12 +209,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 @@ -226,7 +223,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 @@ -240,7 +237,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 @@ -256,7 +253,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>