WebAIM - Web Accessibility In Mind

E-mail List Archives

Issue with aria-hidden=true


From: general@thekaspergroup.com
Date: Jul 20, 2020 2:00PM

Hi all. First time here.

I am very new when it comes to making sites fully accessible. I am using
the WAVE Accessibility Extension for Firefox and one of the issue I am
having is the aria-hidden=true that was flagged 7 times. It seems some of
the have to do with fonts from Font Awesome and I don't know how to fix

Here's one example:

<a target="_blank"
aria-hidden="true" class="svg-inline--fa fa-facebook-square fa-w-14"
data-prefix="fab" data-icon="facebook-square" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
data-fa-i2svg=""><path fill="currentColor" d="M448 80v352c0 26.5-21.5 48-48
48h-85.3V302.8h60.6l8.7-67.6h-69.3V192c0-19.6 5.4-32.9
33.5-32.9H384V98.7c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87
89.4v49.9H184v67.6h60.9V480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48
48-48h352c26.5 0 48 21.5 48 48z"></path></svg><!-- <i aria-hidden="true"
class="fab fa-facebook-square"></i> --><span>Facebook</span></a>

Here's the page I am testing:


Please not that I am well aware of the contrast issue. I will be dealing
with that later. Right now I just want to resolve the aria-hidden=true

Thank you