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
