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
https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

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
https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

 

And the github repo for Bulletproof Icons solution, to make it easy to implement and use.
filamentgroup/a-font-garde
https://github.com/filamentgroup/a-font-garde
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.

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

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