3

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

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

4

6 回答 6

3

jQuery UI CSS框架通过将元素放置在远离屏幕的位置来做到这一点，例如

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
于 2010-04-24T16:57:27.673 回答
3

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

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

还有另一个使元素可聚焦的类，但在本文中阅读更多内容。

于 2011-10-18T16:24:53.123 回答
1

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

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

于 2013-12-16T06:16:54.907 回答
0

在您的 HTML 中： 

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

在您的 CSS 中：

hideMe{display:none;}
于 2010-04-24T16:32:25.440 回答
0

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

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

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

于 2010-04-24T17:39:22.160 回答
0

我喜欢@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;
于 2013-06-24T12:42:24.793 回答