11

たとえば、いくつかのフォントの素晴らしいアイコンがあるサイトがあるとします。

<i class="fa fa-fw fa-cloud "></i>

これを WCAG 2.0 バリデーターで実行すると、次のエラーが表示されます。

Success Criteria 1.4.4 Resize text (AA)

  Check 117: i (italic) element used. 

  Repair: Replace your i elements with em or strong. 

  Error Line 185, Column 158: 

    <i class="fa fa-fw fa-cloud"></i>

非セマンティックな対応するandの代わりに<em>andが使用されることを保証するためにあるため、この場合、ルールは実際には適用されるべきではないことを認識しています。しかし、すべての WCAG2.0 ボックスをチェックする必要があるクライアントを使用している場合、問題は依然として存在します。<strong><i><b>

だから、誰もが適切な方法を知っていますか。代わりに変更する必要が<em>ありますが、スクリーン リーダーに問題はありますか? 他の提案は大歓迎です！

4

4 に答える 4

24

まず、 HTML5 ではセマンティックな意味<i> があります (ただし、それ以前は表示のみでした)。HTML5 を使用していると仮定すると、使用しているバリデーターは、すべての出現を<i>不適切としてフラグ付けするのが間違っています。

第二に、変化

<i class="fa fa-fw fa-cloud"></i>

に

<span class="fa fa-fw fa-cloud"></span>

良いですが、実際のアクセシビリティの問題は解決しません。つまり、アイコンに代わるテキストがないということです (少なくとも、そうではないようです)。<a>議論のために、fa-cloud アイコンがタグ内にあると仮定しましょう。このようなもの (Bootstrap のsr-onlyCSS クラスを使用):

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    <span class="sr-only">Download</span>
</a>

またはこのように (WAI-ARIA のaria-label属性を使用して):

<a href="..." aria-label="Download">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>

が解決策です。さらに簡単なのは、テキストを全員に表示することです。

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    Download
</a>
于 2014-12-18T03:12:55.720 に答える
8

font-awesome doc から:

CSS プレフィックス fa とアイコンの名前を使用して、Font Awesome アイコンをほぼどこにでも配置できます。Font Awesome は、インライン要素で使用するように設計されています (簡潔にするために 'i' タグを使用しますが、意味的には 'span' を使用する方がより正確です)。

そのため、「span」の「i」タグを変更してみてください。

于 2014-12-09T17:03:57.760 に答える
2

iタグ内のコンテンツが意味的に何であるかに大きく依存します。WCAG2.0 は一連のガイドラインであり、厳格なルールではありません。

HTML5仕様によると：

i 要素は、テキストのスパンを別の声またはムードで表すか、分類上の指定、専門用語、別の言語の慣用句、音訳など、テキストの異なる品質を示す方法で通常の散文からオフセットするかを表します。 、思考、または西洋のテキストの船名。

出典: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element

コンテンツが「強調」する必要があるものである場合は、emすべてのユーザー エージェントで意味的に正しいタグを使用しないでください。動物のラテン語の技術名を持つ仕様の例は、イタリック体で強調されていないものの完璧な例です (視覚的には同じに見えますが)。

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

スタイルは次のとおりです。

Felis silvestris catusはかわいいです。

したがって、テキストが「イタリック」であるが強調されていない理由を正当化できる場合は、そのままにしておくか、意味的に適切なタグに変更してください。

于 2014-05-14T05:37:41.523 に答える
0

danielnixon の回答に追加 (+1): fontawesome アイコンを UI (リンク、ボタンなどではなく) の装飾として使用する場合は、wai-aria 属性を持つスパンを追加します。 

<span class="fa fa-small-arrow" role="presentation"></span>

于 2015-08-04T16:18:16.107 に答える