如何对有视力的用户和搜索引擎隐藏任何文本，但不对屏幕阅读器隐藏？

Question

对有视力的用户隐藏任何文本但不对流行的屏幕阅读器隐藏任何文本的最佳测试方法是什么？ 并且不影响SEO。

例如，如果我仅为屏幕阅读器用户添加任何隐藏文本，那么当搜索引擎抓取该页面时，搜索引擎不应抓取该文本。

Answer 1

jQuery UI CSS 框架通过将元素定位在远离屏幕的位置来实现此目的，例如

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

Answer 2

我正在使用系统 Drupal 7 类，它似乎工作得很好（并且似乎是迄今为止视觉上隐藏内容的最佳方式，但使其可供屏幕阅读器使用）：

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

还有另一个类用于使元素可聚焦，但请阅读更多

Answer 3

我喜欢 @rkallensee 的答案，并且 HTML5BP 样式表上建议了类似的内容。但就我而言，在 I-Pad 4 上查看时，高度就是浏览器滚动条的高度。它的表现就好像内容仍然存在一样。对于少量内容来说这还可以，但如果隐藏大量内容，那么看起来网站下方似乎有更多内容。

我可以只添加 1px 的高度。但我使用 JS 测量 div 内的高度，这搞砸了。我发现使用 max-height:1px 可以解决这两个问题。我正在使用的代码是：

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
max-height:1px;

Answer 4

回答你的部分问题。
W3C 有关隐藏部分链接文本技术的文章 - C7：使用 CSS 隐藏部分链接文本 。

文章摘录：
该技术的工作原理是创建一个 CSS 选择器来定位要隐藏的文本。选择器的规则集将要隐藏的文本放置在隐藏溢出的 1 像素框中，并将文本放置在视口之外。 这可确保文本不会显示在屏幕上，但仍可供辅助技术（例如屏幕阅读器和盲文显示器）访问。请注意，该技术不使用visibility:hidden或display:none属性，因为这些属性可以具有除了阻止屏幕显示之外，还对辅助技术隐藏文本产生了无意的影响。

Answer 5

在 HTML 中：

<span class="hideMe">some text</span>

在 CSS 中：

hideMe{display:none;}

Answer 6

好吧，您已经有了 display:none、visibility:hidden，并将文本放置在远离屏幕的地方。

并非所有屏幕阅读器都遵循标准，并且没有处理非标准行为的标准方法。

您无法使用 HTML 和 CSS 对屏幕阅读器隐藏内容，但又使其对真人可见。如果它在页面中，那么它就在每个人的页面中。最好的情况是，您可以使用 robots.txt 来防止引擎抓取页面。