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(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
   .invisible { visibility: hidden; }
8
задан Jitendra Vyas 25 January 2011 в 17:23
поделиться