web-dev-qa-db-ja.com

Waveアクセシビリティ評価ツールでエラーを示すテキストがリンクに含まれていない

私はそこにあるHTMLページを持っています

<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>

しかし、Waveアクセシビリティツールから、アンカータグにテキストが含まれていないというエラーが表示されていますが、私は<i>タグ内の<a>タグですが、アンカータグ内には何も記述できません。

htmlhyperlinkaccessibility
12
Md Shoaib Alam

WAVEツール によると、2つの<a>両方の要素に空のリンクが含まれています WCAG 2.0ガイドライン2.4.4 "リンクの目的（コンテキスト内）" に違反しています。

WAVEツールから：

"意味リンクにテキストが含まれていません。

重要な理由リンクにテキストが含まれていない場合、リンクの機能または目的はユーザーに表示されません。これにより、キーボードとスクリーンリーダーのユーザーが混乱する可能性があります。

修正方法空のリンクを削除するか、リンク内にそのリンクの機能やターゲットを説明するテキストを入力します。

英語のアルゴリズム...アンカー要素にはhref属性がありますが、テキスト（またはスペースのみ）と代替テキストを含む画像は含まれていません。

エラーを修正する簡単な方法の1つは、 aria-label属性 から<a>要素：

<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>
17
user

私が最良のオプションであるとわかったのは、通常のユーザーからはタグを隠し、スクリーンリーダーはそれを表示できるようにする「sr-only」という名前のクラスを持つspanタグを追加することです。 （私はそれがBootstrapがこれらの状況を管理する方法であると思います。）ここに例があります：

<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>
8
Ricardo Andres

お気づきのとおり、リンクにはコンテンツが含まれていません。はい、i要素が含まれていますが、空です。

CSS経由で画像を追加したいと思います。しかし、これにはアクセスできません。 CSSサポートのないユーザーエージェント、または画像を認識できないユーザーは、このリンクを使用できません。

代わりに、img要素とそのalt属性を使用する必要があります。これは、単なる装飾ではない画像を含めるための正しい要素です。

画像を含めるためにCSSを使用するhave場合は、少なくともa要素にいくつかのテキストを提供する必要があります（視覚的にはCSSで非表示にする必要がある場合）。 （そして、あなたは i要素を使用すべきではありません この目的のために。）

1
unor

アンカータグ内に何も記述できない場合は、title属性をaタグに追加できます。

  <a href="example.com" title="Visit example.com website"><i class="myclass"></i></a>
0
Adam