我所有使用 FontAwesome 的 HTML 标签似乎都添加了 aria-hidden="true" 。 这是怎么回事？

Question

I'm currently using Bootstrap 4 and FontAwesome on my website. I'm working on ADA compliance now.

The crazy thing is that it seems that every HTML tag that uses FontAwesome somehow gets aria-hidden="true" added to it. Is this by default? How do I prevent this from occurring?

I've looked through to see if I can find that being added on any JavaScript files, but I'm not seeing anything.

It's fine that the tags get it, but not the anchor tags.

Answer 1

If you're using the CDN, it's possible that the auto-accessibility option is enabled, which is designed to automatically inject the aria-hidden tags for you.

https://cdn.fontawesome.com/help#qa-autoa11y

If enabled as a feature in your embed code, Font Awesome CDN will try to identify [accessibility scenarios] in your UI as well as provide the modern and proper syntax assistive technologies recognize. For icons that have semantic or interactive meaning, this means you'll need to provide a proper text alternative to be used.

Log into your Font Awesome kit, choose the Settings tab, and confirm that the checkbox for Auto-Accessibility is unchecked under the Features section.