4

>リンクを派手な画像の矢印に置き換えたいとします。そのために、CSSスプライトを使用したいと思います。

多くの記事、たとえばSmashing Magazineの最近の（2012）記事では、推奨される方法は次のようなものです。

  • HTML：

    <a href="/article/123" class="nextLink">&gt;</a>

  • CSS：テキストを非表示にし、背景としてスプライトを指定します

ただし、この方法はアクセシビリティに関して問題があります。画像が無効になっているがCSSが解釈されている場合、上記のリンクは表示されません。

興味深いことに、私はPaciello Groupによる古い（2010）記事を見つけました。これは、良い解決策のように見えるものを提案しています。アイデアは、置き換えられるテキストの横に配置することです。には背景画像があり、テキストの上に配置されます。画像が読み込まれると、テキストが置き換えられます。それ以外の場合、テキストは引き続き表示されます。<span><span>

この方法が広く採用されていないのはなぜですか？その解決策に問題はありますか？

4

1 に答える 1

5

主な欠点は、CSS スプライトが読み込まれる前に、特別なアクセシビリティの必要がないユーザーにテキストを表示することです。コードに関しては、aria-labelソリューションを使用する場合ほど意味的にクリーンではない可能性もあります (以下で説明します)。

要素に ARIA ラベルを使用することを検討できます。

このaria-label属性は、現在の要素にラベルを付ける文字列を定義するために使用されます。テキスト ラベルが画面に表示されない場合に使用します。

https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Gmail と Facebook がこの問題 (テキストのないボタン) にどのように取り組んでいるかを簡単に確認しました。

  • Gmail では、「前へ」ボタンには「古い」の aria-label があります。
  • Facebook では、右上の「歯車」アイコンに「アカウント設定」というテキストがインデントされています -5000em
于 2013-01-17T13:29:39.663 に答える