Menu
I want to include some Font-Awesome Icons in my Next.js project. I've added the needed
<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>
tag to my Head and then the
<i className="fas fa-arrow-right"></i>
tag to my render method. If I open the website in my browser it gives me this console warning:
index.js:1 Warning: Extra attributes from the server: aria-hidden
and the
<i className="fas fa-arrow-right"></i>
switches to
<i className="fas fa-arrow-right" aria-hidden="true"></i>
I've already tried the react-fontawesome package but that doesn't seem to work with SSR. Adding
aria-hidden="false"
manually didn't fix it either.
I guess this is a problem with SSR but I wasn't able to find a good solution or alternative for it.
501
If an icon is not an interactive element The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span> , with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.
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.
Use on focusable elements For instance, is using aria-hidden=true on a <button> element, that element will still be keyboard focusable and browsers and assistive technologies are likely to correct author misuse by exposing the element when focused.
$("button[title='Aceptar']"). prop("disabled", true); where you can select the button by any of its property (first) and change property disabled.
Using any other won't work. For instance, if you try showing <i class="fas fa-user"></i> on Font Awesome 4, it won't get displayed. Note: Font Awesome allows you to add icons using ONLY <i> and <span> tags. If you use any other element they won't show. Only add your classes to either of the two.
You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup. Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question.
what's the effect of aria-hidden in Font Awesome? Is it necessary to use it? why? or why not? Show activity on this post. In short, it makes the icon not visible to screen readers, to enhance accessibility.
The Font Awesome auto-accessibility feature will create alternative text for the icon using the description you set with the title attribute. The Font Awesome Kit will adjust it so the meaning is conveyed in supporting elements that only screenreaders "see":
I had the same issue and I resolved by adding aria-hidden to the icon in this way:
<i aria-hidden className="fab fa-whatsapp" />
No more warnings.
108
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
