很多网站左上角都有包含自己网站名称的标识(logo),而这些标识一般都是图
片,为了更好地 SEO 以及无障碍识别,我们一般会使用<h1>标签写上网站的名称,代码如下:
<a href="/" class="logo">
<h1>网站名</h1>
</a>
隐藏<h1>标签中的“网站名”这几个文字,通常有以下一些技术选型。
• 下策是 display:none 或者 visibility:hidden 隐藏,因为屏幕阅读设备会忽略
这里的文字。
• text-indent 缩进是中策,但文字如果缩进过大,大到屏幕之外,屏幕阅读设备也
是不会读取的。
• color:transparent 是移动端上策,但却是桌面端中策,因为原生 IE8 浏览器并不
支持它。color:transparent 声明,很难用简单的方式阻止文本被框选。
• clip 剪裁隐藏是上策,既满足视觉上的隐藏,屏幕阅读设备等辅助设备也支持得很好。
.logo h1 {
position: absolute;
clip: rect(0 0 0 0);
}
任何元素、任何场景都可以使用。例如,我们定义一个类:
.clip {
position: absolute;
clip: rect(0 0 0 0);
}
就可以整站使用,哪里需要“可访问性隐藏”就加一个类名.clip 就可以了。