Skip to main content
2 de 3
aria
Eduen Sarceño
  • 2.1k
  • 12
  • 21

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, debe entender que debes utilizar siempre un elemento inlineel elemento inline sin semántica adyacente es span. Respecto al enlace deberás utilizar ya sea ARIA o bien indicar un title

En lugar de hacer

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

Debes 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>
Eduen Sarceño
  • 2.1k
  • 12
  • 21