提高网站可访问性

2013-11-02 23:35 youxin 阅读(374) 评论(0) 编辑收藏举报

可访问性英文译为 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的代码去发现可访问性的最佳实践。

一篇非常好的文章；