aria-hidden

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:

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.

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!

 

 

strong vs. em

On the finer points of semantic markup

What makes a phrase strong?
When should text be emphasized instead?
Are <b> and <i> completely deprecated?

What makes a phrase strong?

While in HTML4, Strong simply indicated a stronger emphasis, in HTML5, the element is described as representing “strong importance for its contents.”

Mozilla Developer Network

Truth be told, I don’t find distinction between “stronger emphasis” and “strong importance” particularly helpful but the “for its contents” bit was a revelation.

Quite simply, phrases or words wrapped in <strong> tags are not pronounced differently and do not change the meaning of a sentence, as phrases or words wrapped in <em> tags can.

<strong> tags are 100% about the significance of their content.

To find out what kind of content merits that extra importance, I looked at the source code for the Web Accessibility Initiative‘s homepage and the W3C news page. There were three general types of usage here:

1. FOCUS: Draw attention to an action

Discover new resources for people with disabilities, policy makers, managers, and you!

2.  TITLE: Draw attention to a topic

A number of developers, W3C members, invited experts from Academia and Industry, and W3C team representatives will be present at this one-day event, which consists of three sessions: Core Web Technologies, Future of the Web and Web & Industry, involving the topics of Web design, WebAPP, Blockchain, Virtual Reality, Accessibility, Knowledge Graph, Web Payments, Web of Things, Web Automotive, Linked Data, etc.

3. DEADLINE: Draw attention to… well, you get the idea

Please send comments by 14 April 2016.

When should text be emphasized instead?

Great question. I have developed a highly scientific approach to <em> tags that I like to think of as The Chandler Rule*.

(*Notice the rule is wrapped in <strong> tags because it is important, not because it is pronounced differently. Although you are encouraged to pronounce it with a suitable amount of gravitas).

Basically, without emphasis, the world is a dull, unfunny place:

Phoebe: Could this report be any later?

Joey: Could I be wearing any more clothes?

Chandler: Ok, I don’t sound like that. That is so not true.

But with emphasis, it has a lot more personality:

Phoebe: Could this report be any later?

Joey: Could I be wearing any more clothes?

Chandler: Ok, I don’t sound like that. That is so not true.

Just be careful with those <em> tags because, in some cases, emphasis can completely change the meaning of a sentence.

For example, how would you read the following book title?

Depending on whether you put the emphasis on the “me” or the “not”, you get an entirely different tone.

“Why not me?”sounds self-pitying whereas “Why not me?” sounds confident.

Hopefully going forward, you will feel completely confident with your use of <strong> and <em>!

 

Are <b> and <i> completely deprecated?

Short answer: No.

Long answer: Yes and no.

<b> adds absolutely no semantic meaning whatsoever and you are not likely to use it.

<i> has been somewhat co-opted by icon fonts but can still prove useful when designating particular kinds of titles (books, movies, and the like). It would also be appropriate to mark a word in a foreign language or a technical term.

For further reading on this subject, check out HTML5Doctor’s article, The i, b, em &amp strong elements.