Interesting blog post, certainly chimes with a lot of my thoughts.
My own take is that there's so many obscure icons in Moodle that the very first step is to ask "do we need this?" and be fairly brutal about answering it. For example an icon for each question type (see how many of these your colleagues can guess from just the icon: /admin/qtypes.php) many of which I think we could live happily without.
After you identify an non-essential icon your options then are:
- delete it entirely
- replace it with an icon shaped space (if there's other icons and it would make the list look wobbly)
- replace it with a short bit of text and style it to look more dramatic (e.g. for signaling an XSS threat I've replaced a red triangle icon with red "XSS" text styled with Bootstrap's "label" class)
- replace it with a more generic icon (e.g. I'm using the "person" icon from Bootstrap to represent various people, role or group related things throughout moodle and relying on context to make it obvious)
If you don't do this first step then there's just too many icons to be able to do anything sensible with them. I think it would be a good thing if people got together and agreed what icons should stay rather than everyone doing their own thing. At the moment I've got special case logic all over the place to figure out what an icon's being used for and what to replace it with. Often in code you've only got the icon name and the same icon is used in different contexts, which you might want to do different things with.
For the icons I'm keeping I'm using Bootstrap's <i class="icon-*>text, using their sprite image and mixing in their .hide-text class that makes the text tiny as I've read the technique of shifting it far off to one side can have performance impacts on early iPads and low end phones.
I'm going to try adding adding font awesome now that i've rewritten my theme with LESS but I'm not sure how that will mesh with the accessible text.