diff --git a/techniques/failures/F3.html b/techniques/failures/F3.html index 4f474a297..33a16f59a 100644 --- a/techniques/failures/F3.html +++ b/techniques/failures/F3.html @@ -1,7 +1,6 @@ -
このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。[ WCAG 2.1 達成方法集 ]
- This technique relates to + このテクニックは -1.1.1: Non-text Content -(Failure).
This failure applies to all technologies that support CSS.
この失敗例は、CSS をサポートする全ての技術に適用される。
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).
CSS の background-image プロパティは、HTML コード内での参照なしに、画像を CSS で文書に含める方法を提供する。CSS の background-image プロパティは装飾のために使用するものであるため、CSS で組み込まれる画像にテキストによる代替を付けることはできない。テキストによる代替は、重要な情報を伝える画像を見ることのできない人にとって必須のものである。したがって、このプロパティを重要な情報を伝える画像を追加するために使用した場合は失敗例となる。この失敗は、背景画像が HTML の style 属性で宣言された場合、及び背景画像宣言がクライアントスクリプトで動的に作成された場合 (下の失敗例 3: を参照) にも同様に適用される。
Note
注記
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.
背景画像の中に情報を組み込むことは、読みやすくする目的で背景を変えている人や、OS のハイコントラストモードの利用者に対しても問題を引き起こす。これらの利用者は、代替テキストが存在しないことで背景画像に含まれている情報を失うことになる。
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."
以下の例では、コンテンツの一部として CSS によってのみ表示させられている画像が含まれている。その画像 (TopRate.png) は 180×200 ピクセルで + "19.3% APR Typical Variable." というテキストを含んでいる。
p#bestinterest { padding-left: 200px; background: transparent url(/images/TopRate.png) no-repeat top left; }
It is used in this excerpt:
これは次の抜粋コードで使用される:
<p id="bestinterest">Where else would you find a better interest rate?</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.
The CSS contains:
ある書籍販売業者は、「新刊」「限定版」「在庫あり」「在庫なし」を示すためのアイコンとして背景画像を使用している。
CSS 内:
ul#booklist li { padding-left: 20px; @@ -154,7 +139,7 @@ Example 2 }
<ul id="booklist"> <li class="new">Some book</li> @@ -165,12 +150,12 @@ Example 2 </ul>
Using the code from example 1, the same background image is declared in the HTML style attribute:
事例 1 のコードで使用されている、同じ背景画像が HTML style 属性で宣言されている:
<p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;"> Where else would you find a better interest rate?<p>
In the following code, the background image declaration is created in a client script:
次のコードでは、背景画像の宣言がクライアントスクリプト内で作成されている:
<script> var newP = document.createElement('p'); var newPText = document.createTextNode('Where else would you find a better interest rate?'); @@ -182,22 +167,20 @@ Example 3
Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list public-agwg-comments@w3.org or via GitHub
あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。
この文書は、2025 年 5 月 21 日付けの Techniques for WCAG 2.2 を、ウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。 +
この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。