Menu
I am testing my HTML code markup compliance with accessibility standards: http://achecker.ca/checker/index.php. The following is an error I get:
Repair: Replace your i elements with em or strong.
<i class="fa fa-search" title="Search"></i> <span class="sr-only">Search</span>
I went through the official Font Awesome docs on the accessibility (https://cdn.fontawesome.com/help#qa-autoa11y), and didn't find any mention of that I need to use different tags for icons. Any ideas on this?
958
It is because they are both inline elements. <i> is shorter to type than <span> and the icon won't get rendered in italics.
If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.
Every Kit comes with auto-accessibility built-in and provides the modern and proper syntax assistive technologies recognize. Font Awesome auto-accessibility feature will make sure it is ignored by assistive technology. There's nothing extra you need to on top of how you would usually reference an icon.
Instead of fa as a style preceding every icon style, you need to pick from fas for solid, far for regular, fal for light, or fab for brand. It looks like fas is the fallback, so you get solid if you leave your old fa references. For most icons, this change makes the icon heavier or lighter.
As a general guideline, you should use em for emphasis instead of i for italic text because italic text is normally used only to imply emphasis.
In this case, you are using i for icon, which is nonsense (and confusing your accessibility checking tool). Use a span instead. That doesn't come loaded with any inappropriate semantics.
196
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
