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

Question

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; }

Answer 1

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.