Search code examples
font-awesomelighthouse

How To Make Font Awesome Elements Have Discernable Names?


Bonjour,

Trying to solve the audit point of discernable names of font awesome icons/elements using Lighthouse I dont't know how answer to this challenge : How To Make Font Awesome Elements Have Discernable Names ?

The actual result in Lighthouse ask for "Elements Have Discernable Names"

here is the basic code

<a href="https://twitter.com/blablabla"><i class="fa fa-twitter black"></i></a>

Best regards

J.


Solution

  • Add the aria-label property to pass the audit.

    <a href="https://twitter.com/blablabla" aria-label="twitter"><i class="fa fa-twitter black"></i></a>
    

    More information about aria-label can be found at https://dev.opera.com/articles/ux-accessibility-aria-label/#accessible-name-calculation