CSS背景画像のalt属性

これは、私がこれまで取り組む必要がなかったものです。CSSのbackground-image属性で使用されているものを含め、サイト内のすべての画像でaltタグを使用する必要があります。

私の知る限り、このようなCSSプロパティはありません。これを行う最善の方法は何ですか？

背景画像は確かにデータを提示できます！実際、これは、ビジュアルアイコンの表示が同等のテキストブラブのリストよりもコンパクトでユーザーフレンドリーな場合に推奨されます。画像スプライトを使用すると、このアプローチのメリットが得られます。

ホテルリスティングのアイコンにアメニティが表示されることはよくあります。50のホテルが記載されたページを想像してください。各ホテルには10のアメニティがありました。CSS Spriteは、この種のものに最適です。高速であるため、ユーザーエクスペリエンスが向上します。しかし、これらの画像にALTタグをどのように実装しますか？サイトの例。

その答えは、altテキストをまったく使用せず、代わりtitleに包含divの属性を使用することです。

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

W3C（上記のリンクを参照）によると、title属性はalt属性とほとんど同じ目的を果たします

題名

title属性の値は、さまざまな方法でユーザーエージェントによってレンダリングされます。たとえば、ビジュアルブラウザーは、タイトルを「ツールヒント」（ポインティングデバイスがオブジェクト上で一時停止したときに表示される短いメッセージ）として頻繁に表示します。オーディオユーザーエージェントは、同様のコンテキストでタイトル情報を話すことができます。たとえば、リンクに属性を設定すると、ユーザーエージェント（視覚的および非視覚的）がリンクされたリソースの性質についてユーザーに伝えることができます。

代替

alt属性は、オブジェクトの同等のテキストを提供できるように、タグのセット（つまり、img、area、およびオプションで入力とアプレット用）で定義されます。

同等のテキストは、次の一般的な状況で、Webサイトとその訪問者に次の利点をもたらします。

• 現在、Webブラウザーは、非常にさまざまな機能を持つ非常にさまざまなプラットフォームで使用できます。画像をまったく表示できない、または限られた種類の画像のみを表示できないものもあります。画像を読み込まないように設定できるものもあります。コードの画像にalt属性が設定されている場合、これらのブラウザーのほとんどは、画像の代わりに指定した説明を表示します
• 一部のビジターは、視覚障害者、色覚障害者、視力障害者など、画像を見ることができません。alt属性は、ページの内容を把握するためにalt属性に依存できる人々にとって非常に役立ちます
• 検索エンジンボットは、上記の2つのカテゴリに属します。Webサイトのインデックスを作成するだけでなく、それに値する場合は、alt属性を使用して、ページの重要なセクションを見逃さないようにします。

このYahoo Developer Network（アーカイブリンク）の記事では、img要素とalt属性の代わりにbackground-image を絶対に使用する必要がある場合は、ARIA属性を次のように使用することをお勧めします。

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

この記事のユースケースでは、モバイルデバイスでパフォーマンスが大幅に向上したため、Flickrが背景画像の使用を選択した方法について説明します。

クリスチャンハイルマンのこの投稿を読んでください。彼は、背景画像があることを説明しONLY美学のために、現在のデータに使用すべきではないので、すべての画像に代替テキストを持たなければならないという規則を免除されています。

抜粋（鉱山を強調）：

CSSの背景画像。定義上は美的価値のみであり、ドキュメント自体の視覚的なコンテンツではありません。意味のある画像をページに配置する必要がある場合は、IMG要素を使用して、alt属性で代替テキストを指定します。

私は彼に同意します。

他の回答で述べたように、imgタグのdivタグには（サポートされている）alt属性はありません。

本当の問題は、なぜサイトのすべての背景画像にalt属性を追加する必要があるのかということです。この答えに基づいて、それはあなたがあなたのアプローチでどのルートを取るべきかを決定するのを助けます。

ビジュアル/テキスト：画像の読み込みに失敗した場合にユーザーにテキストフォールバックを追加するだけの場合は、title属性を使用します。ほとんどのブラウザーは、ユーザーが画像にカーソルを合わせると視覚的なツールヒント（メッセージボックス）を提供し、画像が何らかの理由で読み込まれなかった場合、画像が失敗したときにテキストを表示するalt属性と同じように動作します。この手法でも、画像を背景に設定したままにすることで、サイトで読み込み時間を短縮できます。

スクリーンリーダー：道の真ん中のオプションです。画像を背景として技術的に維持し、title属性のアプローチを使用すると、上記の「オーディオユーザーエージェントが同様のコンテキストでタイトル情報を話す可能性があります」のように機能するため、これは異なります。ただし、これはすべてのケースで機能することが保証されているわけではありません。最終的にこのアプローチを選択した場合は、スクリーンリーダーが確実に選択できるように、aria-labelsを追加することもできます。

SEO /検索エンジン：これが大きな問題です。私のような人なら、背景画像を追加しましたが、すべて良かったです。それから数か月後、顧客（または多分あなた自身）は、画像にaltを持たないことにより、プライムSEOゴールドを逃していることに気付きました。なお、title属性は検索エンジンに影響を与えません。私の研究から、ここでの記事で述べたように、：https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /。したがって、SEOを目指す場合は、alt属性を指定したimgタグが必要になります。考えられるアプローチの1つは、alt属性を持つ非常に小さな実際の画像をサイトにロードすることです。これにより、すべてのSEOを取得でき、既存のCSSを再調整する必要がありません。ただし、サイズによっては読み込み時間が長くなる可能性があり、Googleは実際にインデックス作成時に画像パスを確認します。つまり、このルートを使用する場合は、背景を使用する代わりに、何をすべきかを受け入れ、実際の画像を含めるだけです。

一般的には、意味のある意味のあるものには背景画像を使用してはならないので、これらの画像にaltデータを保存する適切な方法はありません。重要な質問は、その代替データをどのように処理するのですか？画像が読み込まれない場合に表示しますか？ページ上のいくつかのプログラム機能に必要ですか？意味のない構成済みのcssプロパティを使用してデータを任意に保存できます（エラーが発生する可能性がありますか？）または、画像とaltタグを持つ非表示の画像を追加し、背景画像が必要な場合は画像を比較できますパスを作成してデータを処理しますが、カスタムスクリプトを使用して必要なものをシミュレートします。ただし、ブラウザに背景画像のある種のalt属性を自動的に処理させる方法はありません。

これを実現するための古典的な方法は、テキストをdivに入れて、画像置換手法を使用することです。

<div class"ir background-image">Your alt text</div>

background-image beeingは、背景画像を割り当てるクラスであり、irは、以下のHTML5boilerplates画像置換クラスである可能性があります。

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

W3Cからのこの記事は、彼らがあなたが何をすべきか考えていることを教えてくれます ますhttps://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

ここに例があります http://mars.dequecloud.com/demo/ImgRole.htm

その中で

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

それでも、上記の例のように、背景画像を含む要素が空のコンテナーである場合、個人的にはテキストをそこに配置し、CSSを使用して非表示にすることを好みます。代わりに画像を表示する場所：

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

この種の問題に対する私の解決策は次のとおりです。

CSSで新しいクラスを作成し、画面外に配置します。次に、背景画像を呼び出すプロパティの直前にHTMLで代替テキストを配置します。任意のタグを指定でき、H1、H2、p、など

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

それはあなたに何が欲しいのかはっきりしない。

CSSプロパティでalt属性値をレンダリングする場合は、たとえば、CSS属性関数を探している可能性があります。

IMG:before { content: attr(alt) }

alt属性を背景画像に配置する場合、... alt属性はHTML属性であり、背景画像はCSSプロパティであるため、これは奇妙です。HTMLのalt属性を使用したい場合は、それに対応するHTML要素が必要になると思います。

なぜ「背景画像にaltタグを使用する必要がある」のですか？これは、意味上の理由のためか、または視覚効果の理由のためですか（そうであれば、どのような効果またはどのような理由ですか）？

これは、画像が表示される場所にaltタグを配置することで実現できdivます。

例：

<div id="yourImage" alt="nameOfImage"></div>