Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
2  
Awesome question. :) –  Patrick McElhaney Dec 9 '11 at 1:34
add comment

2 Answers

up vote 5 down vote accepted

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.

share|improve this answer
    
Great answer! :) –  Tony Bolero Dec 9 '11 at 8:23
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
add comment

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/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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