Skip to content

ARIA19の翻訳 #1376

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

ARIA19の翻訳 #1376

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f41883
ARIA19の翻訳
tsmd Oct 20, 2025
e7f2379
Update techniques/aria/ARIA19.html
tsmd Oct 28, 2025
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
100 changes: 48 additions & 52 deletions techniques/aria/ARIA19.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>ARIA19: Using ARIA role=alert or Live Regions to Identify Errors | WAI | W3C</title>
<title>ARIA19: エラーを特定するために、ARIA role=alert 又はライブリージョン (Live Regions) を使用する | 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,73 +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 ARIA19:</span>Using ARIA role=alert or Live Regions to Identify Errors</h1>
<h1><span>テクニック ARIA19:</span>エラーを特定するために、ARIA role=alert 又はライブリージョン (Live Regions) を使用する</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/status-messages">4.1.3: Status Messages</a>
(<strong>Sufficient</strong>
using a more specific technique)
<a href="https://waic.jp/translations/WCAG22/Understanding/status-messages">4.1.3: ステータスメッセージ</a> (より具体的な手法を用いる<strong>十分なテクニック</strong>)
</li>

</ul>




<p>This technique applies to technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
<p>このテクニックは、<a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a> をサポートする技術に適用される。</p>

</div>
</section>


<section id="description"><h2>Description</h2>
<p>The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The <code class="language-html">aria-live</code> attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the <code class="language-html">aria-live</code> region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
<section id="description"><h2>解説</h2>
<p>このテクニックの目的は、入力エラーが発生した場合に支援技術 (AT) に通知することである。<code class="language-html">aria-live</code> 属性は、エラーメッセージがライブリージョンのコンテナに注入されたときに、支援技術 (スクリーンリーダーなど) による通知を可能にする。<code class="language-html">aria-live</code> リージョン内部のコンテンツは、テキストが表示されている場所で支援技術がフォーカスする必要なしに、支援技術によって自動的に読みあげられる。
</p>
<p>There are also a number of <a href="https://www.w3.org/TR/wai-aria/#live_region_roles">special case live region roles</a> which can be used instead of applying live region properties directly.</p>
</section><section id="examples"><h2>Examples</h2>
<p>ライブリージョンのプロパティを直接適用する代わりに使用できる<a href="https://www.w3.org/TR/wai-aria/#live_region_roles">特殊ケースのライブリージョンのロール</a>も多数ある。</p>
</section><section id="examples"><h2>事例</h2>
<section class="example" id="example-1-injecting-error-messages-into-a-container-with-role=alert-already-present-in-the-dom">
<h3>Example 1: Injecting error messages into a container with role=alert already present in the DOM</h3>
<h3>事例 1: DOM 内にすでに存在する role=alert を持つコンテナの中にエラーメッセージを注入する</h3>

<p>The following example uses role=alert which is equivalent to using aria-live=assertive.
<p>次の事例は、aria-live=assertive を使用しているのと同等の role=alert を使用する。
</p>
<p>In the example there is an empty error message container element with aria-atomic=true and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission.
<p>事例において、ページロード時に DOM に存在する aria-atomic=true 及び aria-live プロパティ又は alert ロールを持つ空のエラーメッセージコンテナ要素が存在する。エラーコンテナは、ほとんどのスクリーンリーダーでエラーメッセージが読み上げられるために、ページロード時に DOM に存在しなければならない。aria-atomic=true は、複数の無効な投稿をした後にエラーメッセージを iOS の Voiceover に読み上げさせるために必要である。
</p>
<p>jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
<p>jQuery は、送信時に入力が空であるかどうかをテストし、そうであれば、ライブリージョンコンテナにエラーメッセージを注入するために使用される。新しい送信が試みられるたびに、前のエラーメッセージがコンテナから削除され、新しいエラーメッセージが挿入される。
</p>
<pre xml:space="preserve"><code class="language-javascript">$(document).ready(function(e) {
$('#signup').submit(function() {
Expand Down Expand Up @@ -152,13 +145,13 @@ <h3>Example 1: Injecting error messages into a container with role=alert already
&lt;input type="submit" name="button" id="button" value="Submit"&gt;
&lt;/div&gt;
&lt;/form&gt;</code></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-alert-identify-errors/">Using role=alert to identify errors</a>.</p>
<p class="working-example">動作例: <a href="https://www.w3.org/WAI/WCAG22/working-examples/aria-alert-identify-errors/">エラーを識別するために role=alert を使用する</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>
<h2>関連リソース</h2>
<p style="margin-bottom: 1.5em;"><em><small>推奨を意味するものではない。</small></em></p>


<ul>
Expand All @@ -179,18 +172,18 @@ <h2>Related Resources</h2>



<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>Determine that an empty error container <code class="language-html">role=alert</code> or <code class="language-html">aria-live=assertive</code> attribute is present in the DOM at page load.</li>
<li> Trigger the error that causes the content in the live region to appear or update.</li>
<li> Determine that the error message was injected into the already present error container.</li>
<li><code class="language-html">role=alert</code> 又は <code class="language-html">aria-live=assertive</code> 属性が指定された空のエラーコンテナが、ページの読み込み時の DOM に存在することを判断する。</li>
<li> ライブリージョンのコンテンツの表示又更新を引き起こすエラーをトリガーする。</li>
<li> エラーメッセージが既に存在するエラーコンテナに挿入されたことを判断する。</li>
</ol>
</section>
<section class="results" id="expected-results">
<h3>Expected Results</h3>
<h3>期待される結果</h3>
<ul>
<li>#1 and #3 are true.</li>
<li>1 及び 3 の結果が真である。</li>
</ul>
</section>
</section>
Expand All @@ -210,14 +203,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 @@ -239,12 +231,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 @@ -255,12 +250,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 @@ -269,7 +264,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 @@ -283,7 +278,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 @@ -299,7 +294,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>