[原创] 浅谈 CSS display:none 对 SEO 及屏幕阅读器（screen reader）的影响

一提到CSS的display：none，大家应该都很熟悉，如果需要将某HTML元素隐藏不显示的话，很多人都会使用它。也许你会问，这个还有必要再讲吗？且听我慢慢讲来。

现如今，很多网站都会使用Tab，Slide动画等这些常见的手段让用户能有好的使用体验，而且有时为了页面的简洁，我们也经常会用到display：none来达到隐藏元素的目的，再者很多鼎鼎大名的JavaScript库也会使用它，例如jQuery。

既然大家都用display：none，那么还有什么好谈的呢？

当然，合理合法的使用display：none对用户及SEO而言是正常的，搜索引擎也会去理会。可是如果非法的使用它们，借此想提高SEO的效果，就是非法的，而且搜索引擎也会对其进行惩罚。请看下面的例子：

<script language="JavaScript" type="text/javascript">
var o='d'+'i'+'v';
var a='style=\'disp';
var b='lay:';
var c='none\'';
document.write( "<"+o+a+b+c+">" );
</script>

类似这样的写法，大家可能也见过，有的连<script>标签也进行拆分连接，例如："<scr"+"ipt>"，这样做的目的只有一个，就是“欺骗”：希望通过在页面上插入关键字或链接来提高SEO效果但是又不想让用户看到。无论是SEO“欺骗”也好，还是出于其它目的进行“欺骗”也好，俗话说，出来混迟早是要还的。对于SEO而言，搜索引擎现在已经足够智能，对于上面这样简单的“欺骗”会进行严厉的处罚，所以任何侥幸的心理请不要有，因为随着算法的改进，各种黑帽（SEO欺骗技术）早晚都会被发现的，而且一定会被重罚的。

刚才提到的是display:none对SEO的影响，还有一个影响可能是很多人都不知道的，那就是对“屏幕阅读器（screenreader）”的影响。

使用iOS设备的人现在是越来越多了，不知道其中的“VoiceOver”功能你是否知道，是否了解，是否使用过。出于人性化的考虑，很多移动设备包括PC几乎都有“辅助功能”，帮助身体不便的人来使用，其中“屏幕阅读器（screenreader）”就是帮助视力有障碍的人来读出屏幕上的内容的。

如果一个网页中的内容使用了display:none，那就意味着，你同时拒绝了为用户显示及“屏幕阅读器（screenreader）”。然而这样的结果可能是你不想得到的，那么我们该怎么办呢？怎么才能既不显示在页面上，又对“屏幕阅读器（screenreader）”有效呢？请看如下的代码：

.visuallyhidden {
    position: absolute;
    width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;    
}

上面这段代码出自HTML5BoilerPlateproject（参见下文引用地址），你可以管它叫“可见的隐藏”，虽然用户看不到内容，但是“屏幕阅读器（screenreader）”却可以看见它。

你可能又会问了，“如果我使用了类似于jQuery这样的库怎么办？比如说，jQuery的slide动画会动态的在元素上生成display:none，那些的话，你说的这个办法不就不管用了吗？”

解决的办法当然是有的，请如下面的示例：

var $button = $('#myButton'),
    $text   = $('#myText'),
    visible = true;

$button.click(function(){
if ( visible ) {
  $text.slideUp('fast',function(){
    $text.addClass('hide')
         .slideDown(0);
  });
} else {
  $text.slideUp(0,function(){
    $text.removeClass('hide')
         .slideDown('fast');
  });
}
visible = ! visible;
});​

示例地址：http://jsfiddle.net/chriscoyier/zgtfA/1/

示例讲解：当visible为真时，此时元素的状态是可见的，首先执行动画slideUp将元素隐藏（此时元素上有display:none），动画结束时，添加“可见的隐藏”CSS，让元素不可见，然后再立刻执行slideDown动画，持续时间为0（即无动画过程），此时就移除了元素上的display:none，而且元素依然是不可见的（因为有“可见的隐藏”CSS）。

当visible为假时，此时元素的状态是不可见的，首先执行slideUp动画将元素隐藏（此时元素上有display:none），持续时间为0（即无动画过程），动画结束后，移除“可见的隐藏”CSS，此时元素依然是隐藏的，因为有display:none，之后再执行slideDown动画，显示元素内容。

总结：综上所述，若不考虑“屏幕阅读器（screenreader）”，合理合法的使用display:none是隐藏元素最简单的做法，而且还不用担心会被搜索引擎惩罚（因为不是黑帽），不会影响SEO效果。若你的网站支持移动设置访问，那么最好考虑到用户很可能是使用“屏幕阅读器（screenreader）”，因此你可以采用“可见的隐藏”方法来隐藏元素。