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

还有另一个让元素具有焦点的课程，但请阅读更多in this article。

Answer 3

回答部分问题。 W3C关于隐藏部分链接文字 - C7: Using CSS to hide a portion of the link text的技巧的文章。

文章摘录： 此技术的工作原理是创建一个CSS选择器来定位要隐藏的文本。选择器的规则集将要隐藏的文本隐藏在隐藏溢出的1像素框中，并将文本定位在视口外部。 这可确保文本不会显示在屏幕上，但仍可供屏幕阅读器和盲文显示等辅助技术使用。请注意，该技术不使用visibility：hidden或display：none属性，因为这些属性可以除了防止屏幕显示外，还隐藏了辅助技术文本的无意识效果。

Answer 4

在您的HTML中：

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

在你的CSS中：

hideMe{display:none;}

Answer 5

好吧，你有display:none，visibility:hidden，并将文字远离屏幕。

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

您无法使用HTML和CSS隐藏屏幕阅读器中的内容，但却让真实的人可以看到它。如果它在页面中，它就在每个人的页面中。充其量，您可以使用robots.txt来阻止引擎抓取页面。

Answer 6

我喜欢@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;

如何隐藏有视觉的用户和搜索引擎中的任何文本，而不是屏幕阅读器？

6 个答案: