XX市无障碍网站建设方案

1、 xxxx 市无障碍网站建设方案市无障碍网站建设方案讨讨 论论 稿稿xxxx 软件技术有限责任公司软件技术有限责任公司20112011 年年 5 5 月月 目目 录录第一部分 项目概述.31.1 建设背景.31.2 总体定位.3第二部分 项目需求概述.62.1 建设目标.62.2 建设任务.62.3 服务对象分类.72.3.1 针对正常人的策略.72.3.2 针对外国人的策略.72.3.4 针对儿童的策略.82.3.4 针对老年人的策略.82.3.4 针对听力残疾人的策略.92.3.5 针对色盲人士的策略.102.3.6 针对视力障碍人士的策略.102.3.7 针对肢体残疾人的策略.122.4

2、 国内优秀无障碍网站对比分析.122.4.1 网页添加无障碍浏览辅助工具.122.4.2 语音无障碍网站.172.4.3无障碍浏览通道（专栏）.20第三部分 青岛市无障碍网站建设方向.243.1 青岛无障碍网站频道内容规划方案 .243.1.1 网站规划思路.243.1.2 频道栏目架构.243.1.3 频道页面设计.243.1.4 频道页面功能和特点.243.2 时间计划安排 .24第一阶段.25第二阶段.25第三阶段.26第四阶段.26第一部分第一部分 项项目概述目概述1.1 建建设设背景背景随着社会的发展和进步，信息技术逐渐融入每个人的生活，而随着网络技术应用的普及，信息社会也已经逐步成

3、形。在现今高度信息化的社会，残障人士与一般人同样享有使用信息科技、提高生活品质的权利，但是残障人士与普通民众在数字资源的应用上普遍存在数字鸿沟的现象。这一现象不仅造成信息鸿沟，更代表了一种多重性阻碍，显示出在建立公平与先进的信息社会上的困难。因此，为了消除残障人士在信息上的数字鸿沟现象，信息无障碍的议题已逐渐受到各方的关注，政府有责任为其推出切实可行的策略和办法，实现人人平等的需要。近年来许多西方发达国家已经注意到网络及信息资源的运用对残障人士的生活品质和社会经济地位提升的影响，以及对残障人士使用网络资源的困扰，有些国家已通过政府机构与民间企业的力量，积极推动和制订无障碍网络环境，尤其是无障碍

4、政府网站建设的相关政策。1.2 总总体定位体定位（1）提高政府、企业相关部门对信息无障碍的认识通过实现网页无障碍，加大社会宣传，促进政府、企业相关部门加大建设信息无障碍力度。从而使得更多的人群在信息社会中收益。通过实现网页无障碍的相关新闻、最新政策的发布，中国信息无障碍行业标准技术发表，无障碍发展的特点介绍等信息，提高政府、企业相关部门对信息无障碍的认识、呼吁全社会关心信息无障碍事业，加速网站无障碍事业发展，从而使得更多的人群在信息社会中收益。（2）成为信息无障碍领域信息发布的平台通过实现网页无障碍，使其成为信息无障碍领域信息发布的平台。发布政府部门新出台的相关政策措施，有利于民众更直接有效的

5、了解信息无障碍的政策信息。（3）成为沟通交流的平台通过实现网页无障碍，使其成为沟通交流的平台。为政府部门、企业相关部门、技术人员了解、认识、学习提供全方面的知识源；使之成为信息无障碍领域相关法律知识及标准的资料库。（4）成为知识获取的平台通过实现网页无障碍，使其成为知识获取的平台。网页本身严格遵守信息无障碍行页标准等级 1 要求开发。在网页中放置 wcag2.0规定、中国信息无障碍行业标准的相关规定，信息无障碍行页标准等级 1 要求等内容，帮助网页制作人员更好的把握信息无障碍网页制作规范以及制作技巧，使信息无障碍频道具有可模仿性，为其他网站进行无障碍设计制作提供参照样本。（5）体验网页信息无障

6、碍通过实现网页无障碍，使用网页信息无障碍支持工具，使大家方便看网页，听网页，体验网页信息无障碍。为民众提供便民服务，帮助残障以及老年人士实现漫游网络的梦想；网页的无障碍建设好似公路的铺建，那么网页信息无障碍支持工具就是路上的车，有了路可以让车更好的行驶，从而使得身体差异人群能更快的到达目的地全面、顺畅的看网页，听网页，体验网页信息无障碍。第二部分第二部分 项项目需求概述目需求概述2.1 建建设设目目标标依据国家通信行业标准信息无障碍-身体机能差异人群-网站设计无障碍技术要求），参照国际通用网站无障碍设计规范，在“十二五”规划期间内，使“1+3”政府网站无障碍改造基本达到一级及部分二级标准，即：

7、网站具备操作引导提示、图片信息替代文字、链接内容有完整的可理解提示等无障碍特征，实现用键盘操作可以完成网站内容访问的基本无障碍目标，盲人借助“读屏软件”等辅助工具可顺利浏览网站信息，弱视人群借助站内无障碍辅助工具，可以对文字（界面）大小、对比度、灰度等进行调整以满足其浏览需求。2.2 建建设设任任务务1根据无障碍网站所面向的不同用户群体，从无障碍网站设计规范及技术规范的层面，完成对现有青岛政务网站所有页面的基础性改造分析工作。 2. 在不影响网页美观、结构、相关功能的前提下，以面向不同用户群体所达到的功能为出发点，由简单到复杂，通过 javacript 等脚本语言的编写，实现对网站基础性的技术

8、改造，达到无障碍网站建设中等级 1 的要求。 3. 根据规范要求设计无障碍网站频道，更进一步的满足不同用户群体对无障碍网站的功能需求，达到无障碍网站建设中部分等级 2的要求。 4以实现无障碍网站建设中部分等级 3 的要求为目标，借助社会各界资源，将手语等与网站功能的有机结合，为残疾人士提供更佳人性化的网站服务，使青岛无障碍网站建设达到一个更高的水平。2.3 服服务对务对象分象分类类 2.3.1 针对正常人的策略 1、网站的页面实现黑白反转的效果 针对长时间使用网页的用户群体，通过黑白反转的效果可以适用于易造成视疲劳的网页。2.3.2 针对外国人的策略 1、访问日文网页时，用平假名进行注音 可以

9、对当前浏览的中文网页上的汉字和片假名标注平假名读音。 2、访问日文网页时，用罗马字进行注音 可以对当前浏览的网页上的汉字、片假名和平假名标注罗马字读音。2.3.4 针对儿童的策略1、对网站使用注音功能 可以对当前浏览的中文网页上的汉字标注拼音。2.3.4 针对老年人的策略 1、字体和样式可进行控制（针对视觉不佳的老年人）网页设计者应该针对老年人的视力情况对网页内容的字体和样式进行调整或提供用户自行调整的功能，比如字体的放大，样式的变化（黑底白字或白底黑字），使得这类人群可以根据需要控制字体和样式，确保信息的获取。 2、建立编排格式良好的表格表格的呈现对于使用各种特殊输出装置的老年人来说很可能会

10、造成网页内容被切割成顺序错乱且无法理解的信息。因此在使用表格来表达信息时，应建立编排格式良好的表格，并且这样的表格也更方便老年人阅读和了解其内容。 3、不要用过于专业的语言，尽量使用自然语言网页上的文字要尽量使用自然语言，过于专业的语言会让人难以理解，遇到缩写和简称，应提供进一步的说明。 4、提供网站内容导引信息，提示用户选择网站内容要有相关的导引信息，对老年人的选择做出提示，使得老年人能够便捷的获取到自己想要的信息。 5、提供清楚的网站浏览导航网站浏览导航标记要在网页上清楚良好的表现，防止出现死链接或断链的现象。 6、确保使用者能处理时间敏感内容的改变在网页信息中所谓时间敏感内容是指网页显示

11、的信息可能会以可移动、闪烁或滚动条等方式来呈现或自动更新信息内容。因为某些老年人在阅读快速移动的文字或闪烁的图形会造成其注意力分散或者身体不适的现象；各种特殊输出装置可能并无阅读滚动条文字的功能，不能和移动中的信息内容做互动操作。为了顾及以上这些使用网页的需求，网页开发者应该小心使用这些时间敏感内容的操作设计，要确定浏览器所提供的控制机制可让老年人处理这些信息，否则就应该考虑提供这些数据对象或网页的替代方案。 7、确保简单清楚的网页内容网页内容要力求简单清晰，否则易使网页内容庞杂，信息海量，使得老年人无所适从。特别对于那些强调实效性，最新的重要内容，能够用醒目的标签标注，确保老年人能第一时间了

12、解重要的内容变化。2.3.4 针对听力残疾人的策略 在无障碍网站建设过程当中可以采取以下措施为听力残疾人员提供服务：（1）所有语音档案必须有文字旁白；（2）视讯中的声音必须提供同步文字型态的旁白；（3）服务器端影像地图中的超级链接必须在网页中有额外对应的文字超级链接；（4）多媒体呈现时，必须同步产生相对应替代的语音或文字说明；（5）客户端影像地图中的超级链接必须在网页中有额外对应的可及性超级链接；2.3.5 针对色盲人士的策略对具有图像、视频、小程序（applets）或是任何非文本（non-text）的内容及信息提供相关的文字叙述。使用文字来叙述该对象的内容或功能。记得要在所有的图像上使用 a

13、lt 标签来加注；选择颜色及反差/对比色时要谨慎。不要以颜色作为传达信息的主要指针。在色彩的调配及组合上也要小心。在文字和背景色的选择要格外谨慎，例如不要在黑色的背景上使用蓝色系的文字等。2.3.6 针对视力障碍人士的策略首先，在无障碍网站建设过程当中可以采取图片的显示加上文字说明，让网页的替代文字说明，这样文字说明可经由屏幕阅读软件(视障人士使用的辅助工具)或点字机来读取网页资讯。另外，在无障碍网站建设过程当中可以采取以下措施与读屏软件相互配合来为视力障碍人士提供人性化的服务：（1）图片需要加上替代文字说明;（2）对于 applet 提供替代文字说明;（3）对于 object 提供替代文字说

14、明;（4）对于窗体中的图形按键提供替代文字说明;（5）影像地图区域需要加上替代文字说明;（6）所有语音档案必须有文字旁白;（7）多媒体视觉影像呈现时，必须提供听觉说明;（8）视讯中的声音必须提供同步文字型态的旁白;（9）多媒体呈现时，必须同步产生相对应替代的语音或文字说明;（10）当 alt 属性的文字陈述大于 150 个英文字符时，考虑另外提供文字叙述;图形替代文字陈述不够清晰时，提供更多的文字描述(如使用longdesc 属性);其次，视力障碍人士可以使用读屏软件作为辅助工具来到网站内容进行浏览。读屏软件是一种可以帮助盲人上网的工具，现在国内有阳光读屏、永德读屏和晨光读屏、争渡读屏等软件。

15、读屏软件是专为盲人或视力有障碍的人设计的屏幕朗读软件。视障人士可通过数字键盘的切换操作，以及大键盘上的几个功能键的切换，就能够随心所欲地进行查找和处理文件，对网页进行导航浏览、编辑和收发电子邮件。2.3.7 针对肢体残疾人的策略无障碍网站建设过程当中应当为肢体残疾人考虑以下几点因素同时也可以采用一些人性化辅助工具：以键盘取代鼠标操作，以利肢体残疾障碍人士操作网页。肢体障碍者部分因为只能做小区域的操作，而不能和移动中的信息内容做互动操作。为了考虑相关人士使用网页的需求，网页开发者应该小心使用这些时间敏感内容的操作设计，要确定浏览器所提供的控制机制可让身心障碍人士处理这些信息，否则就应该考虑提供这

16、些数据对象或网页的替代方案。同时应当考虑肢体障碍 (physical disabilities)人士使用网页信息所必须考虑的种种因素。除此之外，考虑因素也应包括这些肢体障碍人士所使用的特殊上网装置(特殊按钮、特殊键盘、点字输入装置等)，这些装置可能是使用各种不同的操作系统，或只具有基本的网页浏览功能。2.4 国内国内优优秀无障碍网站秀无障碍网站对对比分析比分析2.4.1 网页添加无障碍浏览辅助工具1. 纯文本通道点击后进入纯文本模式网页，在纯文本网页中，将网页中的图像等非文本内容转化成文本，并以线性化的显示方式从上到下显示，以满足具有不同访问需求人群的需求。进入纯文本模式后还可以通过点击“切换

17、为可视化模式”按钮返回正常模式。 2文字大小控制按钮文字大小控制按钮可以调整网页的字体大小，包括中等字体、大型字体、超大字体、还原字体等功能，该按钮缺省状态为“中等字体”，通过点击该按钮改变页面的字体大小和按钮状态。按钮状态改变顺序为：中等字体大型字体超大字体还原（中等）字体。3高对比度显示所谓高对比度是将当前页面网页的前景内容和背景的颜色对比调到最大，为弱视用户能够清晰地访问网页内容提供了帮助。4辅助线 辅助线是横竖两条红色的基准线，为视力障碍用户校队阅读的位置提供了帮助。5界面放大和缩小网站浏览者可根据自己的需求自行调整网页界面的大小，界面放大是将网站当前页面显示比例放大，界面放大后网页内

18、容也会随之变大； 界面缩小：将网站当前页面显示比例缩小，界面缩小后网页内容也会随之变小。6无障碍强化导航功能网站为方便盲人浏览，采用最先进的有含义的标记方式，为屏幕阅读器软件读取网站内容提供了完备的支持，盲人朋友可以通过无障碍强化导航功能，快速切换到目标位置，结合读屏软件浏览网站信息。7无障碍快捷键设置无障碍快捷键设置分为以下四类：1）栏目跳转的快捷键设置； 2）区域跳转的快捷键设置； 3）无障碍辅助浏览工具的快捷键设置； 4）语音验证码的快捷键设置； 栏目跳转 a）栏目分组跳转快捷键：ie6 使用快捷键(alt+z)；ie8 及其它浏览器使用快捷键（ctrl+z）； b）栏目分组逆向跳转快捷

19、键：ie6 使用快捷键(shift+ alt+z)；ie8及其它浏览器使用快捷键（ctrl+shift+z）； 返回无障碍操作说明顶部 区域跳转 a）跳转到主要内容区快捷键： ie6 使用快捷键(alt+c)；ie8 及其它浏览器使用快捷键（alt+ctrl+c）； b）跳转到正文区域的快捷键：ie6 及其它浏览器通用快捷键(alt+c)，跳转到主要内容区域后，再使用 tab 键或向下方向键阅读内容； c）跳转到顶部导航区快捷键：ie6 及其它浏览器通用快捷键(alt+k)； d）跳转到中间内容区快捷键：ie6 使用快捷键(alt+m)；ie8 及其它浏览器使用快捷键（alt+ctrl+shi

20、ft+m）； e）跳转到左部内容区快捷键：ie6 使用快捷键(alt+l)；ie8 及其它浏览器使用快捷键（alt+ctrl+shift+l）； f）跳转到底部内容区快捷键：ie6 使用快捷键(alt+b)；ie8 及其它浏览器使用快捷键（alt+ctrl+shift+b）； 返回无障碍操作说明顶部 无障碍工具条 a）关闭和开启工具条快捷键：ie6 及其它浏览器通用快捷键(alt+j)； b）纯文本模式开启快捷键：ie6 及其它浏览器通用快捷键（alt+shift+j）； d）可视化模式返回快捷键：ie6 及其它浏览器通用快捷键（alt+ctrl+j），纯文本模式开启、返回快捷键不依赖于工具条

21、的开启状态。 返回无障碍操作说明顶部 语音验证码 a）播放语音验证密码的快捷键（alt+q），当焦点移动到输入验证码的文本框时，读屏软件会朗读：请按快捷键（alt+q）播放语音验证码。此时按（alt+q）就会收听到语音验证码信息。2.4.2 语音无障碍网站中国残疾人联合会语音网站、北京市朝阳区无障碍网站、江西省信息产业厅无障碍化网站这三个网站采用了建设语音无障碍网站（专栏）的形式让障碍人士实现无障碍访问。实现此类网站网站建设方采购语音阅读软件，以及事先录制各类说明性语音，并结合网站快捷键进行无障碍访问。 中国残疾人联合会朝阳无障碍网站 江西省信息产业厅2.4.3 无障碍浏览通道（专栏）1上海市司法行政网无障碍浏览通道（专栏）上海市司法行政网既实现了通过全网站的无障碍工具条来访问网站的所有