19

It seems to be a trend for the moment to embed custom web dingbat fonts and use them as icons on web pages. But isn't it true that a screen reader will read those characters out loud?

So when it for example reads out a menu for a visually impaired visitor it could sound something like this (in this example the letter f would be a dingbat for an fancy arrow): "f home, f about us, f contact". How can I make this more accessible?

Improve this question
3
  • The solution should be using only Private Use Area for "icon" glyphs: en.wikipedia.org/wiki/Private_Use_Areas#Private_Use_Areas
    – user83273
    May 5, 2016 at 17:52
  • I do not have the capability to test so I'll put in a comment, but could you not put an aria-hidden tag on it so the screen reader ignores it?
    – DasBeasto
    May 5, 2016 at 18:22
  • Just for information - accessibility is MUCH more than just being screen reader friendly. What if Web fonts are blocked all together? What if they are replaced with user custom fonts? There are many more cases like that. I would say that icon fonts are intrinsically inaccessible because they always fail in one of such conditions.
    – tomasz86
    May 26, 2016 at 7:58

2 Answers 2

Reset to default
6

Great question!!

I had a strong suspicion myself, so I just asked one of my colleagues (who is a JAWS user) to test it for me.

You're right: it does appear to read the keyboard-equivalent. Testing with the Wingding "snowflake" (which is 5 across, 3 down in this image), JAWS reads T. This would have the effect of reading letters in the place of the wingding.

I would suggest that the accessible way to provide this content would be to use images and provide appropriate ALT text equivalents (where necessary) and s for form elements.

Improve this answer
5
  • 2
    either that, or use the unicode dingbats, which are not simple a-z letters with a fancy web glyph but are instead completely different codepoints.
    – Erics
    Dec 9, 2011 at 10:14
  • 1
    Do note that JAWS is the IE of screen readers. It's widely used, so a reality, but also woefully out of date most of the time as well. As for now, perhaps a title attribute can help? <span title="Snowflake">[unicode character]</span>
    – DA01
    Dec 9, 2011 at 15:54
  • This is precisely the problem: they're not using unicode characters. I do agree that this is the better solution!
    – msanford
    Dec 21, 2011 at 23:05
  • 1
    @DA01 the title attribute is not reliably announced by screen readers.
    – steveax
    Aug 11, 2013 at 1:57
  • Images should only be inline if they are actual content, i.e., here is a picture of ____. Any other use of images is non-semantic.
    – Eric Stoltz
    May 5, 2016 at 23:05
4

I think the current best way to do this is to use the :before and :after pseudo elements. In general, screen readers do not announce CSS generated content (which is why you should never place essential content in :before or :after pseudo elements.)

HTML

<ul>
    <li>Home</li>
    <li>About</li>
</ul>

CSS

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
ul {
    list-style-type: none;
}
li:before {
    display: inline-block;
    margin-right: 0.5em;
    font-family: 'FontAwesome', sans-serif;
    content: '\F0A3';
}

Fiddle: http://jsfiddle.net/CuC64/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.