Inspired by Jason Santa Maria’s Tweet:
I love the idea of dingbat webfonts, though I want someone to write an article on the accessibility of using them. http://j.mp/ccD34r
The idea is fairly simple: Draw up some beautiful flat-colour vector icons, wrap the whole set into a font, and then load it as a webfont to display the icons on your page. Simple and clean, right?
There are problems.
In effect, you will be littering your page with a list of ‘j’ and a ‘h m n p’ near the title, with some ‘s u f’ in some other places. What does it mean? It’s completely indecipherable unless you successfully load the font and have the required experience/cognizance to recognize the meaning of the shape. A lot of people just aren’t good with icons.
There are some standard solutions. Wrap everything up with plain-text mark-up, then add the symbol and negative-indent the semantic text away.
In browsers that don’t support web-fonts, and in screen-readers that read out text on the screen (which would be all of them), the code would still contain a bunch of odd letters or numbers everywhere.
Someone mentioned a page from Opentype in his post, where they make a characterset which has most of the letters blank, with the ‘W’ mapping to their logo.
So how’s this:
Make an icon set with most everything blank, and then put twenty-six icons in the capital spaces. Put the shopping cart in ‘C’, because ‘cart’ starts with ‘C’. In your shopping cart example, it could say “Purchase, go to shopping Cart” but the “, go to shopping art” would be blank, the “C” would be the shopping cart symbol, and you’d see “Purchase []” where [] is the symbol.
You’d be limited to twenty-six symbols, and each must be applied to the letter you’ll use to start its name (unless you don’t mind the text “caRt” or such).