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?

  • 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 '16 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 '16 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 '16 at 7:58
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.

  • 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 '11 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 '11 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 '11 at 23:05
  • 1
    @DA01 the title attribute is not reliably announced by screen readers. – steveax Aug 11 '13 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 '16 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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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