E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Issue with aria-hidden=true

Number of posts in this thread: 6 (In chronological order)

From: general@thekaspergroup.com
Date: Mon, Jul 20 2020 2:00PM
Subject: Issue with aria-hidden=true
No previous message | Next message →

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><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

From: John Hicks
Date: Mon, Jul 20 2020 2:53PM
Subject: Re: Issue with aria-hidden=true
← Previous message | Next message →

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 ADDRESS 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><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
>
> > > > >

From: Tim Harshbarger
Date: Mon, Jul 20 2020 2:58PM
Subject: Re: Issue with aria-hidden=true
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of John Hicks
Sent: Monday, July 20, 2020 3:53 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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><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
> >

From: Jared Smith
Date: Mon, Jul 20 2020 3:12PM
Subject: Re: Issue with aria-hidden=true
← Previous message | Next message →

> 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.

The intent is not to (necessarily) get rid of items in WAVE that are
not errors. In this case WAVE is simply alerting you to the presence
of the ARIA attributes so you can verify that they have been
implemented correctly.

Jared

From: glen walker
Date: Mon, Jul 20 2020 3:15PM
Subject: Re: Issue with aria-hidden=true
← Previous message | Next message →

Those purple notes about ARIA are just intended for you to check your code
to make sure they're ok. The WAVE doc for this particular note says "The
hidden content must not contain any navigable elements (such as links or
form controls)"

I looked at one example and it doesn't fall into that category. The hidden
content itself doesn't contain any navigable elements but rather the hidden
content is *contained* in a navigable element. You have

<a href="...">
<svg aria-hidden="true">
</svg>
other text
</a>

In this case, you're ok because there is text associated with the link.

For the social media icons, you don't have extra text so it *is* a
problem. The link has nothing to announce.

<a href="...">
<svg aria-hidden="true">
</svg>
</a>

From: general@thekaspergroup.com
Date: Mon, Jul 20 2020 3:37PM
Subject: Re: Issue with aria-hidden=true
← Previous message | No next message

Thank you John. I will try your suggestions.

Eddie

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of John Hicks
Sent: Monday, July 20, 2020 3:53 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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><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
> >