Skip to content

SCR18 の翻訳 #2130

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

SCR18 の翻訳 #2130

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ecd3cd2
SCR18 の翻訳
caztcha Jun 13, 2026
e77aa7c
h1 を消してしまっていたので復旧
caztcha Jun 13, 2026
f2e3c2e
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
109 changes: 54 additions & 55 deletions techniques/client-side-script/SCR18.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>SCR18: Providing client-side validation and alert | WAI | W3C</title>
<title>SCR18: クライアントサイドのバリデーション及びアラートを提供する | 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,72 +49,70 @@

<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="#related">Related Techniques</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="#related">関連テクニック</a></li>
<li><a href="#tests">検証</a></li>
</ul>
</nav>
</div>
</aside>

<main id="main" class="standalone-resource__main">
Comment thread
caztcha marked this conversation as resolved.
<!-- 日本語訳されるまでの一時的な注記 -->
<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 SCR18:</span>Providing client-side validation and alert</h1>
<h1><span>テクニック SCR18:</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/error-identification">3.3.1: Error Identification</a>
(<strong>Sufficient</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/error-identification">3.3.1: エラーの特定</a>
(<strong>十分なテクニック</strong>)
</li>

<li>

<a href="https://w3c.github.io/wcag/understanding/error-suggestion">3.3.3: Error Suggestion</a>
(<strong>Advisory</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/error-suggestion">3.3.3: エラーの修正提案</a>
(<strong>参考テクニック</strong>)
</li>

<li>

<a href="https://w3c.github.io/wcag/understanding/error-prevention-legal-financial-data">3.3.4: Error Prevention (Legal, Financial, Data)</a>
(<strong>Advisory</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/error-prevention-legal-financial-data">3.3.4: 誤り防止 (法的・金融・データ)</a>
(<strong>参考テクニック</strong>)
</li>

</ul>




<p>This technique applies to content that validates user input.</p>
<p>このテクニックは、利用者の入力を検証するコンテンツに適用される。</p>

</div>
</section>


<section id="description"><h2>Description</h2>
<p>The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, an alert dialog describes the nature of the error in text. Once the user dismisses the alert dialog, it is helpful if the script positions the keyboard focus on the field where the error occurred.</p>
</section><section id="examples"><h2>Examples</h2>
<section id="description"><h2>解説</h2>
<p>このテクニックの目的は、クライアントサイドのスクリプトによって、各フィールドで利用者が入力する値を確認することである。エラーが見つかった場合、警告ダイアログを表示し、エラーの内容をテキストで示す。警告ダイアログを閉じるとともに、スクリプトによってキーボードフォーカスをエラーが起こったフィールドに移動させれば、それは利用者にとって役立つ。</p>
</section><section id="examples"><h2>事例</h2>
<section class="example" id="example-1-checking-a-single-control-with-an-event-handler">
<h3>Example 1: Checking a single control with an event handler</h3>
<h3>事例 1: イベントハンドラで単一のコントロールをチェックする</h3>

<p>The following script will check that a valid date has been entered in the form control.</p>
<p>以下のスクリプトは、有効な日付がフォームのコントロールに入力されたかをチェックする。</p>

<pre xml:space="preserve"><code class="language-html">&lt;label for="date"&gt;Date:&lt;/label&gt;
&lt;input type="text" name="date" id="date"
Expand All @@ -125,17 +121,17 @@ <h3>Example 1: Checking a single control with an event handler</h3>
Please re-enter the value.');"&gt;</code></pre>
</section>
<section class="example" id="example-2-checking-multiple-controls-when-the-user-submits-the-form">
<h3>Example 2: Checking multiple controls when the user submits the form</h3>
<h3>事例 2: 利用者がフォームを送信したときに複数のコントロールをチェックする</h3>

<p>The following sample shows multiple controls in a form. The <code class="language-html">form</code> element uses the <code class="language-html">onsubmit</code> attribute which creates an event handler to execute the validation script when the user attempts to submit the form. If the validation is successful, the event returns <code class="javascript">true</code> and the form submission proceeds; if the validation finds errors, it displays an error message and returns <code class="javascript">false</code> to cancel the submit attempt so the user can fix the problems.</p>
<p>次の例はフォーム内の複数のコントロールを表している。<code class="language-html">form</code> 要素は、利用者がフォームを送信しようとした際、検証スクリプトを実行するために、イベントハンドラを作成する <code class="language-html">onsubmit</code> 属性を用いている。検証で問題がない場合、イベントは <code class="javascript">true</code> を返し、フォームの送信を続行する。検証でエラーが検出された場合は、利用者が問題を修正できるようエラーメッセージを表示し、送信を取り消すために <code class="javascript">false</code> を返す。</p>
<div class="note">
<p class="note-title marker">Note</p>
<p class="note-title marker">注記</p>
<div>
<p>This example demonstrates an alert for simplicity. A more helpful notification to the user would be to highlight the controls with problems and add information to the page about the nature of the errors and how to navigate to the controls that require data fixes.</p>
<p>Although this example uses an <code class="language-javascript">onsubmit</code> attribute on the <code class="language-html">form</code> element for brevity, normal practice is to create a submit event listener when the page is loaded.</p>
<p>この事例は簡潔さのためにアラートを用いて説明している。利用者により役立つ通知は、問題のあるコントロールをハイライトし、エラーの内容とデータの修正が必要なコントロールに移動する方法をページ上に示すことである。</p>
<p>この事例では簡潔さのために <code class="language-html">form</code> 要素に <code class="language-javascript">onsubmit</code> 属性を用いているが、通常であればページがロードした際にフォーム送信用のイベントリスナーを作成する。</p>
</div>
</div>
<p>Script code:</p>
<p>スクリプトコード:</p>
<pre xml:space="preserve"><code class="language-javascript">function validate() {
// initialize error message
var msg = "";
Expand Down Expand Up @@ -163,7 +159,7 @@ <h3>Example 2: Checking multiple controls when the user submits the form</h3>
else {
return true;
}</code></pre>
<p>Form code:</p>
<p>フォームコード:</p>
<pre xml:space="preserve"><code class="language-html">&lt;form action="multiple-controls.html" onsubmit="return validate()"&gt;
&lt;div&gt;
&lt;label for="name"&gt;Name:&lt;/label&gt;
Expand All @@ -177,25 +173,25 @@ <h3>Example 2: Checking multiple controls when the user submits the form</h3>
&lt;input type="submit"&gt;
&lt;/div&gt;
&lt;/form&gt;</code></pre>
<p class="working-example">This is demonstrated in the <a href="../../working-examples/script-check-multiple-controls/">working example of checking multiple controls when the user submits the form</a>.</p>
<p class="working-example"><a href="https://www.w3.org/WAI/WCAG22/working-examples/script-check-multiple-controls/">利用者がフォームを送信したときに複数のコントロールをチェックする動作例</a>にデモがある。</p>

</section>
</section>

<section id="related"><h2>Related Techniques</h2><ul>
<section id="related"><h2>関連テクニック</h2><ul>
<li><a href="../general/G89">G89: Providing expected data format and example</a></li>
</ul></section>
<section id="tests"><h2>Tests</h2>
<section class="procedure" id="procedure"><h3>Procedure</h3>
<p>For form fields that require specific input:</p>
<section id="tests"><h2>検証</h2>
<section class="procedure" id="procedure"><h3>手順</h3>
<p>特定の入力を必要とするフォームのフィールドに対して:</p>
<ol>
<li>enter invalid data</li>
<li>determine if an alert describing the error is provided.</li>
<li>無効なデータを入力する。</li>
<li>エラーを説明している警告が提供されているかどうかを判断する。</li>
</ol>
</section>
<section class="results" id="expected-results"><h3>Expected Results</h3>
<ul>
<li>#2 is true</li>
<li>2 が真である。</li>
</ul>
</section>
</section>
Expand All @@ -215,14 +211,13 @@ <h3>Example 2: Checking multiple controls when the user submits the form</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 @@ -244,12 +239,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 @@ -260,12 +258,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 @@ -274,7 +272,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 @@ -288,7 +286,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 @@ -304,7 +302,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>