无障碍访问指导标准 (CSS)

[Go7hic]

无障碍访问指导标准

基本规则

• 1.网站必须满足 WCAG 的所有一级优先检查点.
• 2.网站应该满足 WCAG 的2,3级优先检查点.
• 3.禁止使用 !important .
• 4.给每个页面的 body 元素上设置一个统一的 class ,以便为用户样式表提供一个钩子.
• 5.应该避免使用任何闪烁的内容.
• 6. 应该使用屏幕阅读器对网站进行测试.
• 7.禁止依赖 hover 状态或动画传达信息
• 开发人员可以提供备用样式表,但必须在页面内提供切换样式表的方法,而不是靠浏览器检测去切换.

字体

• 1. 默认字体应该大小禁止小于 12px.
• 2.网站必须经过至少两级的文字缩放测试.
• 3.文字大小应该使用 em 单位.
• 4.如果想一大写方式显示文本,必须用 text-transform 属性来将显示转换为大写.

链接

• 1.对连接应该始终定义访问状态,鼠标悬停状态,选择状态,和聚焦状态.按照'爱恨原则'来:link,:visited,:hover,:active,:focus.
• 2.禁止对非超链接文字使用下划线效果.
• 3.链接应该有较大的点击区域.

颜色

• 1.已访问的颜色和未访问的颜色应该不同.
• 2.文字颜色与其背景色对比,明度差异必须至少有125,颜色差异必须至少有400. 可以用 Color Contrast Check 检查.
• 3.禁止使用任何色盲用户无法识别的颜色组合.
• 4.禁止使用颜色来传达信息.
• 5.必须通过颜色将导航和其他元素区分开来.
• 6.使用背景图片的元素必须有一个备用的背景颜色.
• 7.可以使用色盲模拟器(比如:Color Oracle)来对比网站进行测试.

无障碍访问里面有很多东西需要学习,我这里只是部分从 css 解决的办法,一般我们的小网站可能不会照顾这些用户,但是像那些大网站肯定要考虑到那些网络'残疾用户',所以作为前端人员我们也有必要为他们创建体验良好的网站.更多的无障碍访问标准参考: http://www.w3.org/2014/04/WCAG_ZH.html .