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>