Font Icon discussion continued

[Colin Clark]

This seems pretty sensible. Which ATs did you test with, out of curiosity?

Colin

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

On 2013-04-25, at 4:11 PM, "Valles, Heidi" <hvalles at ocadu.ca> wrote:

> 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
>>> 
>>> On 2013-04-23, at 12:24 PM, Justin Obara <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
>>> 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
>> 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
> To unsubscribe, change settings or access archives,
> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work