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>

Answer 2

You can try to put the link in a pseudo element. That's brings another issue: you can't click on a pseudo element because is not part of the DOM, but can fake it with pointer-events.

$("p").click(function () {
  $("span").toggleClass('on');
 }); 

span {display:none; color:red}
p {pointer-events:none}
p:after {content:"Read more"; color:blue; text-decoration:underline; display: block;pointer-events:all}
span.on {display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at erat orci. Praesent non pulvinar nisl, at ultrices lorem. Sed semper ultricies eros, eu aliquet ipsum vehicula nec. Nullam orci justo, dapibus eget elit ac, tincidunt mollis urna. Ut sed felis lobortis, blandit urna non, fermentum arcu. Suspendisse fermentum elit ante. Nulla tincidunt elit vel elementum eleifend. Fusce sed nisi vulputate, aliquam urna congue, egestas arcu.<span> Praesent dignissim, risus in elementum eleifend, velit elit accumsan diam, sit amet vestibulum purus urna quis dui. Proin ut venenatis orci, sit amet ullamcorper tellus. Morbi lorem purus, ornare non convallis nec, venenatis cursus urna. Maecenas cursus, leo vel tincidunt viverra, leo nibh placerat sem, ut molestie tellus ex et nulla. Vivamus eget magna libero.</span></p>

I use display:noneas an example, of course I assume you have your own method to hide the text but no for JAWS or other screen readers.