0
403
ViewsCómo arreglar Lighthouse "Los enlaces no tienen un nombre perceptible"
Lighthouse sugiere arreglar mi texto a href
tengo un html asi
<a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>Lo que realmente sucede aquí es que solo muestro la imagen dentro de un href usando la clase css:
.social-icon.twitter { background: url('../images/logo-twitter.png') no-repeat center center; } No puedo hacer <a....>Twitter</a> ya que en ese caso el texto mostrado destruirá la vista.
No puedo pensar en otra cosa como simplemente poner un span con un texto dentro de mi a y ocultarlo, por ejemplo, <a....><span class="hide">Twitter</span></a> pero me pregunto si hay alguna solución adecuada?
¿Alguna recomendación al respecto?
3 answers
Answer question0
Por razones de accesibilidad (requerido para lectores de pantalla) los enlaces deben contener un texto o tener una descripción en el atributo aria-label . En muchos casos de uso como el suyo, no desea agregar ningún texto en un enlace, sino utilizarlo como imagen o cualquier elemento gráfico envolvente.
Arréglalo agregando aria-label="Twitter" a tu a , como
<a href="https://twitter.com/@some-name-here" aria-label="Twitter" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>0
Si desea implementar esto en la aplicación de reacción, debemos agregar la propiedad aria-label a la etiqueta <a> .
Antes:
<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>Despué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>0
Para SlickNav La solución es bastante simple. Simplemente agregue el título al elemento del archivo Javascript que tiene el atributo aria-haspopup="true" y tabindex="0". Agregue un título como title="Cualquier cosa" en la línea mencionada anteriormente. Resolverá el problema. El ejemplo de trabajo es Oceanspace
Para otros problemas similares, debe agregar el atributo de título al elemento de anclaje respectivo
