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
<[email protected]<mailto:[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]<mailto:[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]<mailto:[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
