What is aria-hidden and why does Font Awesome keep telling me to use it?

All about ARIA

First things first: ARIA stands for Accessible Rich Internet Applications Suite and will often be referred to as WAI-ARIA (because it is part of the Web Accessibility Initiative).

The W3C published its first official Recommendation on this subject March 20, 2014. The Recommendation explains dozens of ARIA states, the vast majority of which I’ve never used.

But there is one I have unknowingly used quite often, and believe others would find familiar as well: aria-hidden="true".

The Font Awesome Way

The first time I ever saw this attribute and value, I was pulling an icon from Font Awesome for a class project. I was in the middle of a beginner’s course on front-end code. And I was not about to question any part of the provided material. Copy. Paste. Move on.

For those who don’t use or haven’t used Font Awesome, this is the sort of thing you see when you select an icon:

[screenshot] the Font Awesome code for a Twitter icon, with a note about including aria-hidden = 'true' in fine print

It’s easy enough to miss when you’re first starting out, but I only realized aria-hidden="true" was not a vital part of the code when an instructor congratulated me for being aware of accessibility issues. Next time I was on Font Awesome, I took the extra half-second to read what was written beneath the code.

[screenshot] Close-up of FontAwesome's note about using aria-hidden = 'true' to improve accessibility. The word 'accessibility' leads to another page

And I clicked on the link.

Fair warning, it takes more than half a second to read Font Awesome’s Accessibility page.

Here’s the 30-second version:

The purpose of WAI-ARIA is to help ensure that screen readers and other assistive technology can accurately represent a site’s content, presentation, and interactivity. In some cases, this involves hiding elements that confuse the user experience. In the case of Font Awesome icons (and other CSS-generated icons), modern assistive technology may read the content as blank or give the unicode information. Both are obviously undesirable outcomes, but I think I’d rather be confronted with blank content than expected to divine the meaning of ‘f099’. Adding aria-hidden="true" to an icon tells the assistive technology to skip over this information, as it will not improve the user experience and has the potential to worsen it.

Font Awesome actually recommends adding aria-hidden="true" to all icons but to distinguish between icons used purely for decoration and icons with semantic or interactive purpose. For the latter, it advises adding more mark-up to clearly explain the purpose of the icon because the icon itself cannot be relied upon to convey this information. Semantic icons should include a title attribute and a text alternative visible ONLY to assistive technology like screen readers (Font Awesome uses a span with the class “sr-only” in its examples). For interactive icons, a title attribute on the interactive element should prove sufficient.

Font Awesome also offers an auto accessibility feature to perform these actions for you but I would recommend working manually until you feel comfortable enough with these techniques that you could spot when they are being used incorrectly.

For more information on this topic, check out the Paciello Group’s  article on hidden content!




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s