Font Icon discussion continued

[Justin Obara]

I think heidi tested with NVDA and VoiceOver. I tried it with Jaws 14 on Chrome, FF, IE 8, IE 9 and IE 10.

Thanks
Justin
On 2013-04-26, at 10:45 AM, Colin Clark <colinbdclark at gmail.com> wrote:

> 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
> 
> _______________________________________________________
> 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