Skip to content
Open
Changes from all commits
Commits
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
88 changes: 42 additions & 46 deletions techniques/aria/ARIA23.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="ja"><head>
<meta charset="UTF-8">
<title>ARIA23: Using role=log to identify sequential information updates | WAI | W3C</title>
<title>ARIA23: 逐次的な情報更新を識別するために role=log を使用する | WAI | W3C</title>


<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -10,21 +10,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 @@ -53,43 +51,38 @@

<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 ARIA23:</span>Using <code class="language-html">role=log</code> to identify sequential information updates</h1>
<h1><span>テクニック ARIA23:</span>逐次的な情報更新を識別するために <code class="language-html">role=log</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

<a href="https://w3c.github.io/wcag/understanding/status-messages">4.1.3: Status Messages</a>
(<strong>Sufficient</strong>).</p>
このテクニックは <a href="https://waic.jp/translations/WCAG22/Understanding/status-messages">4.1.3: ステータスメッセージ</a> (<strong>十分なテクニック</strong>) に関連する。</p>




<p>This technique applies to content using <a href="https://www.w3.org/TR/wai-aria/">WAI-<abbr title="Accessible Rich Internet Applications">ARIA</abbr></a>.</p>
<p>このテクニックは、<a href="https://www.w3.org/TR/wai-aria/">WAI-<abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> を用いる HTMLに適用される。</p>

</div>
</section>
Expand All @@ -99,38 +92,38 @@ <h2 class="box-h box-h-icon">About this Technique</h2>


<section id="description">
<h2>Description</h2>
<h2>解説</h2>
<p>
The purpose of this technique is to notify Assistive Technologies (AT) when content has been appended to sequential information concerning the application's history or logs. The aria live region role of <code>log</code> has an implicit <code>aria-live</code> value of <code>polite</code> and <code>aria-atomic</code> value of <code>false</code>, which allows a user to be notified via AT (such as a screen reader) when log messages are added. The new content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See <a href="https://www.w3.org/TR/wai-aria-1.1/#log">WAI-ARIA 1.1 log (role)</a> for more details.
このテクニックの目的は、アプリケーションの履歴又はログに関する逐次的な情報にコンテンツが付加されたときに、支援技術に通知することである。<code>log</code> ロールの ARIA ライブライブリージョンは、暗黙的に <code>aria-live</code> の属性値 <code>polite</code> 及び <code>aria-atomic</code> の属性値 <code>false</code> を持っており、ログメッセージが追加されたときに、利用者は支援技術(スクリーンリーダーなど)を介して通知を受けることが可能になる。ARIA ライブライブリージョン内の新しいコンテンツは、テキストが表示されている箇所にフォーカスが当たっていなくても、支援技術が自動的に読み上げる。詳細は <a href="https://www.w3.org/TR/wai-aria-1.1/#log">WAI-ARIA 1.1 log (role)</a> を参照。

</p>

</section>
<section id="examples">
<h2>Examples</h2>
<h2>事例</h2>
<section class="example" id="example-1-updating-the-contents-of-a-chat-conversation">
<h3>Example 1: Updating the contents of a chat conversation</h3>
<h3>事例 1: チャットの会話のコンテンツを更新する</h3>
<section class="description">
<p>Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role of <code>log</code> so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).</p>
<p>利用者がチャットの入力フィールドにタイプ入力したコメントは、チャット履歴領域の末尾に追加される。この領域は <code>log</code> ロールでマークされており、新たな追加は支援技術によってアナウンスされるようになっている。新しいチャットメッセージが表示されるたび、スクリーンリーダーはその内容を読み上げる。(支援技術/ブラウザの互換性に依存する)。</p>
</section>
<pre xml:space="preserve"><code class="language-html">&lt;div id="chatRegion" role="log" aria-labelledby="chatHeading"&gt;
&lt;h4 id="chatHeading"&gt;Chat History&lt;/h4&gt;
&lt;ul id="conversation"&gt;
&lt;li&gt;The latest chat message&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>
<p class="working-example"><a href="../../working-examples/aria-role-log/chatlog.html">Working example: using <code class="language-html">role="log"</code> with chat conversation</a></p>
<p class="working-example"><a href="https://www.w3.org/WAI/WCAG22/working-examples/aria-role-log/chatlog.html">動作例: チャットの会話に <code class="language-html">role="log"</code> を使用する</a></p>
</section>
<section class="example" id="example-2-updating-the-log-of-a-server">
<h3>Example 2: Updating the log of a server</h3>
<p>An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with the role of <code>log</code> so that the new additions are announced by the ATs. (The default value for the <code>aria-relevant</code> attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.) When each new log entry is added, a screen reader announces it.</p>
<h3>事例 2: サーバのログを更新する</h3>
<p>アプリケーションのログは、タイムスタンプ付きのアクティビティを記録する。ログはアプリ内でビューとして公開され、その領域は、新たな追加が支援技術によってアナウンスされるように、<code>log</code> ロールでマークされている。(<code>aria-relevant</code> 属性のデフォルト値は "additions" なので、ログサイズの制限による古いトップエントリーの削除はアナウンスされない)。新たなログのエントリーが追加されるたびに、スクリーンリーダーはそれを読み上げる。</p>
<pre xml:space="preserve"><code class="language-html">&lt;div id="activityLog" role="log"&gt;
&lt;h4 id="logHeading"&gt;Recent activity&lt;/h4&gt;
&lt;ul id="logentries""&gt;
&lt;li&gt;08:03 UserX logged off&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>
<p class="working-example"><a href="../../working-examples/aria-role-log/serverlog.html">Working example: using <code class="language-html">role="log"</code> with server log</a></p>
<p class="working-example"><a href="https://www.w3.org/WAI/WCAG21/working-examples/aria-role-log/serverlog.html">動作例: サーバのログに <code class="language-html">role="log"</code> を使用する</a></p>
</section>
</section>

Expand All @@ -140,18 +133,18 @@ <h3>Example 2: Updating the log of a server</h3>


<section id="tests">
<h2>Tests</h2>
<h2>検証</h2>
<section class="test-procedure" id="procedure">
<h3>Procedure</h3>
<p>On a page that contains sequentially updating information:</p>
<h3>手順</h3>
<p>逐次的に情報を更新しているページに対して次を確認する。</p>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

既存訳から変更しています

現:順次的に更新情報を掲載しているページに対して以下を確認する。
新:逐次的に情報を更新しているページに対して次を確認する。

<ol>
<li>Check that the container for the information is given a role of <code>log</code>.</li>
<li>その情報のためのコンテナに <code>log</code> ロールが付与されていること。</li>
</ol>
</section>
<section class="test-results" id="expected-results">
<h3>Expected Results</h3>
<h3>期待される結果</h3>
<ul>
<li>#1 is true.</li>
<li>1 の結果が真である。</li>
</ul>
</section>
</section>
Expand All @@ -171,14 +164,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 @@ -200,12 +192,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 @@ -216,12 +211,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 @@ -230,7 +225,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 @@ -244,7 +239,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 @@ -260,7 +255,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>