WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Issue with aria-hidden=true

for

From: Tim Harshbarger
Date: Jul 20, 2020 2:58PM

You may also want to look at the Font Awesome site which includes information on how to use it accessibly.

Tim Harshbarger
Senior Accessibility Consultant
Deque Systems
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of John Hicks
Sent: Monday, July 20, 2020 3:53 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Issue with aria-hidden=true

Hello

There is nothing wrong with the Aria Hidden attribute, it is there to keep
the svg from being read (sometimes SVGs have author texts inside). The
problem is that the link text "Facebook" is visibility:hidden . So this is an empty link as far as screen readers are concerned.

You could take off the aria hidden and put an aria label in the svg, or use a different masking method for the link text.

?

... late night doodling, there are real experts on this list who may correct me in the morning :)

John


Le lun. 20 juil. 2020 à 22:00, < <EMAIL REMOVED> > a écrit :

> 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 them.
>
>
>
> Here's one example:
>
> <a target="_blank"
> href="https://www.facebook.com/falconcropprotection/"><svg
> 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:
>
> https://www.falconcropprotection.com/
>
>
>
> 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 issue.
>
>
>
> Thank you
>
> Eddie
>
> > > archives at http://webaim.org/discussion/archives
> >