Clever Geek Handbook

Aria effect hidden in fontAwesome

What is the effect of the aria hidden in fontAwesome? Should I use this? What for? or why not?

for example i want to know the effect aria-hidden="true"

in the code below

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

please help me.

+3


source to share


2 answers


In short, it makes the icon invisible to screen readers to improve accessibility.

From the documentation :



If you are using the badge to add additional embellishments or branding, it should not be advertised to users as they are targeting your site or app. In addition, if you are using the icon to visually re-underline or add style to content already present in your HTML, it does not need to be repeated for a user using assistive technologies. You can make sure this isn't read by adding aria-hidden = "true" to your Awesome font markup.

+5


source


If you are using an icon to add additional decoration or branding, you do not need to inform users as they are a site or application. In addition, if you are using the icon for visual display, re-emphasize or style content already present in your HTML, it does not need to be repeated for the user using assistive technology. You can make sure this isn't read by adding aria-hidden = "true" to your font. Amazing markup.

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

the badge is used as a 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>

icon used as a logo

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

-1


source






More articles:


All Articles