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 <[email protected]> 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" <[email protected]> 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 <[email protected]> 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 - [email protected] >>>> To unsubscribe, change settings or access archives, >>>> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work >>> >>> _______________________________________________________ >>> fluid-work mailing list - [email protected] >>> To unsubscribe, change settings or access archives, >>> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work >> >> _______________________________________________________ >> fluid-work mailing list - [email protected] >> To unsubscribe, change settings or access archives, >> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work > > _______________________________________________________ > fluid-work mailing list - [email protected] > To unsubscribe, change settings or access archives, > see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work _______________________________________________________ fluid-work mailing list - [email protected] To unsubscribe, change settings or access archives, see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
