分享
 
 
 

无障碍网页开发:规范及技术手册

王朝html/css/js·作者佚名  2006-11-23
窄屏简体版  字體: |||超大  

看到这篇规范收获很多:其中关于radio button的可用性是这样描述的:

不好的设计:男性女性 <<-- 点击“女性”左边的radio才能做选项切换 和

好的设计:男性女性 <<-- 点击“女性”这个文本就能够做选项切换

第一个表单必须点击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>

附:无障碍网页开发规范行政院研究发展考核委员会 中华民国九十二年九月

内容大纲

壹、前言

贰、无障碍网页设计准则

一、无障碍网页可及性设计原则

二、无障碍网页设计程序

参、优先等级

肆、检测等级

伍、十四条规范

陆、标准检测码

一、检测码格式

二、检测码讯息

附件:中英名词对照

附件:参考标准

壹、前言

本规范的规划和订定主要是参考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语言设计其标准检测码,但是标准检测码的设计并不是只是考虑单一语言,本标准检测码的设计可以适用于其它网页开发和设计的语言。

一、标

[1] [2] [3] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有