1

Tengo el siguiente problema y he mirado por Google horas y horas, pero no me encuentro con una solución. Cuando utilizo el inspector de Google AUDITS, para ver el desempeño, accesibilidad, etc. me aparece lo siguiente:

Links must have discernible text

<a id="facebook" href="https://www.facebook.com/" target="_blank"></a>

Si creo un enlace sin texto, ¿no es posible? ¿existe alguna solución?

Un saludo!

3 respuestas 3

3

Cuando utilizo el inspector de Google AUDITS, para ver el performance, accessibility, etc. Me aparece lo siguiente: Links must have discernible text

Qué es el error

Para una Web Accesible la W3C recomienda seguir las recomendaciones de WCAG.

§ Guideline 1.1

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

WCAG dice que una URL por sí misma no es bastante descriptiva. El autor del sitio DEBERÍA proveer una descripción del enlace ya sea através de un anchor o a través de un alt

Para ver ejemplos, puedes ir a este enlace

Por qué el error

Estás utilizando una herramienta que analiza la accesibilidad del sitio. Toda herramienta que trabaje como validor de especificaciones DEBE garantizar que el documento esté de acuerdo a las especificaciones y/o recomendaciones. En caso de no estarlo, la herramienta DEBE notificar al autor, puesto que de no hacerlo es lo mismo a indicar que el documento sigue las especificaciones lo cuál no es cierto.

§ 2.2.1. Conformance classes

Conformance checkers must check that the input document conforms when parsed without a browsing context (meaning that no scripts are run, and that the parser’s scripting flag is disabled), and should also check that the input document conforms when parsed with a browsing context in which scripts execute, and that the scripts never cause non-conforming states to occur other than transiently during script execution itself.

Conclusión

Debes colocar una descripción a tu enlace si es que quieres que sea accesible por una gran variedad de usuarios, la descripción debe estar presente en cualquier momento incluso sin soporte de JavaScript.

El siguiente código no sigue las recomendaciones de WCAG, ya que no establece ningún título descriptivo del enlace.

<a id="facebook" href="https://www.facebook.com/" target="_blank"></a>

En cambio el siguiente sí lo hace, ya que puedes ver el texto "facebook" pincharlo e ir al sitio.

<a id="facebook" href="https://www.facebook.com/" target="_blank">
    facebook
</a>

Recuerda que WCAG está pensado para usuarios con algún tipo de discapacidad, ya sea visual, auditiva entre otras. Si la naturaleza de tu Web no puede dar soporte a dichos usuarios, entonces puedes ignorar la advertencia, ya que aunque quieras hacer algo por éstos usuarios sencillamente no está en tu disposición poder hacerlo ej: Un videojuego no podría ser accesible por un usuario ciego, por mucho esfuerzo que se invierta.

Utilizando fontawesome y Bootstrap

Para fontawesome, siempre se recomienda definir las clases de font-awesome en un elemento inline, el elemento inline no debe tener anchor. Lo habitual es utilizar span para definir un ícono font-awesome.

Respecto a la accesibilidad del enlace deberás utilizar ya sea aria o indicar un title

En lugar de

<a class="fa fa-facebook"></a>

Deberás hacer

<a class="btn btn-link" aria-label="Ir a Facebook"><span class="fa fa-facebook" /></a>

o bien

<a class="btn btn-link" title="Ir a Facebook"><span class="fa fa-facebook"/></a>
4
  • El problema es que no quiero agregar texto, porque tengo un icono de facebook, utilizando font awesome. el enlace es el siguiente: <ul class="social-icons"> <li> <a id="facebook" href="facebook.com" target="_blank" rel="noopener noreferrer" class="fa fa-facebook fa-3x"></a> </li> <li> <a id="twitter" href="twitter.com" target="_blank" class="fa fa-twitter fa-3x"></a> </li> </ul>
    – Bob
    Commented el 10 dic. 2017 a las 2:02
  • @Bob deberás utilizar aria, o algún equivalente nativo de HTML, en el caso de aria sería aria-label en el caso de html core title. He actualizado mi respuesta para que veas. Commented el 10 dic. 2017 a las 2:26
  • wuooo que crack! Me pasado días, horas buscando la respuesta. Es más, le pregunte a mi profesor y tampoco daba con la respuesta. Era agregrar aria-label="Ir a Facebook" Muchas gracias!
    – Bob
    Commented el 10 dic. 2017 a las 10:17
  • También podrías poner el texto en un span y posicionarlo de manera absoluta fuera del enlace para que no se vea pero sí lo detecten los lectores de pantalla. Esa manera siempre me ha parecido la más accesible posible.
    – Alvaro Montoro
    Commented el 14 dic. 2017 a las 17:11
0

Hay que tener en cuenta que dentro de las etiquetas <a></a> hay un texto que aparece visible para el usuario sin ello el enlace seria invisible. No obstante, es válido no incluir texto alguno agregando el atributo name para hacer referencia al enlace como un marcador dentro de tu página:

<a name="arriba"></a>
Volver <a href="#arriba">arriba</a>.
2
  • title, aria, anchor, alt, role ... El name sólo debería ser usado para datos que deben ser serializados a través de algún formulario, no como una descripción de un enlace. Commented el 10 dic. 2017 a las 1:52
  • El problema es que no quiero agregar texto, porque tengo un icono de facebook, utilizando font awesome, el enlace es el siguiente: <ul class="social-icons"> <li> <a id="facebook" href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" class="fa fa-facebook fa-3x"></a> </li> <li> <a id="twitter" href="https://twitter.com/" target="_blank" class="fa fa-twitter fa-3x"></a> </li> </ul>
    – Bob
    Commented el 10 dic. 2017 a las 2:16
0

deberías colocar:

<a id="facebook" href="https://www.facebook.com/" target="_blank">Facebook</a>

2
  • Entiendo que el autor de la pregunta está intentando crear un enlace sin texto. Y es esa la cuestión que quiere resolver. En tu respuesta se está ofreciendo una solución en la que sí tiene texto el enlace.
    – Mariano
    Commented el 13 dic. 2017 a las 20:20
  • @darioxl Cómo ha comentado Mariano! La solución es añadir dentro de la etiqueta <a "aria-label="EscribeLoQueQuieras""> (porque yo no quiero agregar texto en el enlace). Fue resuelto por Eduen Sarceño.
    – Bob
    Commented el 13 dic. 2017 a las 22:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.