1 引言

1.1 文档目的

为相关承建单位改造某省网上办事大厅信息无障碍信息建设提供改造指南,提高效率,使其改造符合WCAG2.0 A级、AA级标准,特编制此方案。

1.2 读者对象

某省信息中心、某省网上办事大厅承建单位等相关干系人。

1.3 参考文

《Web内容无障碍指南 (WCAG) 2.0》

《YD/T 1822-2012 网站设计无障碍评级测试方法》

《YD/T 1890-2009信息无障碍辅助技术的要求和评测方法》

1.4 术语与缩写解释

WCAG2.0:Web内容无障碍指南2.0。

主厅:某省网上办事大厅主厅平台,包括全省统一的前台服务门户及后台支撑系统,在本文档特指服务门户。

时基媒体:音频和视频。

2 概述

为了体现政府提供公共服务的公平、公正、均等化的要求,保障弱势群体获得政府公众服务的权利,我国政府近年一直致力于推动信息无障碍技术在各个领域的应用,先后制定《无障碍环境建设条例》、《网站设计无障碍技术要求》、《网站设计无障碍评级测试方法》等相关法规及行业标准。在建设服务型政府的大环境之下,信息无障碍服务成为政府主厅提高公众服务水平、扩大公众服务范围的新亮点。

某省网上办事大厅作为连接政府和社会公众的重要桥梁,虽然可以从某省政府信息无障碍公共服务平台访问某省网上办事大厅,但是某省网上办事大厅站点本身不能满足WCAG(Web内容无障碍指南)2.0定义的AA级别要求,直接影响了残障人士和老年人获取政府信息和服务的便捷程度;老年人和残障人士直接访问某省网上办事大厅无法享受某省无障碍公共服务平台提供的无障碍辅助工具帮助。

3 总体要求

3.1 概述

以国际互联网联盟(W3C)制定的Web内容无障碍指南(WCAG2.0以及中华人民共和国信息产业部发布的《网站设计无障碍技术要求》的相关标准为技术依据,参照国际通用的信息无障碍设计规范,编制网上办事大厅信息无障碍建设指南。

要求从可感知性、可操作性、可理解性和兼容性等方面作出要求,包括确定网站可访问性、无障碍辅助工具功能等要求,为主厅门户、省直窗口和地市分厅实施信息无障碍建设提供技术参考。

3.2 适用某省网上办事大厅信息无障碍改造WCAG2.0 A,AA级条目

序号

标准原文

等级

参考问题

原则1:可感知性-信息和用户界面组件必须以可感知的方式呈现给用户。

准则1.1替代文本:为所有非文本内容提供替代文本,使其可以转化为人们需要的其他形式,如大字体印刷,盲文,语音,符号或更简单的语言。

1

1.1.1 非文本内容:为所有呈现给用户的非文本内容都提供相同目的替代文本,以下情况例外:
•控件,输入: 如果非文本内容是一个控件或接受用户输入,则应有一个描述其目的名称。(请参阅准则4.1.2,以了解关于控件和接受用户输入的内容的额外要求)
•时基媒体: 如果非文本内容是时基媒体,这时替代文本至少要提供非文本内容的描述标识。(请参阅准则 1.2,以了解关于媒体的额外要求)
•测试: 如果非文本内容是以一个以文本呈现会失效的测试或练习,则替代文本至少要提供非文本内容的描述标识。
•感官: 如果非文本内容的主要目的是创建一种特殊感官体验,则替代文本至少要提供非文本内容的描述标识。
•验证码: 如果非文本内容的目的是为了确认内容正在被一个人访问,而不是计算机访问,则要提供识别和描述非文本内容目的的替代文本,并提供适应针对不同类型感官知觉的输出模型的验证码替代方式, 以适应不同的残障人群。
•装饰,格式,不可见: 如果非文本内容是纯粹的装饰、或只用于视觉格式、或不呈现给用户,则应以辅助技术可忽略的方式进行实现。

A

依赖屏幕阅读器的用户,需要依靠非文本内容的替代文本,来获取非文本内容所传递的信息。

准则1.2时基媒体:为时基媒体提供替代。

说明:本主厅无多媒体相关功能

准则1.3适应性:创建可用不同方式呈现的内容(例如简单的布局),而不会丢失信息或结构。

2

1.3.1 信息和关系: 通过呈现传达的信息、结构和关系,可以编程式确定或在文本中得到。

A

存在使用布局和结构传达的信息。

3

1.3.2 有含义的顺序: 当呈现出来的内容其顺序影响其含义,可以通过编程式确定其正确的阅读顺序。

A

错误的顺序会严重影响键盘用户的访问。

4

1.3.3 感官特性: 用于理解内容和操作内容的指示,应该不完全依赖于组件的感官特性,如形状、大小、视觉位置、方向、或声音。

A

依赖某种感官的组件,将导致使用其他感官获取信息的用户无法获取信息。如依靠视觉感官呈现的图形验证码,依靠听觉感官的用户将无法获取其信息。

准则1.4可辨别性:使用户更容易看到和听到内容,包括把背景和前景分开。

6

1.4.2 音频控制:如果网页音频自动播放超过3秒钟,提供一个机制用以暂停或停止音频,或者控制独立于全局系统音量的音频音量。

A

超过3秒的音频,如果未能提供停止和相关的控制机制,将使依靠听觉获取信息的用户产生困扰。

7

1.4.3 对比度(最小): 文本的视觉呈现以及文本图片至少要有4.5:1的对比度,以下部分除外:
大文本: 大号文本以及大文本图片至少有3:1的对比度;
附属内容: 文本或文本图片是未激活的用户界面组件部分,或者只是一个纯粹的装饰,或者对任何人不可见,或者只是包含其他重要可视内容的图片一部分,此文本或文本图片没有对比要求。
商标: 文本作为标志或品牌名称的一部分,没有最低对比要求。

AA

对于文本呈现类主厅,此条很重要。

8

1.4.4 调整文本: 除了字幕和文本图片外,文本大小不需要辅助技术就可以放大至200%,且没有内容或功能损失。

AA

存在页面放大,内容超出屏幕的情况。且没有主内容文本字体放大机制。

9

1.4.5 文本图片:如果正在使用的技术可以达到视觉效果,应使用文本传达信息而不用文本图片,以下部分除外:
定制: 文本图片可根据用户要求进行视觉定制;
必需: 文本的特殊呈现对要传达的信息是必需的。
注:商标(文本作为标志或品牌名称的一部分)被认为是必需的。

AA

存在使用文本图片的情况,文本图片放大会失真,视障用户无法获得文本图片上的文本信息;

原则2:可操作性-用户界面组件和导航必须可操作。

准则2.1键盘可访问:使所有功能都能通过键盘来操作

10

2.1.1 键盘: 内容的所有功能可通过键盘接口实现操作并且没有对每次键击做特定时限要求,除非底层功能是依赖用户的移动路径并且不做为端点的输入方法。

A

政府类主厅应该支持键盘完全访问;

11

2.1.2 无键盘陷阱: 如果可使用键盘接口能将焦点到移动到某网页组件上,那么可以只使用键盘接口操作也可以将焦点从当前组件移开,如果需要未修改的方向键或Tab键或其它标准退出方式以外的操作,要告知用户离开焦点的方法。

A

键盘陷阱是很严重的无障碍问题,用户无法使用键盘将焦点移出当前区域,导致不能访问页面中的其他内容,不应该存在于政府类主厅。

准则2.2充足的时间:为用户提供足够的时间用以阅读和使用内容。

12

2.2.1 定时可调:对于由内容设置的每一个时间限制,以下部分至少有个一为真:
•关闭: 允许用户达到时间期限之前,关闭时间限制;或
•调整: 允许用户达到时间期限前,调整时间限制。调整范围要放宽,至少是默认设置长度的10倍;或
•延长: 在超时之前向用户发出警告,并给用户至少20秒的时间,使用户可以通过简单的动作来延长时间(例如“按空格键”),并允许用户延长期限至少10次;或
•实时特例: 时间限制是一个实时事件(例如拍卖)的必要部分,可能没有时间限制的替代方法;或
•必需特例: 时间限制是必需的,延长时限将导致行为失效;或
•20小时特例: 时间限制超过20个小时。

A

应该给以用户充足的时间进行操作,并给以延长时间的能力,过短的时间可能导致用户无法完成操作,使用屏幕阅读器的用户以及神经、认知障碍的用户,需要一定的时间进行操作。

13

2.2.2 暂停、停止、隐藏:对于运动、闪烁、滚动或自动更新的信息,以下部分全部为真:
•运动、闪烁、滚动: 任何运动、闪烁或滚动的信息(1)自动启动,(2)持续时间超过5秒钟,(3)与其他内容同时呈现。对于这些信息,提供一个机制可使用户暂停,停止或隐藏,除非运动、闪烁、或滚动是某个行为的必需部分;
•自动更新: 任何自动更新的信息(1)自动启动(2)与其他内容同时呈现。对于这些信息,提供一个机制可使用户暂停、停止、或隐藏,或控制更新的频率,除非自动更新是某个行为的必需部分。

A

存在滚动内容,例如滚动banner。

准则2.3癫痫:不要设计会导致癫痫发作的内容。

14

2.3.1 闪光三次或低于阈值: 网页不包含任何闪光超过3次/秒的内容,或闪光低于一般闪光和红色闪光阈值。

A

由于任何不符合此成功标准的内容可干扰用户使用整个页面的能力,网页上所有的内容(无论是否满足其他成功标准)必须符合此成功标准。

准则2.4可导航性:提供帮助用户导航、查找内容、并确定其位置的方法。

15

2.4.1 绕过模块:提供一种机制以跳过在多个网页中重复出现的内容模块。

A

绕过模块机制可加速键盘用户访问的速度,让用户快速了解页面的布局。

16

2.4.2 网页标题: 网页提供标题,以描述主题或用途。

A

视障用户使用键盘浏览网页时,第一个聚焦的网页元素就是其标题,视障用户可以通过网页标题了解该网页的内容。

17

2.4.3 聚焦顺序: 如果网页可以顺序导航,并且导航顺序影响含义和操作,可聚焦的组件以保持其含义和可操作的顺序接受聚焦。

A

错误的键盘tab顺序会严重影响键盘用户的访问,给键盘用户造成困扰。

18

2.4.4 链接目的(在上下文里): 每个链接目的的确定可通过:单独的链接文本,或者是链接文本联系其编程式确定的链接上下文。除非链接的目的也会困惑普通用户。

A

链接应该提供其目的文本,使用户可以清晰了解其目的导向。

19

2.4.5 多种方法:用一种以上的方法在网页集里定位一个网页,除非网页是流程的结果或流程的某个步骤。

AA

多种方法定位可加快用户的导航效率。

20

2.4.6 标题和标签: 标题和标签说明主题或目的。

AA

清晰的标题级别有利于用户理解页面内容,定位自己想要了解的内容。

21

2.4.7 焦点可见: 任何键盘可操作的用户界面应有一套操作模式,在该模式里键盘焦点指示是可见的。

AA

对于不能使用鼠标的视觉键盘用户,焦点可见,有利于用户定位。

原则3:可理解性-信息和用户界面操作必须是可理解的。

准则3.1可读性:使文本内容可读,可理解。

22

3.1.1 网页语言: 每个网页的默认人类语言可以编程式确定。

A

部分屏幕阅读器使用网页语言来指定读屏播报内容所要使用的语言。

23

3.1.2 局部语言:内容里每个段落或短语的人类语言可以编程式确定,除了文本中专有名词、术语、不确定语言的词汇、已经融入到本地语言的词语或短语。

AA

用户浏览一个网页一般在同一个语言环境下。

准则3.2 可预测性:让网页以可预见的方式呈现和操作。

24

3.2.1 焦点:当任何用户界面组件接收焦点时,不会引起上下文变化。

A

聚焦即可触发行为,视障用户在没有感知当前元素的情况就触发操作,会给用户造成困扰,不利于用户理解页面内容。

25

3.2.2 输入:更改任何用户界面组件设置不会自动导致上下文变化,除非用户使用组件前已被告知该行为。

A

会引起上下文变化的组件,需要提前告知用户变化结果,否则,用户将会对上下文的变化困惑。

26

3.2.3 一致性导航: 对于在网页集里多个网页中重复出现的导航机制,每次出现时都应保持同样的相对顺序,除非是由用户引起的顺序变化。

AA

一致性的导航能帮助用户快速导航布局相似的页面。

27

3.2.4 一致性标识: 网页集集里相同功能的组件可被一致性标识。

AA

一致性标识有助于用户更快理解用户界面,根据经验找到自己想要的内容。

准则3.3辅助输入:帮助用户避免和纠正错误。

28

3.3.1 错误标识: 如果输入错误能够被自动发现,错误类型应能被标识,并且用文本描述给用户。

A

此条常用于填写表单时,输入错误不能只标识出现了错误,还要告诉用户出现了那种错误。有利于用户自己独立完成表单,改正输入。

29

3.3.2 标签或说明: 当需要用户输入内容时,要给出标签或说明。

A

给出用户要输入内容的说明和格式是非常有必要的,能够帮助用户快速完成表单。

30

3.3.3 错误建议: 如果输入错误能够被自动发现,且修改建议已知,则提供建议给用户,除非它会危及安全或影响内容目的。

AA

用户输入错误时,给出合适的建议,能加快用户的填写速度,例如,注册时,用户输入的用户名不正确,根据已输入的用户名衍生出正确的用户名。

31

3.3.4 错误预防(法律、金融、数据): 对于用户操作将引起法律承诺或者金融交易的网页、修改或删除数据存储系统里的用户可控数据的网页、提交用户测试响应的网页等 ,对于这些网页,以下部分至少有一为真:检查: 用户输入的数据将被检查是否有输入错误,并为用户提供一个改正错误的机会。
确认: 提供一个机制用于最后提交之前审查、确认和纠正信息。

AA

用户在提交有关法律金融的信息时,需要请求用户的确认,防止用户输入错误,造成不可逆的后果。

原则4:鲁棒性-内容必须健壮到可信地被种类繁多的用户代理(包括辅助技术)所解释。

准则4.1兼容:最大化兼容当前和未来的用户代理(包括辅助技术)。

32

4.1.1 解析:使用标记语言实现的内容,元素要有完整的开始和结束标签,元素根据其规格进行嵌套,元素不包含重复的属性,任何ID都是唯一的,除非规范允许这些特性。

A

代码书写规范,有助于辅助技术对于页面内容的解析。不规范的代码,可能会对辅助技术解析内容的能力造成影响,甚至无法解析。

33

4.1.2 名称,角色,值:对于所有用户界面组件(包括但不限于:表单元素,链接和由脚本生成的组件),名称和角色可以编程式确定; 可由用户设置的状态、属性和值可以编程式设置,这些变化通知对用户代理(包括辅助技术)有效。

A

对于组件,应该明确提供其名称、角色、状态、值等信息,这对于使用屏幕阅读器的用户非常重要,他们根据这些信息来判断如何与组件进行交互,缺少这些信息,将使用户产生困扰。

4 主厅信息无障碍改造指南

4.1 改造指南细则

WCAG2.0

说明

等级

备注

1.1.1. 非文本内容

Image 1:图片必须有替代文本;

A

参考改造样例4.2.2

Image 2:替代文本应传递正确的图片内容与目的;

Image 3:替代文本应不包含文件名称;

Image 4:替代文本应不超过100个英文字符;

Image 5:装饰性图片应能被辅助技术忽略;

Image 6:复杂图像需有对应的长文本进行详细描述;

Image 7:使用MathML(数学标记语言)表示数学公式。

1.3.1. 信息和关系

Heading 5:标题必须有合理嵌套;

A

改造参考案例:中国残疾人联合会官网

Heading 6:标题必须有可视化的文本内容;

Heading 7:内容信息(contentinfo)、补充内容(complementary)、表单(form)、导航(navigation)或搜索栏(search)路标区块内的第一个标题需为h2元素;

Heading 8:在路标区块内的标题必须合理嵌套;

Landmark 2:所有内容区块必须被路标标识;

Landmark 8:横幅(banner)必须是最高级别的路标;

Landmark 9:横幅(banner)路标区块内只可包括导航(navigation)路标、区域(region)路标和搜索栏(search)路标;

Landmark 10:导航(navigation)路标区块内只能包含区域(region)或搜索栏(search)路标;

Landmark 11:主内容(main)必须是最高级别的路标;

Landmark 12:内容信息(contentinfo)路标必须是最高级别的路标;

Landmark 13:补充内容(complementary)必须是最高级别的路标;

Landmark 14:搜索栏(search)路标区块内只能包含区域(region)路标;

Landmark 15:表单(form)路标区块内只能包含区域(region)路标;

Landmark 16:区域(region)路标必须有可访问的名称;

Landmark 17:路标必需具有唯一的标识;

Landmark 18:路标必须正确标示内容区域;

List 1:列表必须使用对应的语义标记;

Role 1:只有在特殊情况下才能改写主内容(main)路标中的主内容(main)元素的默认角色(role);

Role 2:主体(body)元素只能定义角色值为文档(document)(默认的)或应用(application);

Role 4:文章(article)元素只能定义角色值为区域(region)、文章(article)(默认的)、主内容(main)、文档(document)或应用(application);

Role 5:章节(section)元素只能定义角色值为警告(alert)、警告对话框(alertdialog)、应用(application)、内容信息(contentinfo)、对话框(dialog)、文档(document)、日志(log)、主内容(main)、跑马灯(marquee)、展示信息(presentation)、区域(region)、搜索栏(search)或状态栏(status);

Role 6:只有在特殊情况下才能改写导航(nav)的默认角色(role);

Role 7:侧边栏(aside)元素只能定义角色值为补充内容(complementary)(默认的)、注释(note)、区域(region)、搜索栏(search)或展示信息(presentation);

Role 8:只有在特殊情况下才可以改写横幅(banner)路标中的页头(header)元素的默认角色(role);

Role 9:只有在特殊情况下才可以改写内容信息(contentinfo)路标中的页脚(footer)元素的默认角色(role);

Role 10:只有在特殊情况下才能改写标题(heading)中的标题(h1-h6)元素的默认角色(role);

Table 1:数据表中的单元格必须有对应的表头;

Table 3:数据表必须有内容描述;

Table 4:一个页面中的数据表必须有唯一的名称;

Table 5:表格需标识为数据表或布局表;

Table 6:表头必须使用th元素;

Table 7:复杂表格中的单元格,必须使用表头(headers)属性标记与其相关联的表头;

Table 8:数据表的名称必须与数据表的描述不同。

1.3.2. 有含义的顺序

Layout 1:布局表必须有有意义的顺序;

A

参考改造样例4.2.3

Layout 2:布局表不能相互嵌套;

Order 1:通过CSS确定元素位置,使呈现内容具有有意义的阅读顺序。

1.3.3. 感官特性

Sensory 1:用于理解和操作的内容,应该不完全依赖于形状、大小、视觉位置、方向、或声音。

A

 

1.4.1. 颜色用途

Color 2:颜色不能是传递信息的唯一途径。

A

参考改造样例4.2.3

1.4.2. 音频控制

Audio 4:当页面加载时音频会自动播放超过3秒钟,提供一个机制用以暂停或停止音频

A

改造不涉及

1.4.3. 对比度(最小)

Color 1:任意大小的文本内容必须有最少4.5:1的对比度,若为大文本或黑体字,则最少有3:1的对比度。

AA

改造参考案例:福田政府在线

1.4.4. 调整文本

Resize 1:当调整页面大小时,文本内容需自适应页面大小并保证所有内容均可见。

AA

改造参考案例:某省人民政府政务公开

1.4.5. 文本图像

AA

 

2.1.1. 键盘

Keyboard 1:组件元素必须响应键盘事件。

A

改造参考案例:HHS官网

Keyboard 2:所有可交互元素的功能必须通过键盘接口实现操作;

2.1.2. 无键盘陷阱

Keyboard 3:对象(object)和小程序(applet)元素不能限制键盘焦点离开。

A

改造参考案例:北京市网上政务服务大厅

2.2.1 定时可调

Timing 1:有时间限制的可交互或可浏览的内容需给用户提供一个方法来关闭、调整或延长时间限制。

A

改造参考案例:福田政府在线

2.2.2. 暂停、停止、隐藏

Timing 2:对于自动开始并持续五秒以上的运动、闪烁、滚动或自动更新的内容,需提供一种机制来暂停、停止或隐藏。

A

改造无涉及

2.3.1. 闪光三次或低于阈值

HTML 2:替换跑马灯(marquee)元素;

A

改造无涉及

Timing 3:网页不包含任何闪光超过3次/秒的内容,除非闪光低于一般闪光和红色闪光阈值。

2.4.1. 绕过模块

Bypass 1:提供一个机制来跳过内容模块;

A

改造参考案例:中国残疾人联合会新闻详细页

Frame 1:框架(frame)元素需有可访问的名称;

Frame 2:内框架(iframe)元素需有可访问的名称;

Heading 1:页面必须最少有一个h1元素;

Landmark 1:页面必须最少有一个主内容(main)路标。

Landmark 3:页面必须最少有一个导航(navigation)路标;

Landmark 4:网站的品牌内容需用横幅(banner)路标进行标识;

Landmark 5:每个页面最多只能有一个横幅(banner)路标;

Landmark 6:网站的管理信息需用内容信息(contentinfo)路标进行标识;

Landmark 7:每个页面最多只能有一个内容信息(contentinfo)路标。

2.4.2. 网页标题

Title 1:标题(title)元素需标识网站和页面内容。

A

改造参考案例:中国残疾人联合会官网

2.4.3. 聚焦顺序

Focus 1:焦点顺序必须有意义。

A

参考改造样例4.2.7

2.4.4. 链接目的(在上下文里)

Link 1:链接文本必须描述出链接目的;

A

参考改造样例4.2.5

Link 2:不同的链接需有其唯一的链接文本。

2.4.5. 多种方法

Navigation 1:提供至少两种方法来定位网页。

AA

改造参考案例:中国残疾人联合会官网

2.4.6. 标题和标签

Control 10:标签必须是唯一的;

AA

参考改造样例4.2.4

Control 11:每个提交(submit)和重置(reset)按钮需有唯一的标签;

Heading 2:h1元素必须在主内容(main)或横幅(banner)路标中;

Heading 3:同级的标题元素需有唯一的可访问名称;

List 2:在适当的时候提供一个标签用以描述列表内容或目的;

Table 2:数据表必须有一个标识表格目的的可访问名称;

Widget 12:组件角色元素标签需充分描述其目的;

2.4.7. 焦点可见

Focus 2:键盘焦点是可见的。

AA

改造参考案例:某省人民政府政官网

3.1.1. 网页语言

Language 1:网页必须使用有效的IANA语言码。

A

改造参考案例4.2.1

3.1.2. 局部语言

Language 2:与页面主要语言不同的文本内容需使用有效的语言(lang)属性来标记。

AA

改造参考案例:中国残疾人联合会官网

3.2.1. 焦点

Focus 3:目标焦点需在当前内容窗口中;

A

Focus 4:选择(select)元素不会自动引起上下文变化。

3.2.2. 输入

Focus 5:使用输入(input)或其他表单操作按钮来提交表单。

A

参考改造样例4.2.4

3.2.3. 一致性导航

Navigation 2:网站所有页面有一致的路标顺序;

AA

改造参考案例:中国残疾人联合会官网

Navigation 3:网站所有页面中用于标记重复出现的页面章节的h1和h2元素通常有一致的顺序。

3.2.4. 一致性标识

Navigation 4:网站所有页面中的路标具有一致性标示;

AA

改造参考案例:中国残疾人联合会官网

Navigation 5:网站所有页面中用于标识重复出现的页面章节的h1和h2元素通常有一致的可访问名称。

3.3.1. 错误标识

Error 1:无效的表单控件必须向辅助技术提供其无效值信息。

A

 

3.3.2. 标签或说明

Control 1:表单控件必须有标签;

A

改造参考案例:HHS官网

Control 2:图像按钮必须有非空的alt或title属性;

Control 3:一组单选按钮必须有一个分类标签;

Control 4:按钮(button)元素必须有文本内容;

Control 6:使用for属性的每个标签(label)元素应引用对应的表单控件;

Control 7:每个标签(label)和图例(legend)元素必须包含文本内容;

Control 8:每个域集(fieldset)元素有且只有一个图例(legend)元素;

Control 9:判断title属性是否为合适的表单控件标签。

3.3.3. 错误建议

Error 2:使用require或aria-required属性标记必填的表单控件;

AA

改造参考案例:萍果官网注册页面

Error 3:使用aria-required属性标记必填的组件;

Error 4:当输出错误可被自动发现并且修改建议已知,应向用户提供修改建议(部分例外);

3.3.4. 错误预防(法律、金融、数据)

Error 5:当输入内容包括法律承诺或金融交易时,必须在最终提交前向用户提供后退、检查和确认数据的机制。

AA

改造参考案例:萍果官网注册页面

4.1.1. 解析

Control 5:页面中所有id属性必须是唯一的

A

参考改造样例4.2.10

HTML 1:应替换页面中的b和i元素。

4.1.2. 名称,角色,值

Role 3:ol和ul元素的角色值应为成组项目角色,例如:目录(directory)、列表框(listbox)、菜单(menu)、菜单栏(menubar)、展示信息(presentation)、选项卡列表(tablist)、工具栏(toolbar)或树视图(tree);

A

改造参考案例:中国残疾人联合会官网

Role 11:li元素的角色值应为成组项目角色,如:列表项(listitem)(默认的)、菜单项(menuitem)、复选菜单项(menuitemcheckbox)、单选菜单项(menuitemradio)、对象(option)、选项卡(tab)、树视图项目(treeitem)或展示信息(presentation);

Role 12:a[href]元素的角色值可以为链接(link)(默认的)、按钮(button)、复选框(checkbox)、菜单项(menuitem)、复选菜单项(menuitemcheckbox)、单选菜单项(menuitemradio)、对象(option)、选项卡(tab)、开关(switch)或树视图项目(treeitem);

Widget 1:组件必须有标签;

Widget 2:响应点击(onClick)事件的元素必;须有组件角色和键盘焦点,或是一个链接或按钮;

Widget 3:角色(role)属性值必须是有效的;

Widget 4:ARIA属性和状态值必须是有效的;

Widget 5:使用已有的ARIA属性和状态;

Widget 6:组件应标识出所需的属性和状态;

Widget 7:组件应有所需的子角色;

Widget 8:组件应有所需的父角色;

Widget 9:组件应只有一个父组件;

Widget 10:范围组件必须在最小值和最大值之间有对应的值;

Widget 11:响应键盘、鼠标或拖拽事件的元素必须有组件角色或可交互的元素。

5 无障碍改造标签库

5.1 关于页面头部必须包括内容

5.2  关于图片 Image标签

5.3 关于表格 Table标签

5.4 关于表单控件元素

5.5 关于链接 a 标签

5.6 关于多媒体对象 Object 标签

5.7 关于tabindex 属性与获取焦点的顺序

5.8 关于焦点与键盘

5.9 关于菜单和导航

5.10 关于文本样式

5.11 关于accesskey属性

5.12 关于颜色

5.13 关于隐藏的内容

5.14 新特性-ARIA

6 无障碍辅助工具

依据国家通信行业标准《网站设计无障碍技术要求》参照国际通用网站无障碍设计规范,在“十二五”规划期间内,使“1+3”政府网站无障碍改造基本达到一级及部分二级标准,即:网站具备操作引导提示、图片信息替代文字、链接内容有完整的可理解提示等无障碍特征,实现用键盘操作可以完成网站内容访问的基本无障碍目标,盲人借助“读屏软件”等辅助工具可顺利浏览网站信息,弱视人群借助站内无障碍辅助工具,可以对文字(界面)大小、对比度、灰度等进行调整以满足其浏览需求。促进门户网站信息交流无障碍。

6.1 建设任务

1.根据无障碍网站所面向的不同用户群体,从无障碍网站设计规范及技术规范的层面,完成对现有政府网站所有页面的基础性改造分析工作。

2. 在不影响网页美观、结构、相关功能的前提下,以面向不同用户群体所达到的功能为出发点,由简单到复杂,通过Javacript等脚本语言的编写,实现对网站基础性的技术改造,达到无障碍网站建设中等级1的要求。

3. 根据规范要求设计无障碍网站频道,更进一步的满足不同用户群体对无障碍网站的功能需求,达到无障碍网站建设中部分等级2的要求。

4.以实现无障碍网站建设中部分等级3的要求为目标,借助社会各界资源,将手语等与网站功能的有机结合,为残疾人士提供更佳人性化的网站服务,使无障碍网站建设达到一个更高的水平。

6.2 总体架构

6.2.1 功能全景图

6.3 服务对象分类

6.3.1 针对正常人的策略

6.3.2 针对外国人的策略

6.3.3 针对儿童的策略

6.3.4 针对老年人的策略

6.3.5 针对色盲人士的策略

6.3.6 针对视力障碍人士的策略

6.3.7 针对肢体残疾人的策略

6.4 网站无障碍辅助浏览

在网站首页提供了关闭和开启无障碍网站浏览辅助工具的快捷键,而且在

网站首页顶部导航栏内,设有无障碍辅助浏览按钮,也可通过点击该按钮开启或关闭无障碍网站浏览辅助工具。网站浏览者可根据自己的需求自行调整网页界面的大小,界面放大是将网站当前页面显示比例放大,界面放大后网页内容也会随之变大;界面缩小:将网站当前页面显示比例缩小,界面缩小后网页内容也会随之变小。主要提供以下功能:

a)提供开启、关闭无障碍网站浏览辅助工具的功能;

b)提供无障碍纯文本转换模式;

c)提供文字大小控制功能;

d)提供高对比度显示功能;

e)提供辅助线辅助功能;

f)提供界面控制功能。

6.4.1 纯文本模式

6.4.2 网页图文放大缩小

6.4.3 高对比阅读配色器

6.4.4 阅读辅助十字光标

6.5 无障碍语音导航

6.5.1 网站智能语音朗读

6.5.2 盲人语音导航版网站

6.6 无障碍工具部署

7 开通残疾人专栏

从某省网上办事大厅中政务公开、个人事项,选择与残疾人比较关心的板块,建立专门的导航通道,通过调用语音引擎和内容快捷键的设计,以语音导读加快捷操作的方式实现残疾人专栏的内容导读,方便残障人士检索和办理业务。

残疾人专栏的开通将以一个独立的模块进行设计与开通,其内容将来调用现在网站中与残疾人相关的业务内容,但不会影响现在网站的内容布局。

7.1 个人事项

按服务部分类,先做某省残疾人联合会现有服务项目中省级服务项,如下所示。

7.1.1 康复医疗

7.1.2 残疾证申办

8 对接某省信息无障碍公共服务平台

某省信息无障碍公共服务平台:http://wza.xxx.com/,采用的无障碍工具与我公司采用的技术类似。用户通过信息无障碍公共服务平台从某省政府门户网站跳转到某省网上办事大厅,某省信息无障碍公共服务平台的无障碍辅助工具默认是开启,这就需要某省网上办事大厅无障碍辅助工具默认处于关闭状态;当用户直接访问某省网上办事大厅,没有了某省信息无障碍公共服务平台的支持,就需要手动开启某省网上办事大厅的无障碍辅助工具。

对接策略:某省网上办事大厅主厅经过信息无障碍规则标准改造后,将与某省信息无障碍公共服务平台进行对接,配置入口连接,接入某省信息无障碍公共服务对原网站进行解析识别,承建商需重新做个首页,修改某省网上办事大厅已有链接。相当于两个首页,一个对接某省信息无障碍公共服务平台,一个作为网上办事大厅入口。

8.1 某省信息无障碍公共服务平台无障碍版本和功能

某省信息无障碍公共服务平台主要实现了以下无障碍版本和功能:

8.1.1 读屏专用版

8.1.2 辅助浏览版

8.1.3 语音导航版

太阳湾 - 信息无障碍公共服务平台 http://wza.rrbay.com

信息无障碍 - 改造指南相关推荐

  1. 网站信息无障碍改造咨询

    前言 为了体现政府提供公共服务的公平.公正.均等化的要求,保障弱势群体获得政府公众服务的权利,我国政府近年一直致力于推动信息无障碍技术在各个领域的应用,先后制定<无障碍环境建设条例>.&l ...

  2. BAT和IBM信息无障碍现状概要

    本文为CSDN原创文章,未经允许不得转载,更多信息无障碍技术文章请关注信息无障碍知识库 根据CSDN了解到的情况,目前国内在信息无障碍方面进展较慢,信息无障碍的概念还远没有在相关企业中普及.很多企业甚 ...

  3. 网站信息无障碍辅助工具条源码

        交流QQ群:26363996 前言 为了体现政府提供公共服务的公平.公正.均等化的要求,保障弱势群体获得政府公众服务的权利,我国政府近年一直致力于推动信息无障碍技术在各个领域的应用,先后制定& ...

  4. 网站信息无障碍辅助工具

    前言 为了体现政府提供公共服务的公平.公正.均等化的要求,保障弱势群体获得政府公众服务的权利,我国政府近年一直致力于推动信息无障碍技术在各个领域的应用,先后制定<无障碍环境建设条例>.&l ...

  5. 政府网站群适老化与无障碍改造

    版权声明:本文章由"深圳市信科网络科技有限公司"编辑组汇编而成,未经授权和许可,任何个人或媒体不得对本网站的文章及其他信息资料予以复制.转载.抄袭.改编. 如需转载请联系本网站客服 ...

  6. sql 拆分_技术分享 | 基于分布式中间件的SQL改造指南

    原创作者: 孙正方 4月12日,GOPS全球运维大会在深圳隆重召开,全球运维大会是国内第一个运维行业大会,爱可开源社区在基础架构及DevOps解决方案专场分享了<基于分布式中间件的SQL改造指南 ...

  7. aria-label及aria-labelledby应用//////////[信息无障碍产品联盟]

    aria-label及aria-labelledby应用 http://accessibilityunion.org/archives/808 发表于 2013 年 12 月 12 日 由 sisiy ...

  8. 信息无障碍的发展和技术实践

    作者:张昆,信息无障碍研究会首席专家.拥有近20年的信息无障碍理论及实践经验,曾任职IBM大中华区信息无障碍中心专家.W3C中国区信息无障碍事务负责人,参与了"2008年北京奥运会信息无障碍 ...

  9. 信息无障碍专业术语---信息无障碍

    文章来源:北京联合大学信息无障碍辅助技术学科 信息无障碍(Information Accessibility) 关于信息无障碍这个名词的定义,中国互联网协会给出的是:任何人(无论是健全人还是残疾人,无 ...

最新文章

  1. 有没有一段代码,让你觉得人类的智慧也可以璀璨无比?
  2. logical_not torch
  3. 成功解决from scipy.linalg import _fblas ImportError: DLL load failed: 找不到指定的模块。
  4. AOP之PostSharp7-解决IOC 不能直接new问题,简化IOC开发和IOC对象LazyLoad
  5. find命令---Linux学习笔记
  6. java 客户化排序_第八部分_客户化JSP标签
  7. Slog59_项目上线之域名备案时两家或多家运营商之间的业务交叉经历
  8. Silverlight访问Wcf Ria Library的问题总结
  9. spring MVC interceptor post遇到问题
  10. 缓存系统在游戏业务中的特异性
  11. linux 查看运行平台,linux查看程序运行相关命令
  12. 大型网站技术架构演进与性能优化
  13. RK987按键失灵问题
  14. 基于IPS7LnkNet.Advanced的S7Watch 西门子PLC调试工具
  15. 【笑爆肚子的超级冷笑话】
  16. 页面静态化的优点及缺点
  17. 论文进展-关于小样本学习的一些思考和疑问
  18. 万字长文:功能安全量产落地的三座大山
  19. 点击复制按钮复制input中的内容
  20. 达人评测 华为matebook16对比联想小新pro16锐龙版 2021哪个好

热门文章

  1. 简历类个人网站如何制作?
  2. 2018 世界杯:科技辅助裁判是否靠谱?
  3. 25. OP-TEE驱动篇----驱动编译,加载和初始化(二)
  4. SpringBoot整合Spring Data Elasticsearch
  5. 解决SQLyog连接mysql报错:Your password has expired
  6. 802.11基本概念介绍【802.11 无线网络权威指南学习总结1】
  7. 让工程师沉思的68个经典小故事
  8. usr/bin/ld: i386 architecture of input file XXX.a( xxx.o) is incompatible with i386:x86-64
  9. 第一课:句子成分与基本句型
  10. 视频号扩展链接一键转换文章链接