86

私はfont-awesomeを使用し、次のようにフォントを表示します。

<i class="icon-lock"></i>

これにより、素敵な小さなロック記号が表示されます。ユーザーがそれが正確に何を意味するのかを知るために、私はtitleやaltなどの属性を追加しようとしましたが、役に立ちませんでした。

<i>画像のaltやリンクのタイトルと同じタスクを実行するタグに使用できる属性はありますか？

4

5 に答える 5

162

他の要素と同様titleに、要素の属性を使用できます。i

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

それが役立つかどうかは、より難しい問題です。ブラウザは通常、titleマウスオーバー時に属性値を「ツールチップ」として表示しますが、ユーザーがアイコンの上にマウスを置くのはなぜですか？そして、そのようなツールチップは使い勝手が悪いです。いわゆるCSSツールチップの方がうまくいくことがよくあります。

スクリーンリーダーは、ユーザーにtitle属性へのオプションのアクセスを許可する場合がありますが、コンテンツが空の要素をどのように処理するかはわかりません。

于 2012-07-31T18:45:58.047 に答える
14

WAI-ARIAの進歩により、フォントアイコンを使用する場合、アクセシビリティを向上させるために、おそらく次の組み合わせを使用する必要があります。

  • 要素の暗黙のネイティブロールセマンティクスを削除するためのロールプレゼンテーション。これは、ネイティブセマンティクスを持つ要素を（ab）使用してアイコンを提供する場合に特に重要です。これは、i要素を使用する例の場合です（仕様によれば、「代替音声でテキストのスパンを表します」または気分[...]"）。
  • 要素にラベルを付ける文字列値を提供するaria - label-または-ブラウザにカーソルを合わせたときにツールチップを表示しても問題がない場合は、ネイティブHTMLタイトル属性。
  • 生成されたコンテンツを支援技術から隠すためのaria-hidden属性（アイコンフォントファミリーを使用しているため、生成された文字：before of：afterがあります）。仕様によると：

作成者は、このコンテンツを非表示にする行為が冗長または無関係なコンテンツを削除することによって支援技術のユーザーのエクスペリエンスを向上させることを目的としている場合にのみ、注意してaria-hiddenを使用して視覚的にレンダリングされたコンテンツを支援技術から非表示にすることができます。aria-hiddenを使用してスクリーンリーダーから表示コンテンツを非表示にする作成者は、同一または同等の意味と機能が支援技術に公開されていることを確認する必要があります。

あなたの正確な使用例はわかりませんので、電話番号を提供するというより単純な使用例を自由に使用します。優先度の高い順に、次を使用します。

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span class="icon-phone" 
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

aria-label属性とtitle属性は、要素のコンテンツを説明する必要があることに注意してください。次の兄弟要素ではありません。したがって、次の解決策は仕様に準拠していないように感じます（ほとんどのアクセシビリティツールは、実際には電話番号が要素内にある場合と同じように観察可能な動作をします）：span

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576
于 2016-01-29T16:39:47.377 に答える
7

<span>代わりに、それらの線に沿ってまたは何かを使用する必要があります。title=""それがあなたが探しているものであるならば、あなたはホバーにいくつかのテキストを与えるために属性を使うことができます。スクリーンリーダーへのアクセス可能性、つまりSEO値を提供する限り、次のCSSを追加できます。

.icon-lock{
    text-indent:-99999px;
}

そして、次のようにマークアップを記述します。

<span class="icon-lock">What I want the screen reader to say</span>
于 2012-07-31T18:30:19.520 に答える
3

<i>タグはテキストをマークアップするためのものです。このタグのセマンティックな意味を、イタリックを使用して関係のないものに変更しています（イタリックタグでさえ悪い考えです）。代わりに使用する必要がありますSPAN。

イタリック体の要素はalt属性をサポートしていませんが、IMG要素はサポートしています。属性が必要な場合ALTは、画像を使用してください。

于 2012-07-31T18:32:12.343 に答える
2

画像のように機能するフォントの役割は、role="img"に予約する必要があると思います。これは、aria-label="alt-text"で使用できます。これは、ARIAアクセシブルネームアルゴリズムのために機能します。参照：Imgロールを使用したAriaテクニック。

于 2018-08-27T19:19:29.087 に答える