When I use the AUDITS inspector, to see the performance,
accessibility, etc. The following appears to me: Links must have
discernible text
What is the error
For an Accessible Web the W3C recommends following the recommendations of 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 says that a URL by itself is not descriptive enough. The author of the site SHOULD provide a description of the link either via anchor
or via alt
To see examples, you can go to this link
Why the error
You are using a tool that analyzes the accessibility of the site. Any tool that works as a validator of specifications MUST ensure that the document is in accordance with the specifications and / or recommendations. If it is not, the tool MUST notify the author, since not doing so is the same as indicating that the document follows the specifications, which is not true.
§ 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.
Conclusion
You must place a description to your link if you want it to be accessible by a wide variety of users, the description must be present at any time even without JavaScript support.
The following code does not follow the recommendations of WCAG , since it does not establish any descriptive title of the link.
<a id="facebook" href="https://www.facebook.com/" target="_blank"></a>
Instead the next one does, since you can see the text "facebook" click it and go to the site.
<a id="facebook" href="https://www.facebook.com/" target="_blank">
facebook
</a>
Remember that WCAG is designed for users with some type of disability, be it visual, auditory or other. If the nature of your website can not support these users, then you can ignore the warning, because even if you want to do something for these users simply is not available to do so eg: A video game could not be accessible by a blind user, no matter how much effort is spent.
Using fontawesome and Bootstrap
For fontawesome, it is always recommended to define the font-awesome classes in a inline
element, the inline
element should not have anchor .
Typically, use span
to define a font-awesome icon.
Regarding the accessibility of the link you should use either aria
or indicate a title
Instead of
<a class="fa fa-facebook"></a>
You should do
<a class="btn btn-link" aria-label="Ir a Facebook"><span class="fa fa-facebook" /></a>
or
<a class="btn btn-link" title="Ir a Facebook"><span class="fa fa-facebook"/></a>