web-dev-qa-db-ja.com

FontAwesomeのアクセシビリティの問題。 <i>の代わりに<em>タグを使用します

HTMLコードマークアップがアクセシビリティ標準に準拠しているかどうかをテストしています： http://achecker.ca/checker/index.php 。以下は私が得るエラーです：

修復：i要素をemまたはstrongに置き換えます。

<i class="fa fa-search" title="Search"></i> <span class="sr-only">Search</span>

アクセシビリティに関する公式のFontAwesomeドキュメント（ https://cdn.fontawesome.com/help#qa-autoa11y ）を調べましたが、別の方法を使用する必要があるという言及は見つかりませんでした。アイコンのタグ。これについて何かアイデアはありますか？

htmlcssfont-awesomewcag2.0
9
sdvnksv

一般的なガイドラインとして、イタリックテキストは通常​​強調を意味するためにのみ使用されるため、イタリックテキストではemではなくiを使用する必要があります。

この場合、iconにiを使用していますが、これは意味がありません（そしてアクセシビリティチェックツールを混乱させます）。代わりにspanを使用してください。不適切なセマンティクスは含まれていません。

13
Quentin

厳密でセマンティックなHTMLでは、フォントアイコンにspansのタグを付ける必要があります。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>

Font Awesome examples 省略形のコーディングのため、<i>（イタリックタグ）とともに表示されます。それだけ。

3
Miquel Al. Vicens

<em>要素は、その内容のストレス強調を表します。

特定の単語に重点を置いていない場合は、<i>を使用する必要があります。

<i>要素は、プレゼンテーションの目的でより適切に使用されます。

<i>を使用して、引用をマークアップできます。フレーズや段落全体を強調するのではなく、それを区別したり、メインテキストからオフセットしたりできます。

http://www.silkstream.net/blog/2016/02/b-vs-strong-i-vs-em-whats-the-difference.html

あなたの例では、<em>の使用を提案するかもしれません。なぜなら、いくつかの特殊なアクセシビリティソフトウェアがそれらをより強調して処理するかもしれないからです。

1
Herbs