无障碍实战 之 视觉隐藏内容

原文来自:http://www.topcss.org/?p=418

作者:进步博客

腾讯ISUX组内做的一个分享,主题是”视觉隐藏内容”,主要关注隐藏的方式、方法及每种方法对可访问性的影响,并着重分析了a & label元素的可访问性,介绍了使用clip来做视觉隐藏。内容有点散,但主题明确,其他组的几个同事来要PPT,现在传至slideshare,错误之处,请指正。

一. 概述

Web内容无障碍指南(WCAG)2.0

Web内容无障碍指南(WCAG)2.0定义了如何使web内容更便于残障人士访问。它定义了web内容无障碍的四项基本原则,即可感知、可操作、可理解和健壮性,为了达到这些基本目标,每条原则之下设置了应遵循的准则,对每一个准则,提供了可测试的成功标准。

内容隐藏 分类 作用 示例
完全隐藏 用户交互 display:none;
对屏幕阅读器隐藏 减少干扰 tabindex=“-1”
视觉隐藏
(对屏幕阅读器可见)
提供语境信息 text-indent:999em;
line-height:99;

降低信息噪音,减少干扰

将重复信息和为明眼用户提供的信息从屏幕阅读器访问序列中移除。

头像链接的作用:

  • 明眼用户快速辨识好友,这对视障用户没有意义;
  • 链接至好友主页,与人名链接的作用一致,作用重复;

为了减少干扰,我们可以使用tabindex=“-1”,将头像链接从屏幕阅读器访问序列中移除。

视觉隐藏文本思路

  • 1.为屏幕阅读器提供补充文本
  • 2.通过CSS隐藏这些文本

SEO and Accessibility

  • SEO and Accessibility
  • High Accessibility Is Effective Search Engine Optimization

二. 隐藏方式对可访问性的影响

视觉隐藏
–纯文本
–label文本
–链接
–链接文本

视觉隐藏的关注点:

1. 它应使元素消失(仿佛文档中不存在该元素)
–应该没有多余的空白、没有滚动条、不能出现与层叠相关的问题(不可点击)等。
2. 当隐藏容器中的元素获得焦点时,应防止出现意外的滚动。
–即当用户使用tab导航到隐藏容器内的可聚焦的元素时,网页不应该跳跃。
3. 双向(bidi-directional )字符集语言友好。
–即应该同时支持从右到左,从左到右的界面,如阿拉伯文和希伯来文。

如何检测屏幕阅读器能否访问你隐藏的内容?

  • 使用键盘来访问隐藏容器内的可聚焦元素(可以在容器中添加一条链接)。
  • 如果键盘导航能够跳至隐藏容器内的元素,那么内容是可以访问的。

text-indent: -999em;

作用元素:文本 | inline元素

1
2
3
4
5
6
7
a.hide-indent {
	display: inline-block;
	width: 120px;
	height: 30px;
	text-indent: -10px;
	overflow: hidden;
}

ie6-7 and text-indent bug

IE6/IE7下,使用负缩进的方法隐藏inline-block元素内的文本,该元素也会缩进相同的值。

存疑:

text-indent方法不适用于right-to-left 方向的语言(阿拉伯语、希伯来语 属于双向(bidi)字符集语言)。

height: 0;

1
2
3
4
5
6
.hide-h0{
    width: 0;
    height: 0;
    overflow: hidden;
    display: inline-block;
}

apple的voice Over无法读出高度为0元素内的内容 。

Positioning content off-screen

1
2
3
4
5
6
7
8
.hide-offscreen-top{
	position: absolute; 	/*文档流中抽出*/
	top:-9999px; 			/*内容垂直往上移动9999px*/
	left: auto;				/*水平位置与内容原位置相同*/
	width:1px;
	height:1px;
	overflow: hidden;
}

positioning content off-screen

1
2
3
4
5
6
7
8
.hide-offscreen-left{
	position: absolute;    /*文档流中抽出*/
	top: auto;			   /*垂直位置与内容原位置相同*/
	left: -9999px;         /*内容水平向左移动10000px*/
	width:1px;
	height:1px;
	overflow: hidden;
}

positioning content off-screen

对于明眼键盘用户的,以上两种方式,正是”视觉隐藏的关注点中第二条”所说的。如果隐藏的内容是垂直偏移( 即position:absolute; top:-999em;),那么Tab键跳到隐藏容器内的可聚焦元素时,页面会出现滚动。在任何情况下,即使没有偏移(即position:absolute; left:-999em;,其行为也是混乱的,因为没有视觉线索告诉这些用户他们在页面的哪个位置。

a元素

Techniques for WCAG 2.0

H30: Providing link text that describes the purpose of a link for anchor elements.

  • 一个链接在脱离语境时仍然有意义;
  • 链接文本在它出现的页面上应该是唯一的;(即不同资源不要使用相同的链接文本)
  • 链接文本千万不要使用“点击此处”或“更多”;
  • 不要使用一个长URL作为链接文本;(屏幕阅读器会全部读出来,用户会很烦躁的)。

Using the alt attribute for the img element to describe the purpose of a graphical link.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a href="routes.html"><img src="topo.gif" alt="查看丽江美景"/></a>
<!--错误的-->
 
<a href="routes.html"><img src="topo.gif" alt="" title="查看丽江美景"/></a>
<!--错误的-->
 
<a href="routes.html" title="查看丽江美景"><img src="topo.gif" alt=""/></a>
<!-- IE 、chrome读title值,Firefox读"空白"-->
 
<a href="routes.html"> <img src="topo.gif" alt="查看成都美景" title="查看丽江美景"/></a>
<!--正确的-->
 
<a href="routes.html" title="查看丽江美景"> <img src="topo.gif" alt="查看成都美景"/></a>
<!--正确的-->
 
<a href="http://www.topcss.org"></a> 
<!--AT在IE下读"www.topcss.org"  Firefox 、chrome下忽略-->
 
<a href="http://www.topcss.org" title="进步博客"></a>
<!--AT在IE下读"进步博客"  Firefox、chrome下忽略-->

Using an empty alt attribute when the anchor (a) \
element contains text that describes the purpose of
the link in addition to the img element. Note that the
link text will appear on the page next to the image.

1
2
3
<a href="routes.html">
	<img src="topo.gif" alt="" />小马哥
</a>

H67: Using null alt text and no title attribute on img elements for images that AT should ignore.

“null” alt ≠ have no alt

1
2
3
4
5
6
7
8
<img src="p.jpg" alt="" />
<!--AT 忽略图片-->
 
<img src="p.jpg"/>
<!--AT忽略图片,但不符合规范-->
 
<img src="p.jpg" alt="" title="钟楼" />
<!--IE、chrome 忽略图片 Firefox 读title值-->

H33: Supplementing link text with the title attribute

谨慎使用:

  • tool tip形式出现,大约5秒后消失
  • 无法控制title属性的内容,如对比度、字体大小、位置,放大器用户可能不能理解
  • Title旨在提供辅助信息,mouse over元素时出现; alt是在元素无法正常渲染时出现。IE6/IE7会在无title时以tooltip的形式显式alt的值。
  • 屏幕阅读器需要用户手动设置才能读出title值,有的根本就不能。

label元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"/>
<!--正确的-->
 
<label>First name: <input type="text" name="firstname"/></label>
<!--IE6不支持-->
 
<label for="firstname">First name:
	<input type="text" name="firstname" id="firstname"/>
</label>
<!--nvda会重复读label文本内容-->
 
 
<h3 id="search-header">Search your contact list</h3>
<input type="input" aria-labelledby="search-header">
<!--IE7 | IE8 | IE9 | Firefox 支持-->
 
<input type="input" aria-label="search-header">
<!--IE9不支持 | Firefox 支持-->
 
<!--优先级:aria-labelledby > aria-label -->
 
<input type="input" title="找图片" />
<!-- IE7 | IE8 | IE9 | Firefox 支持-->
 
<input type="input" placeholder="输入名字" />
<!--IE9不支持 | Firefox 支持-->

三. 使用CLIP属性隐藏元素

Clip属性

定义一个绝对定位 元素的可见区域。clip: rect(top, right, bottom, left);

top/bottom:定义与盒子顶部边框边缘的距离;

left/right:定义与盒子左边框边缘的距离;

 

clip

1
2
3
4
5
6
7
8
9
10
.element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

element-invisible

常用的视觉隐藏方法测试

站点统计