Skip to content

ARIA1の翻訳 #1155

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

ARIA1の翻訳 #1155

Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a6edefe
ARIA1の翻訳
tsmd Aug 13, 2025
7fb41f9
Apply suggestion from @momdo
tsmd Aug 14, 2025
7833b15
Apply suggestion from @momdo
tsmd Aug 14, 2025
80f3506
Apply suggestion from @momdo
tsmd Aug 14, 2025
ced79e5
Apply suggestion from @momdo
tsmd Aug 14, 2025
cfc8b3b
Apply suggestion from @momdo
tsmd Aug 14, 2025
37536b8
Apply suggestion from @momdo
tsmd Aug 14, 2025
634fa84
Apply suggestion from @momdo
tsmd Aug 14, 2025
2937d49
Apply suggestion from @momdo
tsmd Aug 14, 2025
a1b8798
Apply suggestion from @momdo
tsmd Aug 14, 2025
adbc930
Apply suggestion from @momdo
tsmd Aug 14, 2025
52c950a
参考→参考テクニック
tsmd Aug 14, 2025
658f1d4
<code>の翻訳漏れを修正
tsmd Aug 14, 2025
0eb3303
「ユーザインタフェースコントロール」に半角スペースを加える
tsmd Aug 26, 2025
60d7149
日本語訳されるまでのスクリプトを削除
tsmd Sep 7, 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
102 changes: 49 additions & 53 deletions techniques/aria/ARIA1.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>ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls | WAI | W3C</title>
<title>ARIA1: ユーザインタフェース コントロールに対する説明ラベルを提供するために、aria-describedby プロパティを使用する | WAI | W3C</title>



Expand All @@ -10,21 +10,19 @@
<link rel="stylesheet" href="../base.css">


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

<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="#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="#resources">関連リソース</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">
<!-- 日本語訳されるまでの一時的な注記 -->
<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 ARIA1:</span>Using the <code class="language-html">aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
<h1><span>テクニック ARIA1:</span> ユーザインタフェース コントロールに対する説明ラベルを提供するために、<code class="language-html">aria-describedby</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/info-and-relationships">1.3.1: Info and Relationships</a>
(<strong>Advisory</strong>)
<a href="https://waic.jp/translations/WCAG22/Understanding/info-and-relationships">1.3.1: 情報及び関係性</a> (<strong>参考テクニック</strong>)
</li>

<li>

<a href="https://w3c.github.io/wcag/understanding/labels-or-instructions">3.3.2: Labels or Instructions</a>
(<strong>Sufficient</strong>
when used with <a href="../general/G131">G131: Providing descriptive labels</a>)
<a href="https://waic.jp/translations/WCAG22/Understanding/labels-or-instructions">3.3.2: ラベル又は説明</a> (<a href="../general/G131">G131: Providing descriptive labels</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>
Expand All @@ -113,22 +106,22 @@ <h2 class="box-h box-h-icon">About this Technique</h2>


<section id="description">
<h2>Description</h2>
<p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code class="language-html">aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <code class="language-html">aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <code class="language-html">id</code> reference list. The <code class="language-html">id</code> reference list contains one or more unique element <code class="language-html">id</code>s.</p>
<p>Refer to <a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.</p>
<h2>解説</h2>
<p>このテクニックの目的は、プログラムによる解釈がされる、ユーザインタフェース要素に関する説明的な情報を提供するために、どのように WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code class="language-html">aria-describedby</code></a> プロパティを使用するかを示すことにある。<code class="language-html">aria-describedby</code> プロパティは、<code class="language-html">id</code> 参照リストの使用を通して一つ以上の要素の説明的情報と結びつけるために使用してもよいものである。<code class="language-html">id</code> 参照リストは、一つ以上のユニークな要素 <code class="language-html">id</code> を含む。</p>
Copy link
Copy Markdown
Contributor

@bakera bakera May 2, 2026

Choose a reason for hiding this comment

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

may be used を「使用してもよい」としていますが、意味がわかりにくいように思いました。
ちなみに、WCAG 2.2本体の用語集にある "which may be used by people" は現在の訳では「利用者が使用することがある」とされています。
こちらも「使用されることがある」というくらいで良いのではないでしょうか。

Suggested change
<p>このテクニックの目的は、プログラムによる解釈がされる、ユーザインタフェース要素に関する説明的な情報を提供するために、どのように WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code class="language-html">aria-describedby</code></a> プロパティを使用するかを示すことにある。<code class="language-html">aria-describedby</code> プロパティは、<code class="language-html">id</code> 参照リストの使用を通して一つ以上の要素の説明的情報と結びつけるために使用してもよいものである。<code class="language-html">id</code> 参照リストは、一つ以上のユニークな要素 <code class="language-html">id</code> を含む。</p>
<p>このテクニックの目的は、プログラムによる解釈がされる、ユーザインタフェース要素に関する説明的な情報を提供するために、どのように WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code class="language-html">aria-describedby</code></a> プロパティを使用するかを示すことにある。<code class="language-html">aria-describedby</code> プロパティは、<code class="language-html">id</code> 参照リストの使用を通して一つ以上の要素の説明的情報と結びつけるために使用されることがある。<code class="language-html">id</code> 参照リストは、一つ以上のユニークな要素 <code class="language-html">id</code> を含む。</p>

<p>HTML とともに WAI-ARIA ステート及びプロパティを提供する方法については、<a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> を参照。WAI-ARIA ステート及びプロパティは他の言語とも互換性がある。詳しくはそれらの言語の説明文書を参照。</p>
<div class="note">
<p class="note-title marker">Note</p>
<p class="note-title marker">注記</p>
<div>
<p>The <code class="language-html">aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <code class="language-html">id</code>, it must reference an element in the same <abbr title="Document Object Model">DOM</abbr> document.</p>
<p><code class="language-html">aria-describedby</code> プロパティは、外部リソース上の説明を参照するように設計されていない――これは <code class="language-html">id</code> なので、同一 <abbr title="Document Object Model">DOM</abbr> 文書内の要素を参照しなければならない。</p>
Copy link
Copy Markdown
Contributor

@bakera bakera May 2, 2026

Choose a reason for hiding this comment

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

since 以降がちょっと変な感じがします。since はその後全体にかかっているはずで、
「IDだから、同一DOMを参照しなければならない」
ではなく、
「IDであり、同一DOMを参照しなければならないから」
ではないでしょうか。

Suggested change
<p><code class="language-html">aria-describedby</code> プロパティは、外部リソース上の説明を参照するように設計されていない――これは <code class="language-html">id</code> なので、同一 <abbr title="Document Object Model">DOM</abbr> 文書内の要素を参照しなければならない。</p>
<p><code class="language-html">aria-describedby</code> プロパティは、外部リソース上の説明を参照するように設計されていない――これは <code class="language-html">id</code> であり、同一 <abbr title="Document Object Model">DOM</abbr> 文書内の要素を参照しなければならないためである。</p>

</div>
</div>
</section>
<section id="examples">
<h2>Examples</h2>
<h2>事例</h2>
<section class="example" id="example-1-using-aria-describedby-to-associate-instructions-with-form-fields">
<h3>Example 1: Using <code class="language-html">aria-describedby</code> to associate instructions with form fields</h3>
<h3>事例 1: フォームフィールドと指示を関連付けるために <code class="language-html">aria-describedby</code> を使用する</h3>

<p>Sample form field using <code class="language-html">aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
<p>フォームフィールドに対してフォームラベルを用意するとともに、<code class="language-html">aria-describedby</code> で指示を関連付けているサンプルフォームフィールド。</p>
<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
&lt;label for="fname"&gt;First name&lt;/label&gt;
&lt;input aria-describedby="int2" autocomplete="given-name" id="fname" type="text"&gt;
Expand All @@ -137,7 +130,7 @@ <h3>Example 1: Using <code class="language-html">aria-describedby</code> to asso

</section>
<section class="example" id="example-2-using-aria-describedby-property-to-provide-more-detailed-information-about-the-button">
<h3>Example 2: Using <code class="language-html">aria-describedby</code> property to provide more detailed information about the button</h3>
<h3>事例 2: ボタンに関するより詳細な情報を提供するために <code class="language-html">aria-describedby</code> プロパティを使用する</h3>

<pre xml:space="preserve"><code class="language-html">&lt;div&gt;
&lt;span id="fontDesc"&gt;Select the font faces and sizes to be used on this page&lt;/span&gt;
Expand All @@ -158,8 +151,8 @@ <h3>Example 2: Using <code class="language-html">aria-describedby</code> propert


<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 @@ -186,25 +179,25 @@ <h2>Related Resources</h2>


<section id="related">
<h2>Related Techniques</h2>
<h2>関連テクニック</h2>
<ul>
<li><a href="../aria/ARIA2">ARIA2: Identifying a required field with the aria-required property</a></li>
<li><a href="../aria/ARIA7">ARIA7: Using aria-labelledby for link purpose</a></li>
</ul>
</section>
<section id="tests">
<h2>Tests</h2>
<h2>検証</h2>
<section class="procedure" id="procedure">
<h3>Procedure</h3>
<h3>手順</h3>
<ol>
<li>Check that there is a user interface control having an <code class="language-html">aria-describedby</code> attribute that references one or more elements via unique <code class="language-html">id</code>.</li>
<li>Check that the referenced element or elements provide additional information about the user interface control.</li>
<li>一意な <code class="language-html">id</code> を経由して一つ以上の要素を参照する <code class="language-html">aria-describedby</code> 属性を持つユーザインタフェース コントロールがあることを確認する。</li>
<li>参照される要素 (一つ又は複数) が、ユーザインタフェース コントロールに関する追加情報を提供することを確認する。</li>
</ol>
</section>
<section class="results" id="expected-results">
<h3>Expected Results</h3>
<h3>期待される結果</h3>
<ul>
<li>Checks #1 and #2 are true.</li>
<li>チェック 1 及び 2 の結果が真である。</li>
</ul>
</section>
</section>
Expand All @@ -224,14 +217,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 @@ -253,12 +245,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 @@ -269,12 +264,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 @@ -283,7 +278,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 @@ -297,7 +292,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 @@ -313,7 +308,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>