web-dev-qa-db-ja.com

iタグのAltまたはtitle属性

font-awesome を使用して、そのようなフォントを表示します。

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

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

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

htmltagsfont-awesome
70
dchacke

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

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

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

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

135
Jukka K. Korpela

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

  • ロール プレゼンテーション は、要素の暗黙的なネイティブロールセマンティクスを削除します。これは、 i 要素を使用する例の場合のように（ab）、仕様に従って」は、代替音声またはムードのテキスト範囲を表します[...]」）。
  • aria-label 要素にラベルを付ける文字列値を提供する-or-ネイティブHTML title 属性ホバーすると、ブラウザにツールチップが表示された状態で[OK]をクリックします。
  • aria-hidden 生成されたコンテンツを支援技術から隠す属性アイコンフォントファミリを使用しているため、生成された文字：before of：後）。仕様によると：

著者は、注意してaria-hiddenを使用して、視覚的にレンダリングされたコンテンツを支援技術から隠すことができます。冗長または無関係なコンテンツを削除します。 aria-hiddenを使用してスクリーンリーダーから可視コンテンツを隠す著者は、同一または同等の意味と機能が支援技術にさらされることを保証しなければなりません。

私はあなたの正確なユースケースを知らないので、電話番号を提供するより単純なケースを使用する自由を取ります。優先順位の降順で、[〜＃〜] i [〜＃〜]は次を使用します。

<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属性はcontent要素の。次の兄弟要素ではありません。 [〜＃〜] i [〜＃〜]次の解決策は仕様に従ってnotのように感じます（偶数電話番号が実際にspan要素内にあるかのように、ほとんどのアクセシビリティツールが実際に同じ観察可能な動作を持つ場合：

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576
9
Sylvain Leroux

代わりに<span>またはそれらの行に沿ったものを使用する必要があります。 title=""属性を使用して、ホバーにテキストを表示できます（探している場合）。スクリーンリーダーへのアクセス可能性またはSEO値を提供する限り、次のCSSを追加できます。

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

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

<span class="icon-lock">What I want the screen reader to say</span>
7
Chris Sobolewski

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

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

3
Diodeus - James MacFarlane

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

0
NoseToThePage