您的位置: 首页 >日志>前端技术>详细内容

前端技术

提高网站可访问性

来源:本站原创 发布时间:2011-07-02 00:37:56 浏览次数: 【字体:

可访问性 英文译为 Accessibility
在Web前端开发界,有三个词经常被提及:可用性(Usability)、可访问性(Accessibility)和可维护性(Maintainability)。在《Web Content Accessibility Guidelines 1.0(Web内容可访问性指南)》里,对可访问性的描述是:Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明:提高可访问性也能让普通用户更容易理解Web内容。
具体而言,要考虑以下两方面:
无论用户是否残障,都得通过用户代理(User Agent)来访问Web内容。因此要提高可访问性,首先得考虑各种用户代理:桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。在Google, 专门聘请了一些残障雇员,来帮助提高产品的可访问性。
还得考虑用户访问Web内容时的环境限制。比如:嘈杂的环境、过暗或过亮的房间、或者是免提等各种情况。这是更高一层次的可访问性要求,做到了,能造就产品在特定领域的核心竞争力。

那么在编写代码的时候应该怎么注意提高可访问性呢?

1.对比度,确保你的网站有足够的对比度。

2.不要用色彩作为唯一的标识,如股票不只有颜色表示,还有箭头,因为对于色盲来说红色和绿色是容易搞混的。

3.给图片加alt,alt=”"会被屏幕阅读器忽略,role=”presentation”可以让屏幕阅读器忽略图片。

4.当链接文字和背景同色时,加一个background color,否则当背景图片为透明时可能会产生问题。

5.当使用position:absolute; left:-999em来创建离开屏幕的文本在html设置dir=”rtl”时会产生很长的滚动条。

6.正确使用clip。

7.不要忘记键盘的可访问性,不要移除focus和active的样式,除非你找到替代的方法,因为click事件是被键盘和鼠标用户支持的。

8.不要用链接作为一个button,如果要用的话至少加一个role=”button”,你也可以把一个button做成链接的样式。

9.绑定input和label,用屏幕阅读器测试一下你的表单。

了解更多,请访问Yahoo! Accessibility Lab的代码去发现可访问性的最佳实践。

×

用户登录