无障碍网页设计技术手册规范二

2-1确保所有藉由颜色所传达的信息，在没有颜色后仍然能够传达[第一优先等级]

2-1-1结构与呈现

当设计网页内容时，网页开发者应该先规划此网页的理想结构。许多网页开发者常常使用水平线分隔来区分章节，但是，水平线分隔的方式对于视障者或是非图像式的浏览器而言是没有意义的，网页开发者应该使用H1~H6的标签代替水平线来区隔不同的段落。
另外，在网页内容编排时，不可只为呈现编排的效果，而使用结构性标签，例如在HTML中，应该使用Q与BLOCKQUOTE标签来标记引用语及引用文，切勿使用此两种标签仅为了呈现缩排效果(见3-7的正确范例)。

2-1-2 确保不单独依赖色彩提供信息

网页开发者应确保网页内容不单独依赖色彩提供信息。例如，”回上一页请按绿色图示、到下一页请按红色图示”，这就是只依赖色彩提供信息的错误例子，因为视障者或是黑白荧幕的使用者无法辨读颜色所表达的信息，因此，网页开发者应透过其他样式表效果(如font)或是文字连结方式提供网页信息。

2-2确保前景颜色与背景颜色彼此呈现明显的对比[影像图像为第二优先等级，文字为第三优先等级]

2-2-1影像图形的颜色

当提供影像图形给视障者(弱视或色盲者 )，或是其他身心障碍者使用的黑白荧幕观看时，必须确保前景颜色与背景颜色有其明显的对比。

2-2-2颜色对比

网页上颜色的设定不建议以英文颜色名称设定网页色彩，而建议应该使用16进位颜色码取代英文颜色名称。举例说明，如果要设定网页中的背景颜色为白色及文字颜色为黑色时，写法不应为<body bgcolor="white" text="black">，而应该是<body bgcolor="#ffffff" text="#000000">。
不良设计：
H1﹛color：red﹜

正确范例：
H1﹛color：#808000﹜
H1﹛color：rgb(50%,50%,50%)﹜

「色盲」有先天性及后天性两种原因，先天性色盲大部份无法分清红色与绿色；后天性色盲，则是较无法辨别黄色与蓝色。而色盲的种类可分为以下四类：

1-红色盲:由于患者看不出可见光中的红色光，且会将青绿色看成是白色以及觉得由绿色到橙色都是同一种颜色，因此红色盲患者只能靠光线的明暗来区别颜色。

2-绿色盲:此类患者则是将绿色看成白色，且会将黄绿色到红色，全看成同一种颜色，也只能靠光线的明暗来区别颜色。

3-紫色盲:对紫色无法感受。

4-全色盲:全色盲无法区别颜色，他们所看到的一切，就像我们看黑白电影般，只能由明暗度区别白色，黑色和灰色。

无障碍网页设计技术

点击此查看-->手机端无障碍工具条演示(仅手机端打开)
点击此查看-->PC端无障碍工具条演示(仅PC端打开)
点击此查看-->我们能提供的信息无障碍服务
点击此查看-->无障碍工具条授权方式和区域代理
点击此查看-->相关服务报价参考

无障碍网页设计技术手册规范二

热门