5 ms·

Perhaps it should also include a non-ligature way of displaying icons. In current accessibility practices, when you place a description after its image you are

Perhaps it should also include a non-ligature way of displaying icons. In current accessibility practices, when you place a description after its image you are supposed to include an empty alt attribute. So say you have social icons... ◈ Facebook ◈ Twitter You are supposed to write <img alt="" /> Facebook <img alt="" /> Twitter As to cue screen readers to not read out loud filename or the alt attribute. In this case Symbolset works as the alt property of images, so you would do something like... Facebook Facebook Twitter Twitter Which wouldn't be right.

deleted 14y ago
[deleted]
tylermenezes 14y ago
.icon { speak: none; }
- duopixel 14y ago
 Ah, nice, didn't know about speak: none;
- ejdyksen 14y ago
 Last I checked, aural stylesheets aren't broadly supported. You'd be much better off using ARIA (which has pretty broad support from browser vendors and assistive technology vendors): Facebook Facebook Twitter Twitter This keeps assistive technologies from rendering the text (not just screen readers, but Braille displays, etc). http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/wai-aria/
 - bill-nordwall 14y ago
 Support for aria-hidden is still pretty spotty: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/ http://www.456bereastreet.com/archive/201205/hiding_visible_...
- lloeki 14y ago
 Looks nice having CSS supporting non-visual presentation. Sounds like a job for @media queries too, so I looked up on the w3c website [0] and there are a bunch of non-visual targets along 'print' and 'screen', like 'aural' and 'braille'. [0] http://www.w3.org/TR/css3-mediaqueries/ http://www.w3.org/TR/css3-mediaqueries/
biftek 14y ago
You can also just use Unicode values. See the icons on the blog page. So something like "ģ" or "\0123" will also work.
PawelDecowski 14y ago
<img alt="" /> Facebook You’re not supposed to use the <img> element for presentation (which icons are). Instead, you should use CSS: <li class="facebook">Facebook</li> .facebook { background-image: (...) padding-left: (...) } <img> element should be used for graphics that are part of the content: photos, illustrations, etc.

deleted 14y ago

[deleted]

tylermenezes 14y ago

.icon { speak: none; }

duopixel 14y ago
Ah, nice, didn't know about speak: none;
ejdyksen 14y ago
Last I checked, aural stylesheets aren't broadly supported. You'd be much better off using ARIA (which has pretty broad support from browser vendors and assistive technology vendors): Facebook Facebook Twitter Twitter This keeps assistive technologies from rendering the text (not just screen readers, but Braille displays, etc). http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/wai-aria/
- bill-nordwall 14y ago
 Support for aria-hidden is still pretty spotty: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/ http://www.456bereastreet.com/archive/201205/hiding_visible_...
lloeki 14y ago
Looks nice having CSS supporting non-visual presentation. Sounds like a job for @media queries too, so I looked up on the w3c website [0] and there are a bunch of non-visual targets along 'print' and 'screen', like 'aural' and 'braille'. [0] http://www.w3.org/TR/css3-mediaqueries/ http://www.w3.org/TR/css3-mediaqueries/

biftek 14y ago

You can also just use Unicode values. See the icons on the blog page. So something like "ģ" or "\0123" will also work.

PawelDecowski 14y ago

<img alt="" /> Facebook You’re not supposed to use the <img> element for presentation (which icons are). Instead, you should use CSS: <li class="facebook">Facebook</li> .facebook { background-image: (...) padding-left: (...) } <img> element should be used for graphics that are part of the content: photos, illustrations, etc.