参考:
无障碍网页开发:规范及技术手册
提高Web 设计的可读性 (web design readability)
看到这篇规范收获很多:其中关于radio button的可用性是这样描述的:
Vs第一个表单必须点击radio本身才能做选项切换,第2个表单只需要点击文字部分就能做相应的选项切换。虽然只是一点点改进,但是让用户鼠标可以比较容易的进行模糊的操作。
源代码如下:主要是通过label和相应的id做了关联
<form>
<FIELDSET>
<LEGEND>不好的设计:</LEGEND>
<INPUT name="sex" type="radio"
checked>男性<INPUT type="radio" name="sex">女性 <<--
点击"女性"左边的radio才能做选项切换</FIELDSET>
</form>和<form>
<FIELDSET>
<LEGEND>好的设计:</LEGEND>
<INPUT name="sex" type="radio" id="male"
checked><LABEL for="male">男性</LABEL><INPUT
type="radio" name="sex" id="female"><LABEL for="female">女性</LABEL>
<<-- 点击"女性"这个文本就能够做选项切换</FIELDSET>
</form>
附:
无障碍网页开发规范行政院研究发展考核委员会
中华民国九十二年九月
内容大纲
壹、前言 1
贰、无障碍网页设计准则 2
一、无障碍网页可及性设计原则 2
二、无障碍网页设计程序 3
参、优先等级 6
肆、检测等级 6
伍、十四条规范 7
陆、标准检测码 14
一、检测码格式 14
二、检测码讯息 15
附件:中英名词对照 21
参考标准 24
中华民国九十二年七月一日函颁实施
壹、前言
本规范的规划和订定主要是参考W3C(World Wide Web Consortium)协会的WAI(Web Accessibility
Initiative)组织订定的无障碍网页内容标准相关规范,并参照各国在制定无障碍网页相关政策和推广策略的做法,及国内近年来在身心障碍者保护政
策、无障碍空间的推动、视觉障碍者在无障碍网络相关措施的努力等经验所订定。
本规范所订定的网页各种可及性设计的准则内容,其适用范围包括有视觉障碍 (visual disabilities)、听力障碍 (hearing
disabilities)、肢体障碍 (physical disabilities)、和认知障碍或神经疾病 (cognitive or
neurological
disabilities)等方面的身心障碍人士使用网页信息所必须考虑的种种因素。除此之外,其考虑因素也包括这些身心障碍人士所使用的特殊上网装置
(包括屏幕阅读机、屏幕扩大机、特殊按钮、特殊键盘、特殊显示装置、点字输入装置和点字显示器等),这些装置可能是使用各种不同的操作系统,或只具有基本
的网页浏览功能。
本规范可供公众网站的拥有者、网站管理人员、网页开发者、及身心障碍人士使用,网站拥有者及网页开发人员在规划网站的架构与内容时,应先参考本规范,以开
发出无障碍的网站。若是网站内容无法符合本规范的相关条文,应该依据本规范的条文做必要的修改以符合网页的无障碍设计。身心障碍人士在上网浏览网站信息
时,若碰到无法克服的障碍,可参考本规范的条文透过适当管道要求网站拥有者予以修正。
本规范内容包括无障碍网页可及性设计四项原则、三个优先等级、六个检测等级、十四条规范、和九十个标准检测码。其章节安排的顺序可提供一个信息网站在处理
无障碍网页的规划、开发、设计、检测、和认证等工作时,可以依各发展阶段对于无障碍网页开发的需要提供相关的指引。
贰、无障碍网页设计准则
本章说明网页开发人员在设计网页时应该依循的作业方式和考虑原则。
一、无障碍网页可及性设计原则
网页开发人员在规划网站的架构、资源内容的整理和呈现的处理、网页相关技术的取舍等相关因素时,应该依循下列四个无障碍网页可及性设计原则。
原则一:多媒体相关信息的可及性
针对网页内各种多媒体信息(包括影像、图形、语音、音乐、影片等)应加入替代或等值的文字以提高这些信息的可及性。因为这些替代文字可以让屏幕阅读机、点
字显示器等各种特殊输出装置做进一步处理,让视觉障碍者或听觉障碍者可以使用其它替代方式获得其信息内容。至于针对认知障碍或神经疾病人士而言,应该在网
页的重要信息上避免使用炫光、快速动态影像等媒体效果,以免造成其在使用网页时的不适。
有关此原则的详细内容包括在规范一、二、四、七、十四。
原则二:网页结构和呈现处理的可及性
网页结构的设计很容易因为网页呈现美观的考虑而牺牲可及性设计。例如,网页设计者可能因为考虑网页文字对齐和美观,而采用表格和页框做排版功能,如此一来
网页就可能具有许多无任何信息意义的表格和页框而混淆了特殊输出入装置的处理功能;网页设计者可能因为要凸显信息内容的对照关系而采用不同颜色的区域,这
可能造成特殊输出入装置无法辨识的状况。以上设计的方式都可能破坏网页的可及性设计,因此在规划网页结构和呈现时应同时考虑可及性的因素,适当的使用网页
的结构卷标,忠实地利用结构和呈现卷标原先设定的功能,毋贪一时的便利或美观而混用不当的标签。
有关此原则的相关详细内容包括在规范二、三、五。
原则三:网页开发和输出入装置相关技术处理的可及性
全球信息网相关技术的进步日新月异,随时会出现许多新的技术,包括新的输出和输入装置、Script语言、网页内的程序对象、网页排版语言、以及特殊媒体
技术等。网页设计在融入这些技术时,应考虑提供给身心障碍人士的特殊上网装置可能尚不支持此项技术,因此在新技术引入时,应该考虑网页信息在不支持此技术
时的各种可及性替代方案,让身心障碍人士可以在不支持此技术时,仍然可以使用此网页的信息内容。例如,网页设计应考虑网页使用者可能无法使用鼠标,因此必
须考虑使用替代键盘人士操作网页的相关需求;网页设计在使用到网页内的程序对象时,必须考虑特殊上网装置可能无法执行此程序对象,因此应该提供替代网页或
相关措施让使用网页者可以获得其信息内容。
有关此原则的详细内容包括在规范六、八、九、十、十一。
原则四:网站浏览机制的可及性
网站内各网页的浏览机制应考虑可及性操作的需求。身心障碍者因为其障碍的差异,在使用特殊上网装置浏览网页时,其浏览操作不如市面上一般浏览器那么方便和
灵活,因此网站浏览机制的设计应力求简单清楚,让网页使用者可以依其需求来浏览网站。例如有些肢体障碍者只能做小区域的操作,网页信息的安排和设计应考虑
其限制,让使用者仍然能够浏览网站信息。
有关此原则的详细内容包括在规范十二、十三。
二、无障碍网页设计程序
本节说明网页开发人员如何在网站开发过程中融入本规范所规定的各种网页无障碍考虑,使开发完成的网站信息具有无障碍设计,以方便所有人士使用网站信息。
步骤一:网站规划阶段
网页开发者应该依照无障碍网页可及性设计的四个原则来整理信息和规划网站。例如,在整理网站的多媒体信息时,应该订出良好的描述规则来设计各种多媒体信息
的替代文字说明;对于输入项目多且操作功能复杂的网页,应该考虑使用替代网页;网页各项操作不应限定只能以鼠标操作,应该考虑键盘操作;网站的子系统网页
架构不宜太复杂,网页的配置和结构也力求单纯,以方便身心障碍者浏览。
步骤二:网站设计阶段
网页开发者在设计个别网页时,应该依照无障碍网页十四条规范的内容和精神来设计网页使用的卷标和相关处理对象。例如,适当的使用网页结构卷标和呈现窗体,
不应该贪一时的便利或美观而混用不当的标签。另外,网页开发者在网页编辑工具的选择上,可尽量选择具有网页可及性功能的网页编辑工具。在多媒体信息和网页
文件的格式上,可以尽量选用具有可及性特性的档案格式和技术。例如W3C订定的SMIL多媒体语言和其它格式的多媒体语言比较起来就有较佳的可及性和开放
性。另外,W3C订定的SVG二维向量图语言和具有类似功能的Flash向量图格式比起来,也有较佳的可及性和开放性。
步骤三:网站检测阶段
网页完成后,网页开发者可透过无障碍网页检测工具来检测网页的可及性设计。本规范订定了六种检测等级注,其中有三种检测等级是可由机器自动检测;
有三种检测等级是必须由人工加以判别与检测。网页开发者可以先使用相关检测工具做机器检测的作业。若机器检查出来有未通过的检测码,可参考标准检测码相关
讯息和范例说明来做网页规划和设计的修改。网页经过机器检测之后对于有些检测码的内容和检测项目无法由机器判别与检测者,则须再由人工依检测码的内容做判
别与检测的作业。人工检测作业的部份可以采取自我认定或由一个公正机构或组织来处理,其施行细节再由相关办法规范之。
步骤四:网页认证阶段
网页内容通过检测完成后,网页开发者可以依据相关网页通过的检测等级在本规范相关的官方网站内下载各个检测等级所对应的检测认证标章,并参照其规定方式在
网页的适当位置放置检测认证标章和说明。让网页使用者可以得知此网页通过的无障碍网页规范认证的等级。
注:检测等级的详细内容请参照请本规范第肆章检测等级。
参、优先等级
本规范为了让网页开发者和网页使用者能够对网页的可及性设计有明确的评估方式和一致的认定准则,特参考WAI组织在相关无障碍网页标准的设计,以三个优先
等级来规范无障碍网页的可及性设计。此三个优先等级会直接反映到本规范订定的十四条规范、标准检测码、检测等级、和检测认证标章。三个优先等级的定义如后
所示:
一、第一优先等级
网页内容开发者在开发网页时必须满足这个检测码。否则,某些使用者或团体将会发现不可能使用此文件的信息。满足这个检测码对一些使用网页文件的团体来说,
是一种基本的需求。
二、第二优先等级
网页内容开发者在开发网页时应该满足这个检测码。否则,某些使用者或团体将会发现有困难来使用此文件的信息。满足这个检测码,将可对网页文件移除重要障
碍。
三、第三优先等级
网页内容开发者在开发网页时可以纳入这个检测码的要求。否则,某些使用者或团体将会发现有可能有困难来使用此文件的信息。满足这个检测码,将可对网页文件
改善可及性。
肆、检测等级
本规范在网页无障碍设计的检测等级的规划在设计时经参考国内外相关的做法,考虑三个主要因素:优先等级、机器检测与人工检测、以及标准检测码的状态。其中
优先等级的考虑可以反映网页设计的可及性程度;机器检测与人工检测的考虑可以反映检测者的身份;标准检测码的状态的考虑可以反映检测处理方式的认定。
三个优先等级对应三个检测等级(A、Double-A、Triple-A),每个检测等级含机器及人工检测,即检测状态注必须通过0,1和2的检测状态
码。
注:标准检测码状态的定义请参照本规范第陆章第一节标准检测码格式。
伍、十四条规范
本规范为了让网页开发者能够对网页开发在可及性设计的考虑上有明确的规范条文,特参考WAI组织在相关无障碍网页标准的设计,以十四条规范来引导网页开发
者设计可以让所有人士都可以使用的无障碍网页。
规范一:对于听觉及视觉的内容要提供相等的替代文字内容
网页开发者在网页中遇到非文字的听觉或视觉内容时,如果能同时提供同等内容的替代文字,将可使听觉障碍或视觉障碍者能够无碍地浏览和获取这些信息内容。
视觉的内容包括图像、图表、动画等,而听觉的内容则包括音乐、语言和各种音讯。本规范所指的同等内容是指能描述视觉或听觉内容的一段文字叙述。譬如一个连
接到下一页的向右箭头的图像,「下一页」是适当的替代性文字;譬如一个烟火的动画,「有烟火声效的烟火场景动画」,则是适当的替代视觉与听觉的内容。
这些替代文字在网页中所带给我们的方便性与好处是因为语音合成器与点字显示器等技术的成熟。网页信息可藉由这两项技术,让非文字内容得以让视觉障碍者用听
的或触摸的方式了解其信息内容;对于一些有阅读困难的人(经常伴随着认知障碍、学习障碍、和耳聋)的人来说,要了解这些非文字的内容,可经由语音合成器来
朗读替代文字,将有极重要的帮助;替代文字的显示不但可以符合听障者的需求,对于非身心障碍的一般网页浏览者也是有额外的帮助。
规范二:不要单独靠色彩来提供特殊信息
对许多人而言,颜色本身有它的内涵,譬如我们习惯用红色来表示重要的信息,但是在非彩色屏幕环境下或对颜色辨识能力有障碍的人而言,原本颜色所传达的讯息
可能会散失或受损,网页内容的传达将达不到可及性要求。譬如当前景和背景在色泽上太接近时,有的人可能无法分辨;譬如不同物品的叙述用不同颜色来代表时,
有的色盲者可能也无法分辨。
规范三:适当地使用标记语言和样式窗体
在一般的网页标记语言中,标记有分作结构标记(structural markup)与呈现标记(presentation
markup)两种,两者在内涵上意义完全不同,在呈现效果上也有不同。例如表格卷标、窗体卷标、标题卷标、段落卷标等都是结构标记;粗体字标签、斜体字
卷标、换行卷标、保留文字编排卷标等都是呈现标记。网页设计者使用标记语言时,须严格遵守此标记的原本设计的目的,以避免身心障碍者在浏览网页时所使用的
特殊软件解读这些标记时产生误解。例如非表格信息使用表格卷标来产生呈现编排效果、如使用标题卷标来产生大字体的效果、如使用保留文字编排卷标来产生类似
表格的编排呈现效果,都是一些常见的错误使用范例。
规范四:阐明自然语言的使用
本条规范所指的自然语言是指中文、英文、日文或韩文等语言。网页设计者应该在文件里标示自然语言使用的变化,以方便语音合成器和点字输出机来处理,以自动
地将其转换成新的语言,让不同语言的使用者能顺利读取这份文件。网页设计者也应该定义文件内容的主要自然语言;遇到缩写和简称,应提供进一步的说明,以免
造成语音合成机或点字输出机的误判解读。而且这些自然语言的标记可以让搜寻引擎藉由这些标记来精确找出具有关键词的相关文件。对学习障碍、认知障碍、或听
觉障碍者而言,自然语言标记也改进了网页的可读性。
规范五:建立编排良好的表格
表格是网页信息的一种特殊数据架构,其包括的行、列、和数据格都有特别的信息涵义,因此浏览器在碰到网页的表格卷标时,都提供可以适当呈现表格的相关功
能。但是许多人在网页开发时,表格呈现在各行和各列的整齐划一特性让许多人非常喜欢用来做网页信息的呈现排版功能。如此使用对于一般浏览器使用者而言,并
不会造成任何问题,而且网页呈现也整齐美观。但是这种处理方式对于使用屏幕阅读机或点字显示器等各种特殊输出装置的视障人士而言,非表格结构的信息以表格
标签来处理时,网页内容会被切割成顺序错乱且无法理解的信息。
因此网页开发者应该避免使用表格卷标做单纯排版功能。在使用表格来呈现信息时,应该确实设计表格应有结构,表格的行和列以及表格本身应该利用适当卷标来标
明行标题、列标题、以及表格标题。
规范六:确保网页能在新科技下良好地呈现
因特网的技术日新月异,网页开发者往往在设计网页时,会使用新科技来强化其网页运作功能,因而忽略掉使用旧浏览器来处理信息的人士可能发生的种种问题。
因此网页开发者应该要确认在较新的科技不支持或关掉的时候,网页仍然具有可及性,仍然可以让使用者处理网页内的信息。
规范七:确保使用者能处理时间敏感内容的改变
在网页信息中所谓时间敏感内容是指网页显示的信息可能会以可移动、闪烁、或滚动条等方式来呈现或自动更新信息内容。因为某些有认知障碍、神经疾病人士在阅读
快速移动的文字或闪烁的图形会造成其注意力分散或者身体不适的现象;视觉障碍者所使用的屏幕阅读机的功能可能无法阅读滚动条文字;肢体障碍者可能因为只能做
小区域的操作,而不能和移动中的信息内容做互动操作。为了顾及以上人士使用网页的需求,网页开发者应该小心使用这些时间敏感内容的操作设计,要确定浏览器
所提供的控制机制可让身心障碍人士处理这些信息,否则就应该考虑提供这些数据对象或网页的替代方案。
规范八:确保嵌入式使用者接口具有直接可及性
网页在设计使用者接口的操作时,必须确认其是否遵循了可及性设计的原则,亦即使用者接口的功能和操作使用是否有考虑到网页使用者可能无法使用鼠标操作,因
此网页的使用者接口的操作设计应该具有键盘可操作化、或者可自行发声等特性。
当一个网页内的嵌入式对象拥有它的自有的接口时,这接口必须是具有可及性的设计。假如嵌入对象的接口无法做到可及性设计,就必须提供一个可及性的替代解决
方案。
规范九:设计装置独立网页
装置独立网页所代表的意思是指网页使用者可以使用他们偏爱的输入(或输出)装置-如鼠标、键盘、声音输入、头杖、或者其它输入装置─来和其使用的浏览器互
动。举例来说,如果一个网页内输入功能的控制只能以鼠标或其它的点选设备来启动,那么对那些无法使用一般浏览器而必须以声音输入、或者以键盘或其它非点选
设备来使用网页的人而言,将会无法使用这个网页。
网页开发者在使用影像地图或当成连结使用的影像时,所使用的替代文字说明部份,可以让使用者在不必使用鼠标等点选设备就能与他们互动。此部份的说明也可参
考规范1。
规范十:使用过渡的解决方案
本条规范所指的「过渡的」是指网页语言内有新技术出现时,可能因为厂商发展的浏览器所实作的功能还不完备,无法充分提供可及性考虑时,网页开发者在使用此
新技术时,应该额外设计和提供可及性的解决方案,使运用辅助科技和较旧版的浏览器仍能正确的操作。举例来说,较旧版的浏览器不允许使用者浏览至空的编辑对
话框(empty edit
boxes)。较老旧的屏幕阅读器在阅读连续的一串连结时,会将其视为只有一个连结。这些网页内功能强大的主动组件因而变成存取困难或根本无法存取。同样
地,网页内的超级链接操作产生改变现有的窗口或突然出现新窗口的动作时,对于无法看到这些状况的使用者来说,也可能会是非常迷惑的。
这些过渡的可及性的解决方案,并非是永久需要,可能在厂商发展的新版浏览器所实作的功能完备时,即可提供新技术在订定发展之时所规划的可及性功能。因此一
旦网页科技已经合并了预期的特性或能力,可能这些检测码在未来就不是必要的。
规范十一:使用国际与国内官方订定的技术和规范
网页开发者在设计网页时,应该尽量使用广泛被采用的国际与国内官方订定的技术和规范,避免使用单一厂商开发的特殊网页技术。因为许多国际订定的技术和规范
会考虑技术的开放性和各系统的互通性,而且也往往有比较多的可及性考虑。例如W3C协会订定的相关语言和技术在设计阶段即与相关企业一起考虑可及性的问
题。若目前使用这些语言和技术仍无法提供足够的可及性功能,也比较能够提供替代的可及性方案。
目前网页技术还有许多非W3C协会订定的格式(如:PDF、Shockwave等等)需要以外挂程序或其它的应用软件来观看。这些格式经常不能以标准的浏
览器以及其它现有的各种辅助科技来观看或浏览。避免使用非W3C和非标准化特性的网页信息组件(包括专属组件和特殊属性)将使网页更能适应使用各种类型的
软硬件和使用者。而且在碰到必须使用不可及的技术和替代方案时,也比较容易设计出符合可及性的替代网页。
网页开发者应该注意到,在做文件格式的转换时,例如,从PDF、PostScript、RTF等格式转换成为W3C的标记语言(譬如HTML、XML等)
并不保证一定能做出一份可及的文件。因此,在转换手续之后必须验证每个网页的可及性和可用性。假如网页未能完全转换时,就应该要持续改进该网页以尽量接近
它原本的表现方式,或者是另外提供一个HTML或普通文字版本的网页。
规范十二:提供内容导引信息
网页在处理内容导引信息之时,应提供上下文(context)和定向(orientation)信息来帮助使用者了解复杂的网页架构或相关组件。把组件分
组和提供有关组件之间的脉络关系对所有使用者都是有用的。网页开发者应该要注意到一个网站内网页各部分之间的复杂关系,对于有认知障碍的和有视觉障碍的人
要做解读可能会相当困难的。因此应该要考虑他们的困难,提供详细的内容导引信息。
规范十三:提供清楚的浏览网站机制
一个网站具有清楚和一致的浏览机制对于认知障碍或视觉障碍者是非常重要的。这种规划考虑不仅可让身心障碍者获益,而且可让所有使用者在使用网站信息时不会
迷失。因此网页开发者可以规划各种引导信息、浏览棒、网站地图等等,以提供清楚和一致的浏览机制。如此可增进使用者在网站上快速而精确地找到特定信息。
规范十四:确保简单清楚的网页内容
网页开发者应确认文件的内容和用词是清楚和简易的,让使用者可以更容易地理解网页内容。使用清楚和简易的语言可促进有效的沟通。对认知或学习障碍的人而言
读取或理解正式或官方用词的文字书面信息,可能是困难的。使用清楚和简易的语言也可使那些母语与你不同的人受益,这包括那些主要以手语沟通的人。
因此网页开发者应该采用一致性的网页版面、可明了辨识的图表、和容易了解的语言和用词,这将让所有的使用者受益,特别是对认知障碍和阅读困难的人有帮助。
然而,仍然应该要确认网页内的各个图像应拥有替代文字说明以提供给全盲、弱视或任何无法观看图片的人来使用。相关说明可参考规范一。
陆、标准检测码
本章叙述标准检测码的设计,考虑包括网页文件语言、优先等级、规范条文、和检测状态等因素。本规范目前针对HTML语言设计其标准检测码,但是标准检测码
的设计并不是只是考虑单一语言,本标准检测码的设计可以适用于其它网页开发和设计的语言。
一、标准检测码格式
标准检测码格式为一个字母和六位数: X999999 这七个字符共可分为五栏,如后所示:
起始字母:网页语言
本字母代表本标准检测码适用的网页语言,目前本规范订定HTML语言相关的检测码,就以H字母表示。
其值为H
注:未来若订定XML或SVG语言的标准检测码,就以其它字母表示,例如,X或S。
第一位数码:优先等级
本数码代表本标准检测码所属的优先等级。
其可能值为1|2|3
第二、三位数码:十四条规范(Guideline)
本数码代表本标准检测码所属的规范条文。
其可能值为01|02|03|04|05|06|07|08|09|10|11|12|
13|14
第四位数码:检测状态(Status)
本数码代表本标准检测码的检测状态。检测状态代表本检测码是否能够归纳出其检测项目可以由机器辨识或机器检测的规则。若是其检测项目可以明确导出由机器辨
识其在网页原始码的正确位置的规则,我们称此检测码为机器可辨识(Machine
Identifiable);若是其检测项目可以明确导出由机器检测其在网页原始码的内容是否符合可及性设计的规则,我们称此检测码为机器可检测
(Machine
Checkable)。一个检测码要先能够辨识其检测项目可套在网页原始码的正确位置,才能进一步检测其在网页原始码的内容是否符合可及性设计。因此标准
检测码的检测状态可以定义为以下三种:
0:机器辨识/机器检测(Machine Identify/Machine Check)
1:机器辨识/人工检测(Machine Identify/Human Check)
2:人工辨识/人工检测(Human Identify/Human Check)
其可能值为0|1|2
注:依检测状态的定义,不可能发生人工辨识/机器检测(Human Identify/Machine
Check),因为若机器无法辨识检测项目在网页原始码的正确位置,即无法做检测工作。
第五、六位数码:规范内的流水号码
本数码为标准检测码在规范内的流水号码。因为一条规范可能超过十个标准检测码,因此采用两位数,由00开始。
其可能值为00|01|02|03| . . .
二、检测码讯息
规范一:对于听觉及视觉的内容要提供相等的替代文字内容
1.1 H101000 -图片需要加上替代文字说明
1.2 H101001 -对于applet提供替代文字说明
1.3 H101002 -对于object提供替代文字说明
1.4 H101003 -对于窗体中的图形按键提供替代文字说明
1.5 H101004 -影像地图区域需要加上替代文字说明
1.6 H101105 -当影像地图使用为上传按钮时,每一作用区域必须分别使用不同的按钮
1.7 H101106 -当ALT属性的文字陈述大于150个英文字符时,考虑另外提供文字叙述
1.8 H101007 -提供LONGDESC以外的描述性超级链接(如使用以D为提示的超级链接),来描述LONGDESC的内容
1.9 H101108 -图形替代文字陈述不够清晰时,提供更多的文字描述(如使用longdesc属性)
1.10 H101109 -所有语音档案必须有文字旁白
1.11 H101210 -以可及性的影像来替代ASCII文字艺术
1.12 H101111 -视讯中的声音必须提供同步文字型态的旁白
1.13 H101112 -服务器端影像地图中的超级链接必须在网页中有额外对应的文字超级链接
1.14 H101213 -多媒体视觉影像呈现时,必须提供听觉说明
1.15 H101214 -多媒体呈现时,必须同步产生相对应替代的语音或文字说明
1.16 H301015 -客户端影像地图中的超级链接必须在网页中有额外对应的可及性超级链接
规范二:不要单独靠色彩来提供特殊信息
2.1 H102100 -确保所有藉由颜色所传达出来的讯息,在没有颜色后仍然能够传达出来
2.2 H202101 -确保前景颜色与背景颜色彼此呈现明显的对比
规范三:适当地使用标记语言和样式窗体
3.1 H203200 -以实际存在的标记语言(如MathML)呈现网页内容(如数学方程式),避免使用图形影像呈现
3.2 H203001 -确定网页设计文件,有效使用正规的HTML语法
3.3 H203002 -在DOCTYPE标签中,使用标准规范的叙述以识别HTML版本类型
3.4 H203203 -尽可能使用样式窗体控制网页排版与内容的呈现
3.5 H203004 -要使用相对尺寸(如%)而非绝对尺寸(如像素)
3.6 H203005 -适当使用巢状标题呈现文件结构
3.7 H203106 -避免使用header标签来产生粗体字效果
3.8 H203107 -项目符号及编号之卷标(如li、ul)仅可使用于实际网页内容的项目条列,不可用于编辑格式
3.9 H203108 -确保Q和BLOCKQUOTE标签只是用来当引用语而不是用来缩排
3.10 H203209 -以Q及BLOCKQUOTE卷标来标记引用语
规范四:阐明自然语言的使用
4.1 H104200 -明确地指出网页内容中语言的转换
4.2 H304201 -使用ABBR及ACRONYM标签表示网页中呈现的文字缩写与简称
4.3 H304002 -明确指出网页文字所使用的自然语言
规范五:建立编排良好的表格
5.1 H105100 -对于每一个存放数据的表格(不是用来排版),标示出行和列的标题
5.2 H105101 -表格中超过二行/列以上的标题,须以结构化的标记确认彼此间的结构与关系
5.3 H205102 -在网页内容呈现设计时,避免以表格做多栏文字的设计
5.4 H205103 -若表格只做为版面配置时,勿使用表格之结构标记(如th卷标)作为网页格式视觉效果
5.5 H305004 -表格须提供表格摘要说明(如summary属性)
5.6 H305105 -数据表格须提供标题说明
5.7 H305106 -表格行列过长的标题,须提供缩写或简称
规范六:确保网页能在新科技下良好地呈现
6.1 H106100 -使用 CSS 样式表编排的文件需确保在除去样式表后仍然能够阅读
6.2 H106001 -页框连结必须是HTML档案
6.3 H106102 -使用Script语言需指定不支持Script时的办法
6.4 H106103 -若网页内的程序对象没有作用时,确保网页内容仍然可以传达
6.5 H206104 -若网页对象使用事件驱动时,确定勿仅使用鼠标操作
6.6 H206005 -使用页框时要指定不支持页框时的办法
规范七:确保使用者能处理时间敏感内容的改变
7.1 H107200 -确保网页设计不会致使屏幕快速闪烁
7.2 H207001 -避免使用blink卷标闪烁屏幕
7.3 H207002 -避免使用marquee卷标移动文字
7.4 H207103 -避免使用动态gif图片
7.5 H207004 -不要让网页每隔一段时间自动更新
7.6 H207005 -不要自动转移网页的网址
规范八:确保嵌入式使用者接口具有直接可及性
8.1 H208100 -对由scripts、applets及objects所产生之信息,提供可及性替代方式
规范九:设计装置独立网页
9.1 H109000 -尽量使用客户端影像地图替代服务器端影像地图连结
9.2 H209201 -对所有网页内容元素,确保有鼠标以外的操作接口
9.3 H209002 -确保事件的启发不要求一定得使用鼠标
9.4 H309103 -具体指出按下Tab键在窗体控件,超级链接及对象间移动的顺序
9.5 H309204 -对经常使用的超级链接,增加快速键的操作
9.6 H309105 -对于窗体组件考虑提供键盘快速键的操作
规范十:使用过渡的解决方案
10.1 H210100 -除非使用者知道将会开启一个新窗口,不要随便开启一个新窗口
10.2 H210101 -如果使用script语言开启新窗口或改变目前窗口的网址,要让使用者能事先知道
10.3 H210102 -确保窗体的控件与控件说明之间的配合很适当
10.4 H310103 -若有以表格直栏格式呈现的网页文字内容时,提供线性文字替代
10.5 H310004 -在网页文字输入区中须有默认值
10.6 H310005 -勿单以空白间隔分开相连之超级链接
规范十一:使用国际与国内官方订定的技术和规范
11.1 H111200 -如果不能使这个网页无障碍化,应提供另一个相等的无障碍网页
11.2 H211201 -尽量使用开放性的最新国际标准规范
11.3 H211202 -避免使用过时的HTML语法
11.4 H311203 -允许使用者依照个人喜好设定网页呈现方式与内容
规范十二:提供内容导引信息
12.1 H112000 -需要定义每个页框的名称
12.2 H212101 -如果页框名称无法描述页框中的内容的话,应加上额外叙述
12.3 H212102 -把太长的选单项目群组起来
12.4 H212103 -在窗体控件中,使用FIELDSET及LEGEND标签作群组间的区隔
12.5 H212204 -尽可能将网页内容有相关之元素聚集在一起
12.6 H212105 -在窗体控件上,以LABEL卷标提示信息
规范十三:提供清楚的浏览网站机制
13.1 H213200 -设计并确保有意义的超级链接说明,便于网页内容的阅读
13.2 H213101 -如果需要的话,为每个超级链接加上内容描述
13.3 H213202 -指向不同网址的超级链接,不可使用相同的超级链接说明
13.4 H213203 -使用metadata卷标来记载计算机可以了解运用的网页信息
13.5 H213004 -为网页加上标题
13.6 H213205 -为网站提供网站地图或整体性的简介
13.7 H213206 -网页设计使用清楚且一致的导览机制
13.8 H313207 -提供网页导览连结工具列,以利存取网站导览结构
13.9 H313208 -能辨别出意义上有群组相关的超级链接
13.10 H313209 -若有群组超级链接,在群组之前增设一项绕过此区域的超级链接
13.11 H313210 -若网站具有搜寻功能,可以设计不同的网页内容搜寻方式,以提供不同技能与喜好者搜寻选用
13.12 H313211 -在网页标题、段落、及列表之前,提供辨别讯息以利识别
13.13 H313212 -以metadata标签来识别网页文件包含于整体文件内的所在位置
13.14 H313213 -避免在网页上使用ASCII文字艺术
规范十四:确保简单清楚的网页内容
14.1 H114200 -网页内容要使用简单易懂的文字
14.2 H314201 -使用可及性的图形促进网页内容的理解
14.3 H314202 -网页彼此间设计呈现的风格要一致
附件:中英名词对照
A
Accessible 可及性
ACSII art ACSII文字艺术
Assistive technology 辅助科技
Authoring tool 编辑工具
B
Backward compatible 反向相容
Braille 点字
braille display, 点字显示器
C
Cascading Style Sheet (CSS) 串接呈现窗体
cognitive disability 认知障碍
Content developer 内容开发者
Context 上下文
D
Device independent 装置独立的
Document Content, Structure, and Presentation 文件内容、结构、和表达
structural element结构元素
presentation element表达元素
Dynamic HTML (DHTML) 动态HTML
E
Equivalent 等效
H
hearing disabilities 听力障碍
Human Check 人工检测
Human Checkable 人工可检测
Human Identify 人工辨识
Human Identifiable 人工可辨识
Hypertext Markup Language (HTML) 超文件标示语言
I
Image 影像
Image map影像地图
L
Linearized table 线性化表格
Link text 链接文字
M
Machine Check 机器检测
Machine Checkable 机器可检测
Machine Identify机器辨识
Machine Identifiable 机器可辨识
N
Natural Language 自然语言
Navigation Mechanism 导航机制
navigation bars 导航条
neurological disability 神经疾病
O
orientation 定向
P
physical disability 肢体残障
presentation markup呈现标记
S
SMIL (Synchronized Multimedia Integration Language)
同步化多媒体整合语言
site maps 网站地图
Screen magnifier 屏幕放大器
Screen reader 屏幕阅读机
Structural markup 结构标记
Style sheets 排版窗体
SVG (Scalable Vector Graphics) 可缩放向量图语言
T
Tabular information 表格信息
U
User agent 使用者代理人
V
visual disability 视觉障碍
W
WAI(Web Accessibility Initiative) 信息网可及性推动组织
W3C(World Wide Web Consortium) 全球信息网协会
X
Extensible Markup Language (XML) 可扩充标示语言
附件:参考标准
本规范主要参考全球信息网协会W3C(World Wide Web Consortium)的信息网可及性推动组织WAI(Web
Accessibility Initiative)订定的无障碍网页相关标准。其标准可分为三大类,兹分述如后:
规范(Guidelines)
1.网页内容可及性规范1.0 (Web Content Accessibility Guidelines 1.0)
http://www.w3.org/TR/WCAG10/ (5-May-1999)
2.编辑工具可及性规范1.0(Authoring Tool Accessibility Guidelines 1.0)
http://www.w3.org/WAI/AU/ (3 February 2000)
3.使用者代理人可及性规范1.0(User Agent Accessibility Guidelines 1.0)
http://www.w3.org/WAI/UA/ (16 Oct 2002)
4.可扩充标记语言可及性规范(XML Accessibility Guidelines)
http://www.w3.org/TR/xag (3 October 2002)
检验表(Checklists)
1.网页内容可及性检验表1.0 (Checklist for Web Content Accessibility Guidelines 1.0)
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html (5 May 1999)
2.编辑工具可及性检验表1.0(Checklist for Authoring Tool Accessibility Guidelines
1.0)
http://www.w3.org/TR/ATAG10/atag10-chktable.html (3 February 2000)
3.使用者代理人可及性检验表1.0(Checkpoints for User Agent Accessibility Guidelines
1.0)
http://www.w3.org/TR/2002/PR-UAAG10-20021016/uaag10-chktable.html
(16 October 2002)
技术文件(Techniques)
1.网页内容可及性规范的技术1.0 (Techniques for Web Content Accessibility Guidelines
1.0)
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/ (6 November 2000)
2.网页内容可及性规范的核心技术1.0 (Core Techniques for Web Content Accessibility
Guidelines 1.0)
http://www.w3.org/TR/WCAG10-CORE-TECHS/ (6 November 2000)
3.编辑工具可及性规范的技术1.0(Techniques for Authoring Tool Accessibility
Guidelines 1.0)
http://www.w3.org/TR/2002/NOTE-ATAG10-TECHS-20021029/
(29 October 2002)
4.使用者代理人可及性规范的技术1.0(Techniques for User Agent Accessibility Guidelines
1.0)
http://www.w3.org/TR/UAAG10-TECHS/ (16 October 2002)
5.可及性检测和修复的技术(Techniques for Accessibility Evaluation and Repair)
http://www.w3.org/TR/AERT (26 April 2000)
6.同步多媒体整合语言的可及性特性(Accessibility Features of SMIL)
http://www.w3.org/TR/SMIL-access/ (21 September 1999)
7.串接式样窗体的可及性特性(Accessibility Features of CSS)
http://www.w3.org/TR/CSS-access (4 August 1999)
8.可缩放向量图形语言的可及性特性(Accessibility Features of SVG)
http://www.w3.org/TR/SVG-access/ (7 August 2000)
9. 超文件标记语言的可及性改进(Accessibility improvements in HTML 4.0)
http://www.w3.org/WAI/References/HTML4-access (8 November
2000)
中华民国九十二年九月八日修正
「无障碍网页开发规范」修正内容
一、 将原规范之九十个检测码,依十四条规范类别新增编号,方便识别及具扩展性。
说明︰原检测码讯息仅列检测码与检测码内容,为便于对照,增加依十四条规范条列编号。
例如:
修正前︰H101000 图片需要加上替代文字说明
修正后︰1.1 H101000 图片需要加上替代文字说明
二、
参考Bobby的检测方式及无障碍网页检测程序对HTML语法解析功能的改进,修正相关检测码十条及检测码说明修正二条。
序号 原规范检测码 修正后之检测码
条正原因 备注
1 H101107
提供longdesc以外的描述性超级链接(如D超级链接),来描述longdesc的内容
H101007
由1改为0,检测方式是机器辨识/机器检测,规则是检测longdesc属性的连结网页,有无出现在另外一个连结中。
修正检测码
2 H101212 服务器端影像地图中的超级链接必须在网页中有额外对应的文字超级链接
H101112
由2改为1,检测方式是机器辨识/人工检测,规则是检测<IMG>中有ismap属性时就要列出此条,要求人工检测。
修正检测码
3 H301215 客户端影像地图中的超级链接必须在网页中有额外对应的可及性超级链接
H301015
由2改为0,检测方式是机器辨识/机器检测,规则是检测<IMG>中有usemap时就要列出此条,要求人工检测。
修正检测码
4 H202201 确保前景颜色与背景颜色彼此呈现明显的对比
H202101
由2改为1,检测方式是机器辨识/人工检测,规则是检测网页中有<IMG>之bgcolor及color属性时都要列出此条,要
求人工检测。 修正检测码
5 H203102
在doctype标签中,使用标准规范的叙述以识别HTML版本类型 H203002
由1改为0,检测方式是机器辨识/机器检测,规则是网页上只要有<!DOCTYPE>卷标就检测通过(Bobby规则)。
修正检测码
6 H203105 适当使用巢状标题呈现文件结构
H203005
由1改为0,检测方式是机器辨识/机器检测,规则是<H1>~<H6>需依照顺序使用,例如<H1>之
后应接<H2>,若<H1>之后接<H3>即为错误。 修正检测码
7 H304202 明确指出网页文字所使用的自然语言
H304002
由2改为0,检测方式是机器辨识/机器检测,规则是检测<HTML>中有无写出lang的语言属性,有此属性的就通过,否则为错
误(Bobby规则)。 修正检测码
8 H305104 表格须提供表格摘要说明(如summary属性)
H305004
由1改为0,检测方式是机器辨识/机器检测,规则是网页上有<TABLE>就要提供summary摘要属性(bobby规则)。
修正检测码
9 H106002 使用Script语言需指定不支持Script时的办法
H106102
由0改为1,检测方式是机器辨识/人工检测,规则是检测网页中有<SCRIPT>时就要列出此条,要求人工检测,因Bobby认
为无法机器辨识所用的SCRIPT是否需要NOSCRIPT,并且SCRIPT中的内容也可以用NOSCRIPT之外的方式呈现(Bobby的规则)。
修正检测码
10 H109100 尽量使用客户端影像地图替代服务器端影像地图连结
H109000
由1改为0,检测方式是机器辨识/机器检测,规则是检测<IMG>中有ismap时必须也有usemap,否则即列出此条,要求
修正。 修正检测码
11 H106001页框来源必须是HTML档案
页框连结必须是HTML档案 文字修正:以[连结]替代[来源]
修正检测内容
12 H212101如果页框名称不够描述页框中的内容的话,多加上额外叙述
如果页框名称无法描述页框中的内容的话,应加上额外叙述
文字修正:1.以[无法]替代[不够]2.以[应加上额外叙述]替代[多加上额外叙述] 修正检测内容
原规范,共有九十条检测码0机器辨识/机器检测:19条1机器辨识/人工检测:36条2人工辨识/人工检测:35条
修正后,仍维持九十条检测码,惟0机器辨识/机器检测:24条1机器辨识/人工检测:35条2人工辨识/人工检测:31条
依照以上修正检测方式后,原机器检测有19条,更新后增加5条,成为24条。
九十条检测码
· 规范一:对于听觉及视觉的内容要提供相等的替代文字内容
· 规范二:不要单独靠色彩来提供特殊信息
· 规范三:适当地使用标记语言和样式窗体
· 规范四:阐明自然语言的使用
· 规范五:建立编排良好的表格
· 规范六:确保网页能在新科技下良好地呈现
· 规范七:确保使用者能处理时间敏感内容的改变
· 规范八:确保嵌入式使用者接口具有直接可及性
· 规范九:设计装置独立网页
· 规范十:使用过渡的解决方案
· 规范十一:使用国际与国内官方订定的技术和规范
· 规范十二:提供内容导引信息
· 规范十三:提供清楚的浏览网站机制
· 规范十四:确保简单清楚的网页内容
规范一:对于听觉及视觉的内容要提供相等的替代文字内容
1.1:H101000 图片需要加上替代文字说明
1.2:H101001 对于applet提供替代文字说明
1.3:H101002 对于object提供替代文字说明
1.4:H101003 对于窗体中的图形按键提供替代文字说明
1.5:H101004 影像地图区域需要加上替代文字说明
1.6:H101105 当影像地图使用为上传按钮时,每一作用区域必须分别使用不同的按钮
1.7:H101106 当alt属性的文字陈述大于150个英文字符时,考虑另外提供文字叙述
1.8:H101007 提供longdesc以外的描述性超级链接(如D超级链接),来描述longdesc的内容
1.9:H101108 图形替代文字陈述不够清晰时,提供更多的文字描述(如使用longdesc属性)
1.10:H101109 所有语音档案必须有文字旁白
1.11:H101210 以可及性的影像来替代ASCII文字艺术
1.12:H101111视讯中的声音必须提供同步文字型态的旁白
1.13:H101112服务器端影像地图中的超级链接必须在网页中有额外对应的文字超级链接
1.14:H101213多媒体视觉影像呈现时,必须提供听觉说明
1.15:H101214多媒体呈现时,必须同步产生相对应替代的语音或文字说明
1.16:H301015客户端影像地图中的超级链接必须在网页中有额外对应的可及性超级链接
规范二:不要单独靠色彩来提供特殊信息
2.1:H102100确保所有藉由颜色所传达出来的讯息,在没有颜色后仍然能够传达出来
2.2:H202101确保前景颜色与背景颜色彼此呈现明显的对比
规范三:适当地使用标记语言和样式窗体
3.1:H203200 以实际存在的标记语言(如MathML)呈现网页内容(如数学方程式),避免使用图形影像呈现
3.2:H203001 确定网页设计文件,有效使用正规的HTML语法
3.3:H203002 在doctype标签中,使用标准规范的叙述以识别HTML版本类型
3.4:H203203 尽可能使用样式窗体控制网页排版与内容的呈现
3.5:H203004 要使用相对尺寸(如%)而非绝对尺寸(如像素)
3.6:H203005 适当使用巢状标题呈现文件结构
3.7:H203106 避免使用header标签来产生粗体字效果
3.8:H203107 项目符号及编号之卷标(如li、ul)仅可使用于实际网页内容的项目条列,不可用于编辑格式
3.9:H203108 确保q和blockquote标签只是用来当引用语而不是用来缩排
3.10:H203209 以q及blockquote卷标来标记引用语
规范四:阐明自然语言的使用
4.1:H104200 明确地指出网页内容中语言的转换
4.2:H304201 用abbr及avronym标签表示网页中呈现的文字缩写与简称
4.3:H304002 明确指出网页文字所使用的自然语言
规范五:建立编排良好的表格
5.1:H105100 对于每一个存放数据的表格(不是用来排版),标示出行和列的标题
5.2:H105101 表格中超过二行/列以上的标题,须以结构化的标记确认彼此间的结构与关系
5.3:H205102 在网页内容呈现设计时,避免以表格做多栏文字的设计
5.4:H205103 若表格只做为版面配置时,勿使用表格之结构标记(如th卷标)作为网页格式视觉效果
5.5:H305004 表格须提供表格摘要说明(如summary属性)
5.6:H305105 数据表格须提供标题说明
5.7:H305106 表格行列过长的标题,须提供缩写或简称
规范六:确保网页能在新科技下良好地呈现
6.1:H106100 使用 CSS 样式表编排的文件需确保在除去样式表后仍然能够阅读
6.2:H106001 页框连结必须是HTML档案
6.3:H106102 使用Script语言需指定不支持Script时的办法
6.4:H106103 若网页内的程序对象没有作用时,确保网页内容仍然可以传达
6.5:H206104 若网页对象使用事件驱动时,确定勿仅使用鼠标操作
6.6:H206005 使用页框时要指定不支持页框时的办法
规范七:确保使用者能处理时间敏感内容的改变
7.1:H107200 确保网页设计不会致使屏幕快速闪烁
7.2:H207001 避免使用blink卷标闪烁屏幕
7.3:H207002 避免使用marquee卷标移动文字
7.4:H207103 避免使用动态gif图片
7.5:H207004 不要让网页每隔一段时间自动更新
7.6:H207005 不要自动转移网页的网址
规范八:确保嵌入式使用者接口具有直接可及性
8.1:H208100对由Scripts、Applets及Objects所产生之信息,提供可及性替代方式
规范九:设计装置独立网页
9.1:H109000 尽量使用客户端影像地图替代服务器端影像地图连结
9.2:H209201 对所有网页内容元素,确保有鼠标以外的操作接口
9.3:H209002 确保事件的启发不要求一定得使用鼠标
9.4:H309103 具体指出按下Tab键在窗体控件,超级链接及对象间移动的顺序
9.5:H309204 对经常使用的超级链接,增加快速键的操作
9.6:H309105 对于窗体组件考虑提供键盘快速键的操作
规范十:使用过渡的解决方案
10.1:H210100 除非使用者知道将会开启一个新窗口,不要随便开启一个新窗口
10.2:H210101 如果使用Script语言开启新窗口或改变目前窗口的网址,要让使用者能事先知道
10.3:H210102 确保窗体的控件与控件说明之间的配合很适当
10.4:H310103 若有以表格直栏格式呈现的网页文字内容时,提供线性文字替代
10.5:H310004 在网页文字输入区中须有默认值
10.6:H310005 勿单以空白间隔分开相连之超级链接
规范十一:使用国际与国内官方订定的技术和规范
11.1:H111200 如果你不能使这个网页无障碍化,提供另一个相等的无障碍网页
11.2:H211201 尽量使用开放性的最新国际标准规范
11.3:H211202 避免使用过时的HTML语法
11.4:H311203 允许使用者依照个人喜好设定网页呈现方式与内容
规范十二:提供内容导引信息
12.1:H112000 需要定义每个页框的名称
12.2:H212101 如果页框名称无法描述页框中的内容的话,应加上额外叙述
12.3:H212102 把太长的选单项目群组起来
12.4:H212103 在窗体控件中,使用fieldset及legend标签作群组间的区隔
12.5:H212204 尽可能将网页内容有相关之元素聚集在一起
12.6:H212105 在窗体控件上,以label卷标提示信息
规范十三:提供清楚的浏览网站机制
13.1:H213200 设计并确保有意义的超级链接说明,便于网页内容的阅读
13.2:H213101 如果需要的话,为每个超级链接加上内容描述
13.3:H213202 指向不同网址的超级链接,不可使用相同的超级链接说明
13.4:H213203 使用metadata卷标来记载计算机可以了解运用的网页信息
13.5:H213004 为你的网页加上标题
13.6:H213205 为你的网站提供网站地图或整体性的简介
13.7:H213206 网页设计使用清楚且一致的导览机制
13.8:H313207 提供网页导览连结工具列,以利存取网站导览结构
13.9:H313208 能辨别出意义上有群组相关的超级链接
13.10:H313209 若有群组超级链接,在群组之前增设一项绕过此区域的超级链接
13.11:H313210 若网站具有搜寻功能,可以设计不同的网页内容搜寻方式,以提供不同技能与喜好者搜寻选用
13.12:H313211 在网页标题、段落、及列表之前,提供辨别讯息以利识别
13.13:H313212 以metadata标签来识别网页文件包含于整体文件内的所在位置
13.14:H313213 避免在网页上使用ACSII文字艺术
规范十四:确保简单清楚的网页内容
14.1:H114200 网页内容要使用简单易懂的文字
14.2:H314201 使用可及性的图形促进网页内容的理解
14.3:H314202 网页彼此间设计呈现的风格要一致
版权声明:可以转载,转载时请务必以超链接形式标明文章 提高Web 设计的可读性 (web design readability) 的原始出处和作者信息及本版权声明。
http://www.chedong.com/blog/archives/000516.html
Comments
怎么那篇文章看不到
可以给我寄一篇吗
由: @_@ 发表于 2004年06月24日 上午09时27分
好文章,只是繁体,看起来不爽。
由: 烂西瓜 发表于 2004年06月25日 夜间12时03分
:)
无障碍网页开发手册:
一、不要使用繁体中文。
由: 烂西瓜 发表于 2004年06月25日 夜间12时05分
已经是简体了呀,车东的东西就是好!
由: 王兵 发表于 2006年03月17日 晚上10时59分