June 2013 Archives

Icon Fonts + Unicode and Accessibility

|

Remember the old Symbol font in which you could type S and get the Greek sigma (Σ) symbol....without activating any Greek keyboard? Or Wingdings font which produced all number of cool symbols. Unicode gurus have been trying to get rid of these fonts for a while now since you had issues where different symbols could appear depending on which font a user had installed.

For instance, the following passage will either be a series of astrological symbols or the letters A-E depending on whether you have the Wingdings installed or not (and whether your browser will let you get away with displaying Wingdings).

a b c d e

Web Fonts to the Rescue....Sort Of

This situation had forced Web developers to retire the use of Symbols and Wingdings for the Web....until the advent of the embedded Web font which allows a Web site to send a font file to any user. Now everyone will have your font.

This has led to the rise of new "icon fonts" which can be embedded on a Website. Some of my favorites are

In theory, you can get rid of a lot of icon images and use more lightweight text, and since the font will download to everyone, you no longer have to worry about display issues or even encoding. You can even use modern CSS to perform all sorts of formatting tricks. Great news .... right?

Encoding Side Note

Generally speaking icon fonts are taking two approaches. One is the 1990s "Unicode...what Unicode?" approach. If you download and use the StateFace font, typing w will output the outline of West Virginia.

The second approach is to try to conform to Unicode. Glyphs that do have a code (e.g. a smiling face) are put in that slot and others are put into the Private Use Area. Obviously, this approach has many advantages over the original approach in that some text integrity can be maintained.

Accessibility and Other

As you might expect, there is trouble in paradise. A major potential gotcha is screen reader access because screen readers don't do fonts, only underlying text. VoiceOver recognizes many Unicode symbols, but if a font is using a symbol not in Unicode, then you're out of luck. Similarly, if a font is matching a symbol to a letter a la Wingdings, then VoiceOver will read the letter and not the symbol.

Even worse is JAWS which has very limited symbol recognition by default. If you replace letters with symbols, JAWS will read letters. But even if you use a properly encoded font, JAWS may still not read your symbol (whereas any image with ALT text is recognised) especially those in the Private Use Area. In this case, you may need to provide a JAWS symbol text file...unless you are crafty in your use of icons.

But don't forget mobile devices. Some phones may be able to recognize embedded fonts, but some older phones may not. As recent reports are showing, more and more people are accessing the Web primarily through a phone or tablet device.

Best Practices

I think there are some tricks that can help you have your icons and still have accessible content. The key is to avoid using an non-standard icon alone in text.

  1. Try to keep icon use decorative by adding a text equivalent. Icons used as a decorative element really don't an ALT tag anyway, so being skipped by a screen reader will not be too disruptive. You can also work around bad encoding issues also.

  2. Use font to generate an image. If an icon use being used alone, then an image with ALT tag may still work. BUT an icon font can give you a head start by providing a nice set of vector based images to work with. Sweet!

  3. OR...you can re-add a text equivalent, but hide it from sighted users. This is a sneaky way to add back in ALT text for screen readers.

Categories:

About The Blog

I am a Penn State technology specialist with a degree in linguistics and have maintained the Penn State Computing with Accents page since 2000.

See Elizabeth Pyatt's Homepage (ejp10@psu.edu) for a profile.

Comments

The standard commenting utility has been disabled due to hungry spam. If you have a comment, please feel free to drop me a line at (ejp10@psu.edu).

Powered by Movable Type Pro

Recent Comments