The links must have text

1

Sorry I have the following problem and I have looked through Google hours and hours, but I can not find a solution. When I use the Google AUDITS inspector, to see the performance, accessibility, etc. I get the following: Links must have discernible text

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

If I create a link without text, is that not possible? Is there a solution?

Greetings!

    
asked by Bob 10.12.2017 в 01:32
source

3 answers

3
  

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>
    
answered by 10.12.2017 / 02:47
source
0
  

Keep in mind that within the <a></a> tags there is a text that appears visible to the user without it the link would be invisible.   However, it is valid not to include any text by adding the name attribute to refer to the link as a bookmark within your page:

<a name="arriba"></a>
Volver <a href="#arriba">arriba</a>.
    
answered by 10.12.2017 в 01:57
0

you should place:

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

    
answered by 13.12.2017 в 20:32