How to hide a link from a screen-reader?

Question

I have a link which I want to show to visitors with vision, but hide from visitors using screen-reader ATs. (This is not ideal of course).

This is the reverse of the usual problem (with known solution) of hiding content from vision visitors (e.g. a "skip to content" link)

An example:

Clicking the "read more" link expands the text inline.

and conversely, clicking the "read less" link collapses it again.

This collapsed/expanding text functionality is only of benefit to visitors with vision, whose field of view would take in the extra text before they get to it (and in this example displaces the next FAQ, pushing it off screen).

A visitor with a screen-reader should instead be presented with the full text as they can choose to skip ahead to the next block, and they shouldn't encounter a spurious "read more" link which (a) doesn't link to a page, and (b) simply gives them what they were about to hear from their screen reader anyway.

How would this be done in HTML5?

Answer 1

Use aria-hidden this way for the content:

<p aria-hidden="true">Screen readers will not read this!</p>