web网页规范 - WCAG方针

今天看到一个招聘信息，其中有个要求是这样的

- 所开发出来的界面能通过W3C的认证, 有 WCAG 经验者优先

由于自己刚出茅庐，就疑问了，什么事WCAG,上网查了下，原来如此

WCAG - 网页内容亲和力方针（Web Content Accessibility Guidelines）

这里的方针列出了很多，请看：

　　规范1: 对于听觉及视觉的内容要提供相等的替代文字内容

　　规范2: 不要单独靠色彩来提供特殊信息

　　规范3: 适当地使用标记语言和样式窗体

　　规范4: 阐明自然语言的使用

　　规范5: 建立编排良好的表格

　　规范6: 确保网页能在新科技下良好地呈现

　　规范7: 确保使用者能处理时间敏感内容的改变

　　规范8: 确保嵌入式使用者接口具有直接可及性

　　规范9: 设计装置独立网页

　　规范10: 使用过渡的解决方案

　　规范11: 使用国际与国内官方订定的技术和规范

　　规范12: 提供内容导引信息

　　规范13: 提供清楚的浏览网站机制

　　规范14: 确保简单清楚的网页内容

具体的规范内容如下：

　　规范一: 对于听觉及视觉的内容要提供相等的替代文字内容

　　1.1图片需要加上替代文字说明

　　1.2对于applet提供替代文字说明

　　1.3对于object提供替代文字说明

　　1.4对于窗体中的图形按键提供替代文字说明

　　1.5影像地图区域需要加上替代文字说明

　　1.6当影像地图使用为上传按钮时，每一作用区域必须分别使用不同的按钮

　　1.7当alt属性的文字陈述大于150个英文字符时，考虑另外提供文字叙述

　　1.8提供longdesc以外的描述性超级链接(如D超级链接)，来描述longdesc的内容

　　1.9图形替代文字陈述不够清晰时，提供更多的文字描述(如使用longdesc属性)

　　1.10所有语音档案必须有文字旁白

　　1.11以可及性的影像来替代ASCII文字艺术

　　1.12视讯中的声音必须提供同步文字型态的旁白

　　1.13服务器端影像地图中的超级链接必须在网页中有额外对应的文字超级链接

　　1.14多媒体视觉影像呈现时，必须提供听觉说明

　　1.15多媒体呈现时，必须同步产生相对应替代的语音或文字说明

　　1.16客户端影像地图中的超级链接必须在网页中有额外对应的可及性超级链接

　　

　　规范二:不要单独靠色彩来提供特殊信息

　　2.1确保所有藉由颜色所传达出来的讯息，在没有颜色后仍然能够传达出来

　　2.2确保前景颜色与背景颜色彼此呈现明显的对比

　　

　　规范三:适当地使用标记语言和样式窗体

　　3.1以实际存在的标记语言(如MathML)呈现网页内容(如数学方程式)，避免使用图形影像呈现

　　3.2确定网页设计档，有效使用正规的HTML语法

　　3.3在doctype标签中，使用标准规范的叙述以识别HTML版本类型

　　3.4尽可能使用样式窗体控制网页排版与内容的呈现

　　3.5要使用相对尺寸(如%)而非绝对尺寸(如像素)

　　3.6适当使用巢状标题呈现文件结构

　　3.7避免使用header标签来产生粗体字效果

　　3.8项目符号及编号之卷标(如li、ul)仅可使用于实际网页内容的项目条列，不可用于编辑格式

　　3.9确保q和blockquote标签只是用来当引用语而不是用来缩排

　　3.10以q及blockquote卷标来标记引用语

　　

　　规范四:阐明自然语言的使用

　　4.1明确地指出网页内容中语言的转换

　　4.2用abbr及avronym标签表示网页中呈现的文字缩写与简称

　　4.3明确指出网页文字所使用的自然语言

　　

　　规范五:建立编排良好的表格

　　5.1对于每一个存放数据的表格（不是用来排版），标示出行和列的标题

　　5.2表格中超过二行/列以上的标题，须以结构化的标记确认彼此间的结构与关系

　　5.3在网页内容呈现设计时，避免以表格做多

　　栏文字的设计

　　5.4若表格只做为版面配置时，勿使用表格之结构标记(如th卷标)作为网页格式视觉效果

　　5.5表格须提供表格摘要说明(如summary属性)

　　5.6数据表格须提供标题说明

　　5.7表格行列过长的标题，须提供缩写或简称

　　

　　规范六:确保网页能在新科技下良好地呈现

　　6.1使用 CSS 样式表编排的文件需确保在除去样式表后仍然能够阅读

　　6.2页框连结必须是HTML档案

　　6.3使用Script语言需指定不支持Script时的办法

　　6.4若网页内的程序对象没有作用时，确保网页内容仍然可以传达

　　6.5若网页对象使用事件驱动时，确定勿仅使用鼠标操作

　　6.6使用页框时要指定不支持页框时的办法

　　

　　规范七:确保使用者能处理时间敏感内容的改变

　　7.1确保网页设计不会致使屏幕快速闪烁

　　7.2避免使用blink卷标闪烁屏幕

　　7.3避免使用marquee卷标移动文字

　　7.4避免使用动态gif图片

　　7.5不要让网页每隔一段时间自动更新

　　7.6不要自动转移网页的网址

　　

　　规范八:确保嵌入式使用者接口具有直接可及性

　　8.1对由Scripts、Applets及Objects所产生之信息，提供可及性替代方式

　　

　　规范九:设计装置独立网页

　　9.1尽量使用客户端影像地图替代服务器端影像地图连结

　　9.2对所有网页内容元素，确保有鼠标以外的操作接口

　　9.3确保事件的启发不要求一定得使用鼠标

　　9.4具体指出按下Tab键在窗体控件，超级链接及对象间移动的顺序

　　9.5对经常使用的超级链接，增加快速键的操作

　　9.6对于窗体组件考虑提供键盘快速键的操作

　　

　　规范十:使用过渡的解决方案

　　10.1除非使用者知道将会开启一个新窗口，不要随便开启一个新窗口

　　10.2如果使用Script语言开启新窗口或改变目前窗口的网址，要让使用者能事先知道

　　10.3确保窗体的控件与控件说明之间的配合很适当

　　10.4若有以表格直栏格式呈现的网页文字内容时，提供线性文字替代

　　10.5在网页文字输入区中须有默认值

　　10.6勿单以空白间隔分开相连之超级链接

　　

　　规范十一:使用国际与国内官方订定的技术和规范

　　11.1如果你不能使这个网页无障碍化，提供另一个相等的无障碍网页

　　11.2尽量使用开放性的最新国际标准规范

　　11.3避免使用过时的HTML语法

　　11.4允许使用者依照个人喜好设定网页呈现方式与内容

　　

　　规范十二:提供内容导引信息

　　12.1需要定义每个页框的名称

　　12.2如果页框名称无法描述页框中的内容的话，应加上额外叙述

　　12.3把太长的选单项目群组起来

　　12.4在窗体控件中，使用fieldset及legend标签作群组间的区隔

　　12.5尽可能将网页内容有相关之元素聚集在一起

　　12.6在窗体控件上，以label卷标提示信息

　　

　　规范十三:提供清楚的浏览网站机制

　　13.1设计并确保有意义的超级链接说明，便于网页内容的阅读

　　13.2如果需要的话，为每个超级链接加上内容描述

　　13.3指向不同网址的超级链接，不可使用相同的超级链接说明

　　13.4使用metadata卷标来记载计算机可以了解运用的网页信息

　　13.5为你的网页加上标题

　　13.6为你的网站提供网站地图或整体性的简介

　　13.7网页设计使用清楚且一致的导览机制

　　13.8提供网页导览连结工具列，以利存取网站导览结构

　　13.9能辨别出意义上有群组相关的超级链接

　　13.10若有群组超级链接，在群组之前增设一项绕过此区域的超级链接

　　13.11若网站具有搜寻功能，可以设计不同的网页内容搜寻方式，以提供不同技能与喜好者搜寻选用

　　13.12在网页标题、段落、及列表之前，提供辨别讯息以利识别

　　13.13以metadata标签来识别网页文件包含于整体文件内的所在位置

　　13.14：H313213 避免在网页上使用ACSII文字艺术

　　

　　规范十四:确保简单清楚的网页内容

　　14.1网页内容要使用简单易懂的文字

　　14.2使用可及性的图形促进网页内容的理解

　　14.3网页彼此间设计呈现的风格要一致

 

规矩实在多，做前端的还是该稍微了解下的。慢慢消化吧！