web-dev-qa-db-ja.com

Lighthouse「リンクには識別可能な名前がありません」の修正方法

私のhrefテキストを修正する を提案している灯台

私はそのようなHTMLを持っています

<a href="https://Twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon Twitter grayscale"></a>

ここで実際に行われるのは、cssクラスを使用してhref内に画像を表示するだけです：

.social-icon.Twitter {
  background: url('../images/logo-Twitter.png') no-repeat center center;
}

その場合、表示されたテキストがビューを破壊するため、<a....>Twitter</a>を実行できません。

私はspanの中にテキストを含むaを入れて隠してしまうようなものは考えられませんが、例えば<a....><span class="hide">Twitter</span></a>ですが、適切な解決策があるのだろうか？

それについての推奨事項はありますか？

htmlcsslighthouse
17
sreginogemoh

アクセシビリティ上の理由から（スクリーンリーダーに必要）、リンクにはテキストが含まれているか、aria-label属性に説明が含まれている必要があります。あなたのような多くのユースケースでは、リンクにテキストを追加するのではなく、代わりに画像またはグラフィック要素のラッパーとして使用します。

a要素にaria-label="Twitter"を追加して修正します

<a href="https://Twitter.com/@some-name-here" aria-label="Twitter" target="_blank" rel="noopener" class="social-icon Twitter grayscale"></a>
34
Binyamin

次に、reactアプリでこれを実装する場合は、aria-labelプロパティを<a>タグに追加する必要があります。

前：

<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

後：

<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
2
KARTHIKEYAN.A