title: How to target a braille / screen-reader via CSS
body: <p>I use a webfont to display some icons on a website. This is fantastic because they scale, and i can print them if i want to... But the problem is that blind people see them as normal letters or characters. The following example returns me a nice Icon + text.</p>
  
  <pre><code>&lt;span&gt;i&lt;/span&gt; Info
  &lt;span&gt;t&lt;/span&gt; Contact
  etc...
  </code></pre>
  
  <p>A blind person will just read: iInfo, tContact etc...</p>
  
  <p>Is it possible somehow to target only braille- &amp; screen-readers with CSS?</p>
  
  <p>I found this on the w3 website, but I'm not sure if the work in real live:
  <a href="http://www.w3.org/TR/CSS2/media.html#media-types">http://www.w3.org/TR/CSS2/media.html#media-types</a></p>
  
  <p>Does anyone have any experience with this?</p>
  
  <p>------<strong>update</strong>-----</p>
  
  <p><code>:before</code> &amp; <code>:after</code> -> Some screen-readers such as VoiceOver for MacOS do read the "content" part out loud. I have tested this by my self.</p>
  
  <p><code>@media braille, speech</code> -> Seams not to  have a influence on VoiceOver. It reads whats visible on the screen (tested with safari &amp; chrome)</p>
  
  <p><code>speak: none;</code> -> has no influence at all on VoiceOver or NVDA ( <a href="https://twitter.com/#!/jcsteh/status/143848614979055616">https://twitter.com/#!/jcsteh/status/143848614979055616</a> )</p>