私の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>
ですが、適切な解決策があるのだろうか?
それについての推奨事項はありますか?
アクセシビリティ上の理由から(スクリーンリーダーに必要)、リンクにはテキストが含まれているか、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>
次に、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>