に、私はそこリンクウェーブアクセシビリティ評価ツール
<a href="example.com"><i class="myclass"></i></a>
<a href="http://www.google.com" class="cart visible-xs"><i class="t-icon t-icon-cart-xs-2"></i></a>
があるが、私はものの波アクセシビリティ・ツールから、アンカータグにテキストが含まれていないというエラーを見せているHTMLページを持っているエラーを示す一切テキストが含まれていません<a>タグ内に<i>タグを使用していますが、アンカータグ内には何も書き込めません。
あなたの気づいたとおり、あなたのリンクにはコンテンツが含まれていません。はい、i要素が含まれていますが、空です。
私はあなたがCSS経由で画像を追加すると仮定します。しかし、これはアクセス可能ではありません。 CSSをサポートしていないユーザーエージェント、または画像を認識できないユーザーはこのリンクを使用できません。
代わりに、alt属性を持つimg要素を使用する必要があります。これは装飾だけではない画像を含めるための正しい要素です。
あなたが画像を含むためにCSSを使用するを持っているする場合は、少なくとも（でなければならない場合には、視覚的に、CSSを経由して非表示にすることができる）a要素にテキストを提供する必要があります。 （そして、あなたshould not use the i elementこの目的のために。）
あなたはアンカータグ内に何かを書き込むことができない場合は、あなたがあなたのaタグにtitle属性を追加することができます。私は最高であることがわかってきた何
<a href="example.com" title="Visit example.com website"><i class="myclass"></i></a>
これを試しましたが、まだ動作していません –
オプションは、スパンタグを「sr-only」という名前のクラスに追加して、通常のユーザーからタグを非表示にしますが、スクリーンリーダーに表示させることができます。 （私はそれがブートストラップは、これらの状況を管理する方法だと思います。）ここでの例です：
<a href="example.com">
<i class="myclass"></i>
<span class="sr-only">Visit example.com</span>
</a>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</style>
あなたは両方がWCAG 2.0 Guideline 2.4.4 "Link Purpose (In Context)"に違反空のリンクが含まれてWAVE tool 2つの<a>要素によります。 WAVEツールから
：
「それは リンクにテキストが含まれていない何を意味するのか
リンクは、リンクのないテキスト、機能や目的が含まれていない場合それは を重要な理由。キーボードやスクリーンリーダーのユーザーに混乱を招く可能性があります。
修正する方法 空のリンクを削除するか、そのリンクの機能や目標を記述したリンク内のテキストを入力します。
アルゴリズム...英語 アンカー要素にはhref属性がありますが、テキストは含まれておらず、代替テキストの画像もありません。「
エラーを修正する簡単な方法はaria-label attribute<a>要素に追加することです：。。私はすでに実装されたHTMLを変更することはできません指示に従って
<a href="https://example.com" aria-label="first link"><i class="myclass"></i></a>
<a href="https://www.google.com" class="cart visible-xs" aria-label="second link"><i class="t-icon t-icon-cart-xs-2"></i></a>
私はちょうど波アクセシビリティ・ツールのエラーを削除する必要が –
@MdShoaibAlam：HTMLを変更できない場合は、これを修正することはできません。 – unor