2

我正在开发一个插图工具，我希望它对用户来说是可视化的，但屏幕阅读器和搜索引擎可以访问它。我有以下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 属性的图像标签）？

4

3 回答 3

0

搜索引擎只分析可见内容。愿您可以将 img-Elements 与 alt-Attribute 一起使用。

于 2013-03-15T20:51:57.683 回答
0

根据这篇WebAIM 辅助功能文章，通常建议将仅屏幕阅读器的文本移至左侧 - 在任何浏览器窗口之外 - 屏幕阅读器仍将使用它。

.hidden{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

我也特别喜欢 Jason Lydon 发布的使用 text-indent 的链接，尽管它似乎只是旧机器和设备上的性能差异。所以选择吧！

于 2013-03-15T21:08:06.630 回答
0

我是 Zeldman 隐藏文本的隐藏文本 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;
}
于 2013-03-15T20:51:40.897 回答