I gained much from the contributor day with the WordPress Accessibility team at WordCamp London. One thing in particular was that Font Awesome, is not too awesome from an accessibility point of view. Especially if you use Font Awesome inline, and in the manner Font Awesome suggest using the <i> element. But we can change that.
Update: Might be worth looking at this before you read any further…
To play along at home, you will probably need to enqueue Font Awesome. Open up your WordPress theme’s functions.php file, and paste this in:
All going well, you should now be able to add Font Awesome icons where ever you see fit.
If you do nothing else: use the span element
Replace the <i> tag with <span>. The i element is semantic, in other words it means something. In the good old days it used to mean “italic” but with HTML 5 it means an “alternate voice”:
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
~ WHATWG – The i element
A bad example
So for example, when you want to add a glorious WordPress icon at the beginning of a text string, you would do it in typical Font Awesome style like this:
<i class="fa fa-wordpress"></i> WordPress is Awesome.
A better way
But then someone pops over to your site using a non-visual device, perhaps a screen reader. There is a chance that the screen reader won’t know what to do with the i element. For this reason it is much better to use the span class instead:
<span class="fa fa-wordpress"></span> WordPress is Awesome.
The span element doesn’t mean anything on its own…
~ WHATWG – The span element
So that’s better, it is much less likely to trip up screen readers, or heaven forbid Google:
If a site is good for a screen reader, it’s also for Google, because Google is blind and deaf
~ Rian Rietveld
Google is blind and deaf!
Meditate on that for a moment. Yes, really. Accessibility is about making your website people-friendly. Which of course is a noble and just cause, but your accessibility efforts will also be rewarded by the fact that your site is more accessible to Google and the other search engines too.
You don’t need to be Stephen Hawking to work out that if both people and Google love your site, you’re on to a winner. So, if your accessibility efforts are rewarded twice, lets dig a little deeper and make your Font Awesome even more inclusive. Because you now know it’s worth it.
Add aria-hidden=”true” to the icon span
To make your inline Font Awesome even more accessible you can add aria-hidden=”true” to the icon span:
<span class="fa fa-wordpress" aria-hidden="true" ></span> WordPress is Awesome.
What is ARIA?
Good question. It is a way of making your code more inclusive:
~ WAI-ARIA Overview – World Wide Web Consortium
But what happens when you just want to use a Font Awesome icon by itself and without any text?
Another good question! Obviously using the above techniques is useless without some accompanying text. An icon by itself will be hidden from screen readers and of course the mighty Google. Not good. So how can we add some goodness?
At this point I would like to mention Purple Baby Hippo’s article: Make Font Awesome Accessible. For two reasons: 1, I am going to
ripoff be inspired by much of the post, and 2, I would at least like to tip my hat to Dennis Lembrée who mentioned the aria-hidden attribute in the comments of the article.
What no text?
So, to have a nice crisp Twitter icon to link to my Twitter handle, I could do this:
<a href="https://twitter.com/ifingers"><span class="fa fa-twitter" aria-hidden="true" ></span> I am awesome follow me on Twitter</a>
But, for some people there will be no need for the text. The Twitter icon by itself is enough. So you could do this:
<a href="https://twitter.com/ifingers"><span class="fa fa-twitter" aria-hidden="true" ></span></a>
But what about poor old Google and of course the visually impaired? What will they see?
Silence may be golden. But of course silence is nothing to a user of a screen reader. How will they even know there is even a link there to Twitter? And what will Google think, are you trying to spam their index with your hidden links?
Screen Reader Text to the rescue
But the mighty .screen-reader-text class is our saviour. If you work with WordPress it is important you get to know this CSS class. You could do even read Rian’s The screen-reader-text class, why and how? article. In a very simplified nutshell, it is a CSS class to hide an element visually but make it ‘speak’ to the reader.
So taking our example from before we can add a span element with the screen reader text class and hey presto, all is good in the world. Visually impaired people will know it is a link to Twitter, and for those that can see the icon, they will know that it is probably a link to Twitter and that they could follow it to read awesome tweets.
<a href="https://twitter.com/ifingers"><span class="fa fa-twitter" aria-hidden="true" ></span><span class="screen-reader-text">I am awesome follow me on Twitter</span></a>
Notice that I haven’t put the screen-reader-class span, within the icon span. This is because the aria-hidden=”true” attribute acts upon descendants of the element it is used on. In other words it will hide the screen reader class span from the screen reader, which is not what we want at all.
Like my icons in the nav bar?
Sure, you do. You could easily copy my awesomeness and just add the inline code to the link text in the WordPress menu. But, there is a better way. Target the menu links with some CSS in your style sheet. You can also prepend icons to pages like on the About page of this site.
I am actually using the same CSS on both the menu item link and the entry title. I am a Genesis user, but the code could easily be adapted to your site by changing the selectors used. You can find the Unicode from the Font Awesome example pages, in the case above I have used the fa-users character. So the Unicode is f0c0. So to use a different character, just find the corresponding Unicode.
Now that’s easy enough, but for extra brownie points you could also head over to the Make WordPress Accessible page and learn more about Accessibility and WordPress, and even contribute to making WordPress even more awesome. Plus why not join in this discussion on Font Awesome Accessibility.