Font Icon discussion continued

Valles, Heidi hvalles at ocadu.ca
Thu Apr 25 16:11:31 EDT 2013


hi!

I've tested some different ways of adding visually hidden descriptive text to a font icon.
https://dl.dropboxusercontent.com/u/4345316/pua-test/pua-icons.html

This seems to be the way to go:

            <div class="icon-music" aria-label="This is a music note" role="img"></div>

Works great with different screen readers/browsers. A little strange with NVDA in firefox - it wasn't reading the label until role="img" was added. Now it says "graphic, this is a music note" - perfect! VoiceOver says "this is a music note, image"

A more real-life example, for UI Options, might be:

            <div class="icon-indicator" aria-label="Arrow indicating current theme" role="img"></div>

best,
Heidi



On 2013-04-23, at 1:22 PM, Valles, Heidi wrote:

hi Colin,

I'm looking into the best way of doing this. Will report back shortly!

best,
heidi



On 2013-04-23, at 12:28 PM, Colin Clark wrote:

Hi Justin,

This is a helpful summary. Can you elaborate on the means by which we should all be providing text alternatives for font-based icons, just so I'm clear?

Colin

---
Colin Clark
http://fluidproject.org<http://fluidproject.org/>

On 2013-04-23, at 12:24 PM, Justin Obara <obara.justin at gmail.com<mailto:obara.justin at gmail.com>> wrote:

Formal Proposal Regarding Font Icons:
==============================

We should use font icons for relatively simple images that can be represented using a single colour, or a few colours in cases where stacking is appropriate, and which need to be responsive to resolution, size, and colour changes on the fly.

For complex images, or those that do not require the responsiveness listed above, we should make use of either svg or raster images as appropriate.


Guideline for using Font Icons:

• Use PUA font icons
• Provide a text alternatives for non-presentational uses
• Add through CSS using classes
• Apply the class to add the font icon to an element that will only contain the font icon
• e.g. <span class="addFont"> font icon </span> where "font icon" would be the actual font icon displayed.



Please let us know what you think about this proposal and if you have any more questions or concerns.


_______________________________________________________
fluid-work mailing list - fluid-work at fluidproject.org<mailto:fluid-work at fluidproject.org>
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work

_______________________________________________________
fluid-work mailing list - fluid-work at fluidproject.org<mailto:fluid-work at fluidproject.org>
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20130425/6ce498f3/attachment.html>


More information about the fluid-work mailing list