Menu
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>
562
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.
The icon is there to draw someones attention to the label, it is not a label itself. The label should speak for itself and doesn't need an aria-label attribute either. To quote W3.org: If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label.
While aria-hidden=true can be used to hide an element and its descendant content from assistive technologies, the none and presentation roles are to be used to only suppress the implicit ARIA semantics of an element. These roles do not hide the element's content from assistive technologies.
In some browsers, the attribute aria-hidden="true" hides an element and all its children from assistive technologies. Users can still use the keyboard to navigate to any focusable child elements, but their content is inaccessible to people who use assistive technologies. For example, screen readers are silent.
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.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
