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
106 changes: 46 additions & 60 deletions techniques/failures/F15.html
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>F15: Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely | WAI | W3C</title>
<title>F15: 達成基準 4.1.2 の失敗例 - ウェブコンテンツ技術のアクセシビリティ API を用いていない、又は不完全なカスタムコントロールを実装している | 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,78 +51,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 F15:</span>Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely</h1>
<h1><span>テクニック F15:</span>達成基準 4.1.2 の失敗例 - ウェブコンテンツ技術のアクセシビリティ API を用いていない、又は不完全なカスタムコントロールを実装している</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/name-role-value">4.1.2: Name, Role, Value</a>
(<strong>Failure</strong>).</p>
<a href="https://waic.jp/translations/WCAG22/Understanding/name-role-value">4.1.2: 名前 (name)・役割 (role)・値 (value)</a>
(<strong>失敗</strong>) に関連する。</p>




<p>This failure applies to all technologies that support an accessibility API.</p></div>
<p>この失敗例は、アクセシビリティ API をサポートする全ての技術に適用される。</p></div>
</section>



<section id="description"><h2>Description</h2>
<p> When standard controls from accessible technologies are used, they usually are programmed in a way that uses and supports the accessibility API.
However, when custom controls are created, it is up to the control's author to ensure that the control is correctly exposed to users via the platform's accessibility API.
If this is not done, then assistive technologies will not be able to understand what the control is or how to operate it or may not even know of its existence.</p>
<section id="description"><h2>解説</h2>
<p>アクセシブルなウェブコンテンツ技術の標準コントロールを用いる際、通常はアクセシビリティ API を使用して、アクセシビリティ API をサポートする方法でプログラムされている。しかし、カスタムコントロールを作成する場合、コントロールがプラットフォームのアクセシビリティ API を通じて利用者に正しく公開されるようにするのは、コントロールのコンテンツ制作者の責任である。これが行われない場合、支援技術はコントロールの内容もしくは操作方法を理解できない、又はコントロールの存在すら認識できない可能性がある。</p>
<div class="note">
<p class="note-title marker">Note</p>
<p class="note-title marker">注記</p>
<div>
<p>For technologies that support it, WAI-ARIA can be used to expose a custom control's role, name, value, states, and properties via the accessibility API for the technology.</p>
<p>上記をサポートする技術の場合、WAI-ARIA を使用して、技術のアクセシビリティ API を通じてカスタムコントロールの役割 (role)、名前 (name)、値 (value)、状態、およびプロパティを公開できる。</p>
</div>
</div>
<div class="note">
<p class="note-title marker">Note</p>
<p class="note-title marker">注記</p>
<div>
<p>Along with ensuring custom controls are properly exposed to users via the platform's accessibility API, there are many other considerations that need to be made so the
control is accessible to as many people as possible. Keyboard functionality, target size, and color contrast requirements are only a few of the additional considerations that need to be accounted for,
all of which go beyond what 4.1.2 Name, Role, Value, and this technique cover.</p>
<p>カスタムコントロールがプラットフォームのアクセシビリティ API を通じて利用者に適切に公開されることに加え、コントロールが可能な限り多くの人々にアクセシブルとなるよう、他にも考慮すべき点が数多くある。キーボードの機能、ターゲットサイズ、色コントラストの要件などは、考慮すべき追加事項のほんの一部に過ぎず、これらは全て、4.1.2 名前 (name)・役割 (role) ・値 (value)、及びこのテクニックでカバーされている範囲を超えている。</p>
</div>
</div>
</section><section id="examples"><h2>Examples</h2>
<section class="example" id="example-1"><h3>Example 1</h3>
</section><section id="examples"><h2>事例</h2>
<section class="example" id="example-1"><h3>事例 1</h3>

<p>A music player is designed with custom controls that look like
musical notes that are stretched for volume, tone etc. The
programmer does not make the new control support the Accessibility
API. As a result - the controls cannot be identified or controlled
from AT. </p>
<p>ある音楽プレーヤーは、音量や音色などに合わせて伸縮する音符のようなカスタムコントロールを備えている。しかし、プログラマーは、この新しいコントロールがアクセシビリティ API に対応していないため、支援技術からコントロールを特定したり制御したりすることができない。</p>

</section>
</section><section id="resources"><h2>Related Resources</h2>
<p style="margin-bottom: 1.5em;"><em><small>No endorsement implied.</small></em></p>
</section><section id="resources"><h2>関連リソース</h2>
<p style="margin-bottom: 1.5em;"><em><small>推奨を意味するものではない。</small></em></p>



Expand All @@ -151,19 +139,15 @@ <h2 class="box-h box-h-icon">About this Technique</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> Using the accessibility checker for the technology (or if
that is not available, inspect the code using a browser's developer tools, or test with an
assistive technology), check the controls to see if they support
the accessibility API.</li>
<li>ウェブコンテンツ技術のアクセシビリティチェッカーを使用して (又は、それが利用できない場合は、ブラウザーの開発者ツールを使用してコードを検査するもしくは、支援技術を使用してテストして)、コントロールがアクセシビリティ API をサポートしているかどうかをチェックする。</li>
</ol>
</section>
<section class="results" id="expected-results"><h3>Expected Results</h3>
<section class="results" id="expected-results"><h3>期待される結果</h3>
<ul>
<li> If check #1 is false, then this failure condition applies and the
content fails this success criterion.</li>
<li>チェック 1 が偽である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。</li>
</ul>
</section>
</section>
Expand All @@ -183,14 +167,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:[email protected]?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D">[email protected]</a> or via GitHub</p>
<p>あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。</p>
<div class="button-group">
<a href="mailto:[email protected]?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 @@ -212,12 +195,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 @@ -228,12 +214,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 @@ -242,7 +228,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 @@ -256,7 +242,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 @@ -272,7 +258,7 @@ <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>