How to hide any element from page only from Screenreader but not from page for normal users?

How to hide any element from page only from Screenreader but not from page for normal users?

I know these snippets but I want to hide something from screen redaer but not from page visually. Sscreen reader should skip the hidden part.

/* Hide for both screenreaders and browsers
      css-discuss.incutio.com/wiki/Screenreader_Visibility */
    .hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders
    www.webaim.org/techniques/css/invisiblecontent/ ; &  j.mp/visuallyhidden ; */
   .visuallyhidden { position: absolute !important;   
    clip: rect(开发者_JAVA技巧1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
   .invisible { visibility: hidden; }

Use this on the element:

aria-hidden="true"

This displays the element as normal to sighted users, but doesn't get read aloud by a screen reader.

I think Michael's response above would be the most semantically sound and proper way of accomplishing what you want. The only issue is on the screenreader\browser support as he points out.

A quick and dirty way is to display whatever content you want visually as an image and then assign it a blank alt text value e.g.

<img src="visualcontentonly.png" alt="" />

What is the content you are wanting to hide from screenreader users? There may be a more appropriate way of dealing with the issue. Whilst displaying it as an image would work, it may be frowned upon from an accessibility standpoint, depending on what the content is.

I'm not certain if Screen Readers will obey anything in the new CSS3 Speech Module, but it might be something you could test out, as it seems like the easiest option if it works.

http://www.w3.org/TR/css3-speech/