14

what's the effect of aria-hidden in Font Awesome? Is it necessary to use it? why? or why not?

for example, I want to know the effect of aria-hidden="true" in the code below:

<i class="fa fa-star" aria-hidden="true"></i>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Mina
  • 183
  • 1
  • 2
  • 6
  • 2
    This link can help you
    https://stackoverflow.com/questions/31107040/whats-the-difference-between-html-hidden-and-aria-hidden-attributes     – Bhaktuu Jun 22 '17 at 07:36

2 Answers2

13

In short, it makes the icon not visible to screen readers, to enhance accessibility.

From the documentation:

If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.

David Hallberg Jönsson
  • 842
  • 5
  • 11
-2

If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.

<i class="fa fa-fighter-jet" aria-hidden="true"></i>

an icon being used as pure decoration

<h1 class="logo">
  <i class="fa fa-pied-piper" aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>

an icon being used as a logo

Source: http://fontawesome.io/accessibility/

TripleDeal
  • 726
  • 4
  • 14