XX市无障碍网站建设方案.doc

《XX市无障碍网站建设方案.doc》由会员分享，可在线阅读，更多相关《XX市无障碍网站建设方案.doc（24页珍藏版）》请在三一办公上搜索。

1、 XX市无障碍网站建设方案讨 论 稿XX软件技术有限责任公司2011年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 国内优秀无障碍网站对比分析122.4.1 网页添加无障碍浏览辅助工具122.4.2 语音无障碍网站172.4.3

2、无障碍浏览通道（专栏）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、更代表了一种多重性阻碍，显示出在建立公平与先进的信息社会上的困难。因此，为了消除残障人士在信息上的数字鸿沟现象，信息无障碍的议题已逐渐受到各方的关注，政府有责任为其推出切实可行的策略和办法，实现人人平等的需要。近年来许多西方发达国家已经注意到网络及信息资源的运用对残障人士的生活品质和社会经济地位提升的影响，以及对残障人士使用网络资源的困扰，有些国家已通过政府机构与民间企业的力量，积极推动和制订无障碍网络环境，尤其是无障碍政府网站建设的相关政策。1.2 总体定位（1）提高政府、企业相关部门对信息无障碍的认识通过实现网页无障碍，加大社会宣传，促进政府、企业相关部门加大建设信息无障碍力度。从而使得更

4、多的人群在信息社会中收益。通过实现网页无障碍的相关新闻、最新政策的发布，中国信息无障碍行业标准技术发表，无障碍发展的特点介绍等信息，提高政府、企业相关部门对信息无障碍的认识、呼吁全社会关心信息无障碍事业，加速网站无障碍事业发展，从而使得更多的人群在信息社会中收益。（2）成为信息无障碍领域信息发布的平台通过实现网页无障碍，使其成为信息无障碍领域信息发布的平台。发布政府部门新出台的相关政策措施，有利于民众更直接有效的了解信息无障碍的政策信息。（3）成为沟通交流的平台通过实现网页无障碍，使其成为沟通交流的平台。为政府部门、企业相关部门、技术人员了解、认识、学习提供全方面的知识源；使之成为信息无障碍领

5、域相关法律知识及标准的资料库。（4）成为知识获取的平台通过实现网页无障碍，使其成为知识获取的平台。网页本身严格遵守信息无障碍行页标准等级1要求开发。在网页中放置WCAG2.0规定、中国信息无障碍行业标准的相关规定，信息无障碍行页标准等级1要求等内容，帮助网页制作人员更好的把握信息无障碍网页制作规范以及制作技巧，使信息无障碍频道具有可模仿性，为其他网站进行无障碍设计制作提供参照样本。（5）体验网页信息无障碍通过实现网页无障碍，使用网页信息无障碍支持工具，使大家方便看网页，听网页，体验网页信息无障碍。为民众提供便民服务，帮助残障以及老年人士实现漫游网络的梦想；网页的无障碍建设好似公路的铺建，那么网

6、页信息无障碍支持工具就是路上的车，有了路可以让车更好的行驶，从而使得身体差异人群能更快的到达目的地全面、顺畅的看网页，听网页，体验网页信息无障碍。第二部分 项目需求概述2.1 建设目标依据国家通信行业标准信息无障碍-身体机能差异人群-网站设计无障碍技术要求），参照国际通用网站无障碍设计规范，在“十二五”规划期间内，使“1+3”政府网站无障碍改造基本达到一级及部分二级标准，即：网站具备操作引导提示、图片信息替代文字、链接内容有完整的可理解提示等无障碍特征，实现用键盘操作可以完成网站内容访问的基本无障碍目标，盲人借助“读屏软件”等辅助工具可顺利浏览网站信息，弱视人群借助站内无障碍辅助工具，可以对文

7、字（界面）大小、对比度、灰度等进行调整以满足其浏览需求。2.2 建设任务1根据无障碍网站所面向的不同用户群体，从无障碍网站设计规范及技术规范的层面，完成对现有青岛政务网站所有页面的基础性改造分析工作。 2. 在不影响网页美观、结构、相关功能的前提下，以面向不同用户群体所达到的功能为出发点，由简单到复杂，通过Javacript等脚本语言的编写，实现对网站基础性的技术改造，达到无障碍网站建设中等级1的要求。 3. 根据规范要求设计无障碍网站频道，更进一步的满足不同用户群体对无障碍网站的功能需求，达到无障碍网站建设中部分等级2的要求。 4以实现无障碍网站建设中部分等级3的要求为目标，借助社会各界资源

8、，将手语等与网站功能的有机结合，为残疾人士提供更佳人性化的网站服务，使青岛无障碍网站建设达到一个更高的水平。2.3 服务对象分类 2.3.1 针对正常人的策略 1、网站的页面实现黑白反转的效果 针对长时间使用网页的用户群体，通过黑白反转的效果可以适用于易造成视疲劳的网页。2.3.2 针对外国人的策略 1、访问日文网页时，用平假名进行注音 可以对当前浏览的中文网页上的汉字和片假名标注平假名读音。 2、访问日文网页时，用罗马字进行注音 可以对当前浏览的网页上的汉字、片假名和平假名标注罗马字读音。2.3.4 针对儿童的策略1、对网站使用注音功能 可以对当前浏览的中文网页上的汉字标注拼音。2.3.4

9、针对老年人的策略 1、字体和样式可进行控制（针对视觉不佳的老年人）网页设计者应该针对老年人的视力情况对网页内容的字体和样式进行调整或提供用户自行调整的功能，比如字体的放大，样式的变化（黑底白字或白底黑字），使得这类人群可以根据需要控制字体和样式，确保信息的获取。 2、建立编排格式良好的表格表格的呈现对于使用各种特殊输出装置的老年人来说很可能会造成网页内容被切割成顺序错乱且无法理解的信息。因此在使用表格来表达信息时，应建立编排格式良好的表格，并且这样的表格也更方便老年人阅读和了解其内容。 3、不要用过于专业的语言，尽量使用自然语言网页上的文字要尽量使用自然语言，过于专业的语言会让人难以理解，遇到

10、缩写和简称，应提供进一步的说明。 4、提供网站内容导引信息，提示用户选择网站内容要有相关的导引信息，对老年人的选择做出提示，使得老年人能够便捷的获取到自己想要的信息。 5、提供清楚的网站浏览导航网站浏览导航标记要在网页上清楚良好的表现，防止出现死链接或断链的现象。 6、确保使用者能处理时间敏感内容的改变在网页信息中所谓时间敏感内容是指网页显示的信息可能会以可移动、闪烁或滚动条等方式来呈现或自动更新信息内容。因为某些老年人在阅读快速移动的文字或闪烁的图形会造成其注意力分散或者身体不适的现象；各种特殊输出装置可能并无阅读滚动条文字的功能，不能和移动中的信息内容做互动操作。为了顾及以上这些使用网页的

11、需求，网页开发者应该小心使用这些时间敏感内容的操作设计，要确定浏览器所提供的控制机制可让老年人处理这些信息，否则就应该考虑提供这些数据对象或网页的替代方案。 7、确保简单清楚的网页内容网页内容要力求简单清晰，否则易使网页内容庞杂，信息海量，使得老年人无所适从。特别对于那些强调实效性，最新的重要内容，能够用醒目的标签标注，确保老年人能第一时间了解重要的内容变化。2.3.4 针对听力残疾人的策略 在无障碍网站建设过程当中可以采取以下措施为听力残疾人员提供服务：（1）所有语音档案必须有文字旁白；（2）视讯中的声音必须提供同步文字型态的旁白；（3）服务器端影像地图中的超级链接必须在网页中有额外对应的文

12、字超级链接；（4）多媒体呈现时，必须同步产生相对应替代的语音或文字说明；（5）客户端影像地图中的超级链接必须在网页中有额外对应的可及性超级链接；2.3.5 针对色盲人士的策略对具有图像、视频、小程序（applets）或是任何非文本（non-text）的内容及信息提供相关的文字叙述。使用文字来叙述该对象的内容或功能。记得要在所有的图像上使用 ALT 标签来加注；选择颜色及反差/对比色时要谨慎。不要以颜色作为传达信息的主要指针。在色彩的调配及组合上也要小心。在文字和背景色的选择要格外谨慎，例如不要在黑色的背景上使用蓝色系的文字等。2.3.6 针对视力障碍人士的策略首先，在无障碍网站建设过程当中可以

13、采取图片的显示加上文字说明，让网页的替代文字说明，这样文字说明可经由屏幕阅读软件(视障人士使用的辅助工具)或点字机来读取网页资讯。另外，在无障碍网站建设过程当中可以采取以下措施与读屏软件相互配合来为视力障碍人士提供人性化的服务：（1）图片需要加上替代文字说明;（2）对于applet提供替代文字说明;（3）对于object提供替代文字说明;（4）对于窗体中的图形按键提供替代文字说明;（5）影像地图区域需要加上替代文字说明;（6）所有语音档案必须有文字旁白;（7）多媒体视觉影像呈现时，必须提供听觉说明;（8）视讯中的声音必须提供同步文字型态的旁白;（9）多媒体呈现时，必须同步产生相对应替代的语音或

14、文字说明;（10）当ALT属性的文字陈述大于150个英文字符时，考虑另外提供文字叙述;图形替代文字陈述不够清晰时，提供更多的文字描述(如使用longdesc属性);其次，视力障碍人士可以使用读屏软件作为辅助工具来到网站内容进行浏览。读屏软件是一种可以帮助盲人上网的工具，现在国内有阳光读屏、永德读屏和晨光读屏、争渡读屏等软件。读屏软件是专为盲人或视力有障碍的人设计的屏幕朗读软件。视障人士可通过数字键盘的切换操作，以及大键盘上的几个功能键的切换，就能够随心所欲地进行查找和处理文件，对网页进行导航浏览、编辑和收发电子邮件。2.3.7 针对肢体残疾人的策略无障碍网站建设过程当中应当为肢体残疾人考虑以下

15、几点因素同时也可以采用一些人性化辅助工具：以键盘取代鼠标操作，以利肢体残疾障碍人士操作网页。肢体障碍者部分因为只能做小区域的操作，而不能和移动中的信息内容做互动操作。为了考虑相关人士使用网页的需求，网页开发者应该小心使用这些时间敏感内容的操作设计，要确定浏览器所提供的控制机制可让身心障碍人士处理这些信息，否则就应该考虑提供这些数据对象或网页的替代方案。同时应当考虑肢体障碍 (physical disabilities)人士使用网页信息所必须考虑的种种因素。除此之外，考虑因素也应包括这些肢体障碍人士所使用的特殊上网装置(特殊按钮、特殊键盘、点字输入装置等)，这些装置可能是使用各种不同的操作系统，

16、或只具有基本的网页浏览功能。2.4 国内优秀无障碍网站对比分析2.4.1 网页添加无障碍浏览辅助工具1. 纯文本通道点击后进入纯文本模式网页，在纯文本网页中，将网页中的图像等非文本内容转化成文本，并以线性化的显示方式从上到下显示，以满足具有不同访问需求人群的需求。进入纯文本模式后还可以通过点击“切换为可视化模式”按钮返回正常模式。 2文字大小控制按钮文字大小控制按钮可以调整网页的字体大小，包括中等字体、大型字体、超大字体、还原字体等功能，该按钮缺省状态为“中等字体”，通过点击该按钮改变页面的字体大小和按钮状态。按钮状态改变顺序为：中等字体大型字体超大字体还原（中等）字体。3高对比度显示所谓高对

17、比度是将当前页面网页的前景内容和背景的颜色对比调到最大，为弱视用户能够清晰地访问网页内容提供了帮助。4辅助线 辅助线是横竖两条红色的基准线，为视力障碍用户校队阅读的位置提供了帮助。5界面放大和缩小网站浏览者可根据自己的需求自行调整网页界面的大小，界面放大是将网站当前页面显示比例放大，界面放大后网页内容也会随之变大； 界面缩小：将网站当前页面显示比例缩小，界面缩小后网页内容也会随之变小。6无障碍强化导航功能网站为方便盲人浏览，采用最先进的有含义的标记方式，为屏幕阅读器软件读取网站内容提供了完备的支持，盲人朋友可以通过无障碍强化导航功能，快速切换到目标位置，结合读屏软件浏览网站信息。7无障碍快捷键

18、设置无障碍快捷键设置分为以下四类：1）栏目跳转的快捷键设置； 2）区域跳转的快捷键设置； 3）无障碍辅助浏览工具的快捷键设置； 4）语音验证码的快捷键设置； 栏目跳转 a）栏目分组跳转快捷键：IE6使用快捷键(Alt+Z)；IE8及其它浏览器使用快捷键（Ctrl+Z）； b）栏目分组逆向跳转快捷键：IE6使用快捷键(Shift+ Alt+Z)；IE8及其它浏览器使用快捷键（Ctrl+Shift+Z）； 返回无障碍操作说明顶部 区域跳转 a）跳转到主要内容区快捷键： IE6使用快捷键(Alt+C)；IE8及其它浏览器使用快捷键（Alt+Ctrl+C）； b）跳转到正文区域的快捷键：IE6及其它浏

19、览器通用快捷键(Alt+C)，跳转到主要内容区域后，再使用Tab键或向下方向键阅读内容； c）跳转到顶部导航区快捷键：IE6及其它浏览器通用快捷键(Alt+K)； d）跳转到中间内容区快捷键：IE6使用快捷键(Alt+M)；IE8及其它浏览器使用快捷键（Alt+Ctrl+Shift+M）； e）跳转到左部内容区快捷键：IE6使用快捷键(Alt+L)；IE8及其它浏览器使用快捷键（Alt+Ctrl+Shift+L）； f）跳转到底部内容区快捷键：IE6使用快捷键(Alt+B)；IE8及其它浏览器使用快捷键（Alt+Ctrl+Shift+B）； 返回无障碍操作说明顶部 无障碍工具条 a）关闭和开启

20、工具条快捷键：IE6及其它浏览器通用快捷键(Alt+J)； b）纯文本模式开启快捷键：IE6及其它浏览器通用快捷键（Alt+Shift+J）； d）可视化模式返回快捷键：IE6及其它浏览器通用快捷键（Alt+Ctrl+J），纯文本模式开启、返回快捷键不依赖于工具条的开启状态。 返回无障碍操作说明顶部 语音验证码 a）播放语音验证密码的快捷键（Alt+Q），当焦点移动到输入验证码的文本框时，读屏软件会朗读：请按快捷键（Alt+Q）播放语音验证码。此时按（Alt+Q）就会收听到语音验证码信息。2.4.2 语音无障碍网站中国残疾人联合会语音网站、北京市朝阳区无障碍网站、江西省信息产业厅无障碍化网站这

21、三个网站采用了建设语音无障碍网站（专栏）的形式让障碍人士实现无障碍访问。实现此类网站网站建设方采购语音阅读软件，以及事先录制各类说明性语音，并结合网站快捷键进行无障碍访问。 中国残疾人联合会朝阳无障碍网站 江西省信息产业厅2.4.3 无障碍浏览通道（专栏）1上海市司法行政网无障碍浏览通道（专栏）上海市司法行政网既实现了通过全网站的无障碍工具条来访问网站的所有网页，也实现了点击网站首页无障碍通道按钮，对无障碍通道包含的特定栏目进行快速访问。其无障碍通道栏目包括：司法行政要闻、通知公告、最新信息公开三个栏目，另外还包括信息查询搜索功能。用户可以使用上方的无障碍访问工具条来访问无障碍通道栏目的信息。

22、例如司法行政要闻栏目，无障碍通道栏目中的司法行政要闻栏目与网站首页的司法行政要闻栏目的页面相比，更加简洁，更易于访问。从网站首页进入司法行政要闻栏目截图从无障碍通道栏目进入司法行政要闻栏目截图2上海市民政局网站无障碍浏览通道（专栏）上海市民政局网站采用专门建设无障碍浏览通道栏目的模式来实现网站的无障碍访问，并设置无障碍浏览工具条，进一步增强无障碍访问的功能。其无障碍通道栏目包括：民政新闻、政府信息公开、便民服务、网上互动等四大模块，每个模块又包含若干子模块，信息量较为丰富，基本上涵盖了主网站的绝大部分功能。3.上海市人力资源和社会保障局网站无障碍浏览通道（专栏）上海市人力资源和社会保障局网站采用专门建设无障碍浏览通道栏目的模式来实现网站的无障碍访问，并采用“两键走遍无障碍频道，TAB键选择栏目，回车键查看详情”的方式实现用户的快速访问。其无障碍通道栏目包括：最新公开信息、政策法规、详细搜索三大模块，该栏目支持缩放字体功能。第三部分 青岛市无障碍网站建设方向3.1青岛无障碍网站频道内容规划方案3.1.1 网站规划思路略3.1.2 频道栏目架构略3.1.3 频道页面设计略3.1.4 频道页面功能和特点略3.2时间计划安排 第一阶段略第二阶段略第三阶段略第四阶段略