Unobtrusive icons

In this article, I describe a way to add icons to descriptive links, and one that makes icons by themselves more accessible.

Icons are often employed to provide a visual description of an action. In some recent projects, I have treated such descriptive icons as merely enhancements of descriptive text. Because surely, text that describes some action is a basic yet functional substitute for an icon that describes that same action.

Icons preceding descriptive links

For example: an RSS link. In its most basic form, it would be:

<a href="http://site.com/feed" class="icon icon-rss">RSS</a>

The link with just the word ‘RSS’ is sufficient, it does the job of pointing the user to the RSS feed. Or the finely tuned searchbot, a browser plug-in that looks for RSS feeds or even a screenreader.

In its enhanced form, it would have a super sharp, retina proof vector icon in front of it.

Now, as we already made sure everyone is pointed to the RSS feed in a basic way, we have already included almost everyone, we can apply the enhancement to only the browsers that understand it.

The icon would be a character from an icon font. Let’s add the character with a pseudo element in CSS:

.icon-rss:before {
 content: 'foo'; /* character in your icon font, preferably 
one from Unicode's private use areas */
}

Icons with descriptive fallbacks

Sometimes, a web interface uses an icon by itself, without a label. In this case, it does not come with a useful descriptive text out-of-the-box. Adding it with generated content would exclude users whose browsers don’t understand :before or :after.

Support for generated content can be detected by Modernizr. Taking advantage of the class Modernizr adds, we could show or hide descriptive alternatives for generated content.

<span class="generatedcontent-alt">Enlarge text</span>

.generatedcontent .generatedcontent-alt {
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  width: 1px; 
  margin: -1px; 
  padding: 0; 
  border: 0; 
}

This will “visually” hide the alternative in the case it is no longer needed, when generated content support has been detected by Modernizr.

Another example:

<a href="printversion.html" class="icon icon-print">
  <span class="generatedcontent-alt">Print</span>
</a>

The text ‘Print’ is no longer needed if the print icon is there. If generated content is not supported, the text provides an acceptable alternative.

Text as the most basic alternative

Icons have great advantages, and can help users finding their way around a website. But there will be cases in which the icons don’t work, for example if your web font fails, generated content is not supported or your user only processes text (e.g. Googlebot or a blind user).

With text, you can be sure you reach almost all web users. This makes it the ideal alternative, that is always good to have it in place, even if you (visually) hide it from most users.