1

作業中のサイトを WCAG 2 に準拠させようとしています。このサイトは画像スプライトを使用しており、画像スプライトの使用を全体で置き換えるのは困難です。そのため、次の手法かどうかを判断しようとしています。

<div style="background: url(flower.png); height: 20px; width:20px;">  
  <div style="text-indent: 100%; white-space: wrap; overflow: hidden">
    A red rose
  </div>
</div>

十分に準拠しています。ドキュメントを読むと...不明です。

非装飾imgタグの使用altは間違いなく要件です: H37: img 要素で alt 属性を使用する

mediaobjectの場合は、コンテンツのラッピングで十分です: H53: Body of Object

divしかし、飾り気のないイメージのaaのボディを使ってbackground合格するかどうかは、あまり明確ではありません。

誰かがこれについて話すか、標準の関連ページを教えてもらえますか?

4

1 に答える 1

5

これにはいくつかのシナリオが考えられます。アドバイスは、次の場合に応じて異なります。

  1. コンテンツ画像 (ギャラリーなど)
  2. ナビゲーションやツールバー オプションなどの機能要素。

それらがコンテンツ画像（「赤いバラ」が意味する）である場合、この手法が適用されると思います： http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/C30.html

その場合、人々が代替テキストを読むために画像なしでそれを表示できれば、あなたのアプローチは WCAG を満たすでしょう。奇妙に聞こえるかもしれませんが、支援技術は alt 属性を読み取る方法を以前から知っていましたが、画像の置換はさまざまな方法で行うことができ、いつ使用されたのかを認識できない場合があります。

スクリーン リーダーのユーザーはおそらく問題ないと思うでしょうが、代替テキストを必要とする他のグループは、20x20 ピクセルのボックス内のテキストを読み取ることができないでしょう。たとえば、Windows でハイ コントラスト モードをオンにすると、背景の CSS イメージが削除され、テキストが表示されなくなります。

それらが機能的な要素であり、画像が「保存」ボタンなどのアイコンである場合、目に見える（ツールチップなど）プログラムラベルが必要です。その場合、次のことをお勧めします。

<div style="background: url(flower.png); height: 20px; width:20px;" 
role="button" aria-label="Save" title="Save" tabindex="0"></div>

ただし、さまざまな状況ではるかに堅牢であるため、フォアグラウンド イメージまたはフォント アイコンを使用することをお勧めします。たとえば、font-icon を含めた場合は、次のように使用できます。

 <button>
  
      <span class=”icon-save” aria-hidden="true"></span>
  
      <span class=”alt”&gt;Save</span>
    
 </button>

CSS として次のようなものを使用すると、使用する正しいフォントが既にインポートされていると仮定します。

    .icon-save:before {

       font-family: icons;
      
       content: &#x21dd; /* whatever your icon reference is */
    
    }

 .alt {
  position: absolute;
 left: -9999px;}
于 2013-12-10T18:31:37.360 に答える