Skip to content

F3の翻訳 #1386

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
momdo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

F3の翻訳 #1386

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
125 changes: 55 additions & 70 deletions techniques/failures/F3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +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>F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
important information | WAI | W3C</title>
<title>F3: 達成基準 1.1.1 の失敗例 － 重要な情報を伝える画像を付加するために、CSS を使用している | 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 @@ -10,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 @@ -52,86 +49,74 @@

<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">
<!-- 日本語訳されるまでの一時的な注記 -->
<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 F3:</span>Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
important information</h1>

<h1><span>テクニック F3:</span>達成基準 1.1.1 の失敗例 － 重要な情報を伝える画像を付加するために、CSS を使用している</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/non-text-content">1.1.1: Non-text Content</a>
(<strong>Failure</strong>).</p>
<a href="https://waic.jp/translations/WCAG22/Understanding/non-text-content">1.1.1: 非テキストコンテンツ</a>
(<strong>失敗</strong>) に関連する。</p>




<p>This failure applies to all technologies that support CSS.</p></div>
<p>この失敗例は、CSS をサポートする全ての技術に適用される。</p></div>
</section>


<section id="description"><h2>Description</h2>
<p> The CSS background-image property provides a way to include images in the
document with CSS without any reference in the HTML code. The CSS
background-image property was designed for decorative purposes and it is not
possible to associate text alternatives with images that are included via
CSS. Text alternatives are necessary for people who cannot see images that
convey important information. Therefore, it is a failure to use this
property to add images to convey important information. This failure would apply equally in a case where the background image was declared in the HTML style attribute, as well as in a case where the background image declaration was created dynamically in a client script (see example 3 below).</p>
<section id="description"><h2>解説</h2>
<p>CSS の background-image プロパティは、HTML コード内での参照なしに、画像を CSS で文書に含める方法を提供する。CSS の background-image プロパティは装飾のために使用するものであるため、CSS で組み込まれる画像にテキストによる代替を付けることはできない。テキストによる代替は、重要な情報を伝える画像を見ることのできない人にとって必須のものである。したがって、このプロパティを重要な情報を伝える画像を追加するために使用した場合は失敗例となる。この失敗は、背景画像が HTML の style 属性で宣言された場合、及び背景画像宣言がクライアントスクリプトで動的に作成された場合 (下の失敗例 3: を参照) にも同様に適用される。</p>
<div class="note">
<p class="note-title marker">Note</p>
<p class="note-title marker">注記</p>
<div>
<p>Embedding information into a background image can also cause problems for people who use alternate backgrounds in order to increase legibility and for users of high contrast mode in some operating systems. These users, would lose the information in the background image due to lack of any alternative text.</p>
<p>背景画像の中に情報を組み込むことは、読みやすくする目的で背景を変えている人や、OS のハイコントラストモードの利用者に対しても問題を引き起こす。これらの利用者は、代替テキストが存在しないことで背景画像に含まれている情報を失うことになる。</p>
</div>
</div>
</section><section id="examples"><h2>Examples</h2>
</section><section id="examples"><h2>事例</h2>
<section class="example" id="example-1">
<h3>Example 1</h3>
<h3>事例 1</h3>

<p> In the following example, part of the content is contained in an
image that is presented by CSS alone. In this example, the image
TopRate.png is a 180 by 200 pixel image that contains the text,
"19.3% APR Typical Variable." </p>
<p>以下の例では、コンテンツの一部として CSS によってのみ表示させられている画像が含まれている。その画像 (TopRate.png) は 180×200 ピクセルで
"19.3% APR Typical Variable." というテキストを含んでいる。</p>
<pre xml:space="preserve"><code class="language-css">p#bestinterest {
padding-left: 200px;
background: transparent url(/images/TopRate.png) no-repeat top left;
}</code>
</pre>
<p> It is used in this excerpt: </p>
<p>これは次の抜粋コードで使用される:</p>

<pre xml:space="preserve"><code class="language-html">&lt;p id="bestinterest"&gt;Where else would you find a better interest rate?&lt;/p&gt;</code>
</pre>
</section>
<section class="example" id="example-2">
<h3>Example 2</h3>
<h3>事例 2</h3>

<p> A book distributor uses background images to provide icons against a
list of book titles to indicate whether they are new, limited,
in-stock, or out of stock. </p>
<p>The CSS contains: </p>
<p>ある書籍販売業者は、「新刊」「限定版」「在庫あり」「在庫なし」を示すためのアイコンとして背景画像を使用している。</p>
<p>CSS 内:</p>

<pre xml:space="preserve"><code class="language-css">ul#booklist li {
padding-left: 20px;
Expand All @@ -154,7 +139,7 @@ <h3>Example 2</h3>
}</code>
</pre>

<p>It is used in this excerpt: </p>
<p>これは次の抜粋コードで使用される:</p>

<pre xml:space="preserve"><code class="language-html">&lt;ul id="booklist"&gt;
&lt;li class="new"&gt;Some book&lt;/li&gt;
Expand All @@ -165,12 +150,12 @@ <h3>Example 2</h3>
&lt;/ul&gt;</code></pre>
</section>
<section class="example" id="example-3">
<h3>Example 3</h3>
<h3>事例 3</h3>

<p>Using the code from example 1, the same background image is declared in the HTML style attribute:</p>
<p>事例 1 のコードで使用されている、同じ背景画像が HTML style 属性で宣言されている:</p>
<pre xml:space="preserve"><code class="language-html">&lt;p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;"&gt;
Where else would you find a better interest rate?&lt;p&gt;</code></pre>
<p>In the following code, the background image declaration is created in a client script:</p>
<p>次のコードでは、背景画像の宣言がクライアントスクリプト内で作成されている:</p>
<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
var newP = document.createElement('p');
var newPText = document.createTextNode('Where else would you find a better interest rate?');
Expand All @@ -182,22 +167,20 @@ <h3>Example 3</h3>
</section>
</section>

<section id="related"><h2>Related Techniques</h2><ul>
<section id="related"><h2>関連テクニック</h2><ul>
<li><a href="../html/H37">H37: Using alt attributes on img elements</a></li>
</ul></section>
<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> Examine all images added to the content via CSS, HTML style attributes, or dynamically in script as background images. </li>
<li> Check that the images do not convey important information. </li>
<li>If an image does convey important information, the information is
provided to assistive technologies and is also available when the CSS image is
not displayed.</li>
<li>CSS、HTML style 属性、又はスクリプトで動的に背景画像としてコンテンツに追加されている全ての画像を検査する。</li>
<li>画像が重要な情報を伝えていないことをチェックする。</li>
<li>画像が重要な情報を伝えている場合、その情報は支援技術にも伝えられ、かつ CSS による画像が表示されない場合でも伝えられるようになっている。</li>
</ol>
</section>
<section class="results" id="expected-results"><h3>Expected Results</h3>
<section class="results" id="expected-results"><h3>期待される結果</h3>
<ul>
<li> If checks #2 and #3 are both false, then this failure condition applies and the content fails this Success Criterion. </li>
<li>チェック 2 と #3 の両方が偽である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。</li>
</ul>
</section>
</section>
Expand All @@ -217,14 +200,13 @@ <h3>Example 3</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:[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 @@ -246,12 +228,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 @@ -262,12 +247,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 @@ -276,7 +261,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 @@ -290,7 +275,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 @@ -306,7 +291,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>