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.
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.
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 inline
el 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>