iタグのAltまたはtitle属性

Question 1

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

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

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

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

Question 2

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

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

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

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

Question 3

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

Question 4

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

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

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

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

Question 5

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

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

Question 6

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