アイコンのないテキストのリンクeslintのエラー

Question

私はそれぞれのサイトのアイコンだけであるソーシャルメディアリンクの束を示すReactプロジェクトを持っています。私はソーシャルメディアのアイコンを表示するアイコンクラスを提供するためにicomoonフォントなどを使用します。

私が得るエラーは、当然のことながら、次のとおりです。

Anchors must have content and the content must be accessible by a screen reader

私は何もなく、アイコンとテキストなしを望んでいないこのシナリオでは何をすべき？誰もが幸せになるようにこれを正しく行う方法がわかりません。

編集

それは本当に何にも関係しないので、私はコードが必要だったとは思いませんでした。

リンクを吐き出すマッピングは次のとおりです。ご覧のとおり、テキストはありません。

になり

{this.props.siteInfo.social.map(function(item, i){ 
    return <a key={i} className={`nav_item icon-${item.social_media_type}-square`} href={item.url} target="_blank" rel="noopener noreferrer"></a> 
})} 

：ソーシャルメディアサイトはにリンクされているもののためだけのフォント、アイコン

<a key="0" class="nav_item icon-facebook-square" href="facebook.com/someprofile" target="_blank" rel="noopener noreferrer"></a>

Answer 1

私はここに私の答えを見つけた：

https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/

それをdisplay:none;やそれ以外のものではなく、CSSで隠すことのできるテキストを追加する必要があるようですt。スクリーンリーダーはそれを無視します。

これが最新の方法であるかどうかはわかりませんが、動作してアクセシビリティを達成しています。