如何隐藏屏幕阅读器的链接？

Question

我想要向有远见的访问者展示一个链接，但使用屏幕阅读器AT隐藏访问者。

这与隐藏视觉访问者内容的常见问题（已知解决方案）相反（例如，跳过内容＆＃34;链接）

一个例子：

点击＆＃34;了解更多＆＃34; link将文本内联扩展。

相反，点击＆＃34;少阅读＆＃34;链接再次崩溃。

此折叠/展开文字功能仅对有视力的访问者有利，其视野会在到达之前收集额外的文本（在此示例中取代下一个常见问题解答，将其推离屏幕）。 / p>

带有屏幕阅读器的访问者应该被提供全文，因为他们可以选择跳到下一个区块，他们不应该遇到虚假的＆＃34;阅读更多＆＃34;链接（a）没有链接到页面，（b）只是简单地告诉他们他们将要从屏幕阅读器听到的内容。

如何在HTML5中完成？

Answer 1

以这种方式使用aria-hidden作为内容：

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

Answer 2

您可以尝试将链接放在伪元素中。这带来了另一个问题：您无法点击伪元素，因为它不是DOM的一部分，但可以使用pointer-events伪造它。

＆＃13;

＆＃13;

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

＆＃13;

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}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我以display:none为例，当然我假设你有自己的隐藏文字的方法，但没有JAWS或其他屏幕阅读器。