Icon fonts and accessibility

A few good article links for icon fonts, why they are bad and how you can use them if you really need to.

I’ve have been using svg-sprites from icomoon.io/app for a current project but have been considering how to convert them to CSS-based or icon fonts if the project implementation needs it..


Seriously, Don’t Use Icon Fonts – Cloud Four

Some good points, thoughtfully set up as section titles:

  • Screen Readers Actually Read That Stuff
  • They’re a Nightmare if You’re Dyslexic
  • They Fail Poorly and Often


They thoughtfully point you toward a good article on how to implement them properly:


Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA


And the github repo for Bulletproof Icons solution, to make it easy to implement and use.
a-font-garde – A variety of test cases and tools for safe font-icon usage.

Slowly figuring out the code that FB Instant Articles doesn’t like

So far:

  • images inside links
    – either the image is stripped, leaving behind an empty <a>
    – or the image is converted properly and an empty link is somewhere else on the page
  • Horizontal Rules are bad
  • Classes on images inside of other tags are confusing
  • Nested lists are confusing

Next up… Hope FB approves my sayvil.com feed.

While that is in progress:

Figure out how to set this up for XSL creating an RSS feed for Sharepoint.

(any)    This rule class will effectively strip out an element tag which matches the associated selector of the rule.

(any)    This rule class instructs the Transformer to not process any transformation on element tags which match the associated selector of the rule.

Facebook Instant Articles

Testing out Facebook Instant Articles integration using my blog. Very interesting.

I see that I will be creating multiple custom transformer rules to deal with the more complex coding used in articles.

The default transform doesn’t seem to understand things like linked images, etc.