lately, I have been using icons widely in my code, and that's after the great exploration of fa-fa-awesome it is really awesome 4sure. But the thing that I cant get is that why do we use aria-hidden. An example just for those who don't like to read words and paragraphs :
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<i class="fa fa-eye" aria-hidden="true"></i>According to the WHO around 285 million people have some sort of blindness worldwide. They must use a screen reader to access the internet. Screen readers convert the content of your webpage to speech, and allow people with disabilities to use the internet. That is why we add alt attributes to images - so that screen readers can generate speech based on the alt tag.
The Accessible Rich Internet Applications (ARIA) (https://www.w3.org/TR/using-aria/) draft is a way to add extra information to your HTML, and assist different assistive technologies (such as screen readers) in interpreting the content of your webpage better, so they can provide a better service to people with disabilities.
Usually, assistive technologies build an Accessibility Tree to structure your UI, instead of the usual DOM Tree. With aria- attributes you can control how that Accessibility Tree is build.
Because icons are almost always purely decorative features, it is wise to completely exclude them from the Accessibility Tree. aria-hidden="true" achieves just that. For this reason it is included in every example of <i> - to make the internet a more accessible place.
A believe the confusion arises, because web developers are often left with the impression their website will only be accessed trough a modern graphical browser. Because of that, the purpose of HTML features which show no effect in a browser are not understood. A web resource, however, is accessible in a variety of ways, and we have to make sure our web page behaves well in all of them.