html - 在某些情况下使用 css 隐藏文本并避免搜索引擎惩罚？

Question

我正在开发一个插图工具，我希望它对用户来说是可视化的，但屏幕阅读器和搜索引擎也可以访问它。我有以下 html:

<span class="card">A new idea is presented to the group. </span>
<span class="spoke userOne active understands">
  <span class="node">
    <span class="label">User one </span>
    <span class="relationship">is engaged in the conversation</span>
    <span class="user"><span class="status"> and understands. </span></span>
  </span>
</span>

这是使用和不使用 css 的插图渲染的链接:

http://jsfiddle.net/FnBd4/

http://jsfiddle.net/FnBd4/1/

编辑:我根据一些早期的回答稍微改变了这个问题。我试图不让文本与视觉表示混淆，但屏幕阅读器和搜索引擎仍然可以访问副本。现在，我通过将大多数元素的字体大小设置为 0px 来做到这一点，我想知道这是否会导致 SEO 惩罚？如果是这样，是否有理想的方法来做到这一点(除了使用带有 alt 属性的图像标签之外)？

Answer 1

我是 Zeldman 用于隐藏文本的 hide-text css 的粉丝:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}