Icon fonts and user-defined style sheets

Wednesday, 30th October 2013

Author: Gez Lemon

Icon fonts

Icon fonts are generally good from an accessibility point of view if used correctly, as they are scalable and remain visible in high contrast on Windows. Using icon fonts that use the Private Use Area of Unicode, such as IcoMoon, work well with assistive technologies. If the icon is purely visual, then the aria-hidden attribute should be used on the element to ensure it is not revealed to assistive technologies.

<div class="icon-star" aria-hidden="true"></div>

If the icon is used to convey information, then it should contain a text alternative that may be hidden visually if required, but available for assistive technologies.

<div class="icon-mail"><span class="context">Mail</span></div>

The text that provides the context for the icon can then be hidden visually with CSS so that it's still available to screen reader users.

.context {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

To work, icon fonts depend on the font-family property in CSS. If the icon is purely decorative, being overridden by the user's style sheet isn't an issue. When an icon font is used to convey information, such as the graphic for a button element, it means the visual representation will be missing, which is a serious issue.

User-defined style sheets

There isn't much data available about how widely user-defined style sheets are used by people with disabilities. It's probably fair to say that the number is low due to lack of awareness, but the benefits can be great for people with vision impairments or reading difficulties. I asked my colleague (and occasional running buddy) David Sloan if he was aware of any research, and he pointed me to a study about understanding users' text requirements that analyses 203 user-defined style sheets from 25 people.

For readability, it seems reasonable to assume that the font-family property is likely to be overridden. The study shows that font-family is the fourth most common global property, and the second most common element-level property to be overridden in the user's style sheet. Although the number of people using user-defined style sheets for accessibility might be small, they shouldn't be overlooked.

Determining if font-family is honoured

One solution to the problem is to use a script to determine if font-family is honoured. If the property is honoured, then use icon fonts; otherwise, only use them if they're decorative, and use an alternative method where they provide visual information to ensure it's usable by someone using a user-defined style sheet. The following is an example of a function that could be used to check if the font is honoured:

Update: Thanks to Federico Brigante for pointing out that this script doesn't work with Chrome. I tested the script with a user-defined style sheet in IE and Firefox, and it works correctly, but sadly doesn't work with Chrome. In his comment, Federico suggested another technique that could be used to detect whether a font is available.

function checkFont(strFamily) {
  var objDiv = document.createElement('div');

  objDiv.style.fontFamily = strFamily;
  objDiv.appendChild(document.createTextNode('FONT TEST'));

  if (window.getComputedStyle) {
      return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily;
  }

  return objDiv.currentStyle.fontFamily === strFamily;
}

The function can then be called with the appropriate font-family property:

var bHonoured = checkFont('icomoon');

Adopting this technique means the page gets the benefit of using icon fonts, but also ensures that people using user-defined style sheets to improve readability for accessibility also get the information.

Useful resources

• Using icon fonts
• Icon fonts are awesome
• Creating a custom icon font using IcoMoon

Category: Accessibility.