web-dev-qa-db-fra.com

Comment réparer Lighthouse "Les liens n'ont pas de nom visible"

Phare suggérant de corriger mon texte href

J'ai un html comme ça 

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

Ce qui se passe réellement, c’est que je viens d’afficher l’image dans un href en utilisant la classe css:

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

Je ne peux pas faire <a....>Twitter</a> car dans ce cas, le texte affiché détruirait la vue. 

Je ne peux penser à rien d'autre que de simplement mettre une span avec un texte dans ma a et de le masquer, par exemple <a....><span class="hide">Twitter</span></a>, mais je me demande s'il existe une solution appropriée?

Des recommandations à ce sujet?

htmlcsslighthouse
8
sreginogemoh

Pour des raisons d'accessibilité (obligatoire pour les lecteurs d'écran), les liens doivent contenir un texte ou avoir une description dans l'attribut aria-label. Dans de nombreux cas d'utilisation tels que le vôtre, vous ne souhaitez pas ajouter de texte dans un lien, mais plutôt utiliser comme image ou tout wrapper d'élément graphique.

Corrigez-le en ajoutant aria-label="Twitter" à votre élément a, comme

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

Si vous souhaitez implémenter cela dans Reapp Application, vous devez ajouter aria-label property à la balise <a>.

Avant: 

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

Après: 

<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>
1
KARTHIKEYAN.A