Font Awesome Accessibility and Personal Practices

First of all I am writing this post as an reply to @mgifford, to share my opinions on Font Awesome regarding accessibility as well as some personal practices.

Accessibility

The first concern I had with Font Awesome was if the characters used for the icons were read by a screen reader. Since the icons are added with CSS psuedo class :before I first considered that the reader might not catch the content of :before and :after, but as it turned out it very much did. I then started looking into how the characters sounded when read, but to my surprise I found out that they are within Unicodes Private Use Area. What this means is that the screen reader will ignore these characters since they are intended for “other” private use, which is exactly what Font Awesome does.

Personal practices

I like how Font Awesome let’s you add icons effortlessly with <i class="icon-html5"></i>, but I also like clean and semantic HTML. So the approach that I personally prefer is to avoid using <i> as much as possible and instead make use of :before and :after in combination with classes.

CSS

a.like:before { content: "\f087"; font-family: "FontAwesome"; margin-right: 10px; }

HTML

<a href="#" class="like"><span class="count">10</span></a>

The benefit of this approach is that the icon is tied to a class which is already used to define a specific component and limited to only the CSS, which makes it easier to change and style the icons.

Since I am also using SASS (mostly) and LESS, I have another practice which is to include the Font Awesome scss/less file with every icon class commented out. This way I cut down on the generated CSS and only make icon classes available for the few cases where it is preferred to use <i>. I also create some Font Awesome base classes (usually with left and right alignment) to extend within my other classes, such as my previous .like example.

SCSS

.fontawesome-icon { content: "\f087"; font-family: "FontAwesome"; } .fontawesome-icon-left-align { @extend .fontawesome-icon; margin-right: 10px; } a.like:before { @extend .fontawesome-icon-left-align; }

Comments

Disqus Facebook