无障碍网站建设方案

XXXX 市无障碍网站建设方案市无障碍网站建设方案 讨讨 论论 稿稿 XXXX 软件技术有限责任公司软件技术有限责任公司 20112011 年年 5 5 月月 目目 录录 第一部分 项目概述 3 1 1 建设背景 3 1 2 总体定位 3 第二部分 项目需求概述 6 2 1 建设目标 6 2 2 建设任务 6 2 3 服务对象分类 7 2 3 1 针对正常人的策略 7 2 3 2 针对外国人的策略 7 2 3 4 针对儿童的策略 8 2 3 4 针对老年人的策略 8 2 3 4 针对听力残疾人的策略 9 2 3 5 针对色盲人士的策略 10 2 3 6 针对视力障碍人士的策略 10 2 3 7 针对肢体残疾人的策略 12 2 4 国内优秀无障碍网站对比分析 12 2 4 1 网页添加无障碍浏览辅助工具 12 2 4 2 语音无障碍网站 17 2 4 3无障碍浏览通道 专栏 20 第三部分 青岛市无障碍网站建设方向 24 3 1 青岛无障碍网站频道内容规划方案 24 3 1 1 网站规划思路 24 3 1 2 频道栏目架构 24 3 1 3 频道页面设计 24 3 1 4 频道页面功能和特点 24 3 2 时间计划安排 24 第一阶段 25 第二阶段 25 第三阶段 26 第四阶段 26 第一部分第一部分 项项目概述目概述 1 1 建建设设背景背景 随着社会的发展和进步 信息技术逐渐融入每个人的生活 而随 着网络技术应用的普及 信息社会也已经逐步成形 在现今高度信息 化的社会 残障人士与一般人同样享有使用信息科技 提高生活品质 的权利 但是残障人士与普通民众在数字资源的应用上普遍存在数字 鸿沟的现象 这一现象不仅造成信息鸿沟 更代表了一种多重性阻碍 显示出在建立公平与先进的信息社会上的困难 因此 为了消除残障 人士在信息上的数字鸿沟现象 信息无障碍的议题已逐渐受到各方的 关注 政府有责任为其推出切实可行的策略和办法 实现人人平等的 需要 近年来许多西方发达国家已经注意到网络及信息资源的运用对 残障人士的生活品质和社会经济地位提升的影响 以及对残障人士使 用网络资源的困扰 有些国家已通过政府机构与民间企业的力量 积 极推动和制订无障碍网络环境 尤其是无障碍政府网站建设的相关政 策 1 2 总总体定位体定位 1 提高政府 企业相关部门对信息无障碍的认识 通过实现网页无障碍 加大社会宣传 促进政府 企业相关部门 加大建设信息无障碍力度 从而使得更多的人群在信息社会中收益 通过实现网页无障碍的相关新闻 最新政策的发布 中国信息无障碍 行业标准技术发表 无障碍发展的特点介绍等信息 提高政府 企业 相关部门对信息无障碍的认识 呼吁全社会关心信息无障碍事业 加 速网站无障碍事业发展 从而使得更多的人群在信息社会中收益 2 成为信息无障碍领域信息发布的平台 通过实现网页无障碍 使其成为信息无障碍领域信息发布的平台 发布政府部门新出台的相关政策措施 有利于民众更直接有效的了解 信息无障碍的政策信息 3 成为沟通交流的平台 通过实现网页无障碍 使其成为沟通交流的平台 为政府部门 企 业相关部门 技术人员了解 认识 学习提供全方面的知识源 使之成 为信息无障碍领域相关法律知识及标准的资料库 4 成为知识获取的平台 通过实现网页无障碍 使其成为知识获取的平台 网页本身严格 遵守信息无障碍行页标准等级 1 要求开发 在网页中放置 WCAG2 0 规定 中国信息无障碍行业标准的相关规定 信息无障碍行页标准等 级 1 要求等内容 帮助网页制作人员更好的把握信息无障碍网页制作 规范以及制作技巧 使信息无障碍频道具有可模仿性 为其他网站进 行无障碍设计制作提供参照样本 5 体验网页信息无障碍 通过实现网页无障碍 使用网页信息无障碍支持工具 使大家方 便看网页 听网页 体验网页信息无障碍 为民众提供便民服务 帮助 残障以及老年人士实现漫游网络的梦想 网页的无障碍建设好似公路 的铺建 那么网页信息无障碍支持工具就是路上的车 有了路可以让 车更好的行驶 从而使得身体差异人群能更快的到达目的地 全面 顺畅的看网页 听网页 体验网页信息无障碍 第二部分第二部分 项项目需求概述目需求概述 2 1 建建设设目目标标 依据国家通信行业标准 信息无障碍 身体机能差异人群 网站设 计无障碍技术要求 参照国际通用网站无障碍设计规范 在 十二 五 规划期间内 使 1 3 政府网站无障碍改造基本达到一级及部分二 级标准 即 网站具备操作引导提示 图片信息替代文字 链接内容有 完整的可理解提示等无障碍特征 实现用键盘操作可以完成网站内容 访问的基本无障碍目标 盲人借助 读屏软件 等辅助工具可顺利浏览 网站信息 弱视人群借助站内无障碍辅助工具 可以对文字 界面 大 小 对比度 灰度等进行调整以满足其浏览需求 2 2 建建设设任任务务 1 根据无障碍网站所面向的不同用户群体 从无障碍网站设计规范 及技术规范的层面 完成对现有青岛政务网站所有页面的基础性 改造分析工作 2 在不影响网页美观 结构 相关功能的前提下 以面向不同用户 群体所达到的功能为出发点 由简单到复杂 通过 Javacript 等脚 本语言的编写 实现对网站基础性的技术改造 达到无障碍网站 建设中等级 1 的要求 3 根据规范要求设计无障碍网站频道 更进一步的满足不同用户群 体对无障碍网站的功能需求 达到无障碍网站建设中部分等级 2 的要求 4 以实现无障碍网站建设中部分等级 3 的要求为目标 借助社会各 界资源 将手语等与网站功能的有机结合 为残疾人士提供更佳 人性化的网站服务 使青岛无障碍网站建设达到一个更高的水平 2 3 服服务对务对象分象分类类 2 3 1 针对正常人的策略 1 网站的页面实现黑白反转的效果 针对长时间使用网页的用户群体 通过黑白反转的效果可以适用 于易造成视疲劳的网页 2 3 2 针对外国人的策略 1 访问日文网页时 用平假名进行注音 可以对当前浏览的中文网页上的汉字和片假名标注平假名读音 2 访问日文网页时 用罗马字进行注音 可以对当前浏览的网页上的汉字 片假名和平假名标注罗马字读 音 2 3 4 针对儿童的策略 1 对网站使用注音功能 可以对当前浏览的中文网页上的汉字标注拼音 2 3 4 针对老年人的策略 1 字体和样式可进行控制 针对视觉不佳的老年人 网页设计者 应该针对老年人的视力情况对网页内容的字体和样式进行调整或提 供用户自行调整的功能 比如字体的放大 样式的变化 黑底白字或 白底黑字 使得这类人群可以根据需要控制字体和样式 确保信息 的获取 2 建立编排格式良好的表格 表格的呈现对于使用各种特殊输出装置的老年人来说很可能会造 成网页内容被切割成顺序错乱且无法理解的信息 因此在使用表格来 表达信息时 应建立编排格式良好的表格 并且这样的表格也更方便 老年人阅读和了解其内容 3 不要用过于专业的语言 尽量使用自然语言 网页上的文字要尽量使用自然语言 过于专业的语言会让人难以 理解 遇到缩写和简称 应提供进一步的说明 4 提供网站内容导引信息 提示用户选择 网站内容要有相关的导引信息 对老年人的选择做出提示 使得 老年人能够便捷的获取到自己想要的信息 5 提供清楚的网站浏览导航 网站浏览导航标记要在网页上清楚良好的表现 防止出现死链接 或断链的现象 6 确保使用者能处理时间敏感内容的改变 在网页信息中所谓时间敏感内容是指网页显示的信息可能会以可 移动 闪烁或滚动条等方式来呈现或自动更新信息内容 因为某些老 年人在阅读快速移动的文字或闪烁的图形会造成其注意力分散或者 身体不适的现象 各种特殊输出装置可能并无阅读滚动条文字的功能 不能和移动中的信息内容做互动操作 为了顾及以上这些使用网页的 需求 网页开发者应该小心使用这些时间敏感内容的操作设计 要确 定浏览器所提供的控制机制可让老年人处理这些信息 否则就应该考 虑提供这些数据对象或网页的替代方案 7 确保简单清楚的网页内容 网页内容要力求简单清晰 否则易使网页内容庞杂 信息海量 使 得老年人无所适从 特别对于那些强调实效性 最新的重要内容 能 够用醒目的标签标注 确保老年人能第一时间了解重要的内容变化 2 3 4 针对听力残疾人的策略 在无障碍网站建设过程当中可以采取以下措施为听力残疾人员 提供服务 1 所有语音档案必须有文字旁白 2 视讯中的声音必须提供同步文字型态的旁白 3 服务器端影像地图中的超级链接必须在网页中有额外对应的文 字超级链接 4 多媒体呈现时 必须同步产生相对应替代的语音或文字说明 5 客户端影像地图中的超级链接必须在网页中有额外对应的可及 性超级链接 2 3 5 针对色盲人士的策略 对具有图像 视频 小程序 applets 或是任何非文本 non text 的内容及信息提供相关的文字叙述 使用文字来叙述该对象的内容 或功能 记得要在所有的图像上使用 ALT 标签来加注 选择颜色及反差 对比色时要谨慎 不要以颜色作为传达信息的 主要指针 在色彩的调配及组合上也要小心 在文字和背景色的选 择要格外谨慎 例如不要在黑色的背景上使用蓝色系的文字等 2 3 6 针对视力障碍人士的策略 首先 在无障碍网站建设过程当中可以采取图片的显示加上文 字说明 让网页的替代文字说明 这样文字说明可经由屏幕阅读软 件 视障人士使用的辅助工具 或点字机来读取网页资讯 另外 在无 障碍网站建设过程当中可以采取以下措施与读屏软件相互配合来为 视力障碍人士提供人性化的服务 1 图片需要加上替代文字说明 2 对于 applet 提供替代文字说明 3 对于 object 提供替代文字说明 4 对于窗体中的图形按键提供替代文字说明 5 影像地图区域需要加上替代文字说明 6 所有语音档案必须有文字旁白 7 多媒体视觉影像呈现时 必须提供听觉说明 8 视讯中的声音必须提供同步文字型态的旁白 9 多媒体呈现时 必须同步产生相对应替代的语音或文字说明 10 当 ALT 属性的文字陈述大于 150 个英文字符时 考虑另外 提供文字叙述 图形替代文字陈述不够清晰时 提供更多的文字描述 如使用 longdesc 属性 其次 视力障碍人士可以使用读屏软件作为辅助工具来到网站 内容进行浏览 读屏软件是一种可以帮助盲人上网的工具 现在国 内有阳光读屏 永德读屏和晨光读屏 争渡读屏等软件 读屏软件是 专为盲人或视力有障碍的人设计的屏幕朗读软件 视障人士可通过 数字键盘的切换操作 以及大键盘上的几个功能键的切换 就能够 随心所欲地进行查找和处理文件 对网页进行导航浏览 编辑和收 发电子邮件 2 3 7 针对肢体残疾人的策略 无障碍网站建设过程当中应当为肢体残疾人考虑以下几点因素 同时也可以采用一些人性化辅助工具 以键盘取代鼠标操作 以利肢体残疾障碍人士操作网页 肢体障碍者部分因为只能做小区域的操作 而不能和移动中的 信息内容做互动操作 为了考虑相关人士使用网页的需求 网页开 发者应该小心使用这些时间敏感内容的操作设计 要确定浏览器所 提供的控制机制可让身心障碍人士处理这些信息 否则就应该考虑 提供这些数据对象或网页的替代方案 同时应当考虑肢体障碍 physical disabilities 人士使用网页信息 所必须考虑的种种因素 除此之外 考虑因素也应包括这些肢体障 碍人士所使用的特殊上网装置 特殊按钮 特殊键盘 点字输入装置 等 这些装置可能是使用各种不同的操作系统 或只具有基本的网 页浏览功能 2 4 国内国内优优秀无障碍网站秀无障碍网站对对比分析比分析 2 4 1 网页添加无障碍浏览辅助工具 1 纯文本通道 点击后进入纯文本模式网页 在纯文本网页中 将网页中的图像 等非文本内容转化成文本 并以线性化的显示方式从上到下显示 以 满足具有不同访问需求人群的需求 进入纯文本模式后还可以通过点 击 切换为可视化模式 按钮返回正常模式 2 文字大小控制按钮 文字大小控制按钮可以调整网页的字体大小 包括中等字体 大 型字体 超大字体 还原字体等功能 该按钮缺省状态为 中等字体 通过点击该按钮改变页面的字体大小和按钮状态 按钮状态改变顺序 为 中等字体 大型字体 超大字体 还原 中等 字体 3 高对比度显示 所谓高对比度是将当前页面网页的前景内容和背景的颜色对比调 到最大 为弱视用户能够清晰地访问网页内容提供了帮助 4 辅助线 辅助线是横竖两条红色的基准线 为视力障碍用户校队阅读的位 置提供了帮助 5 界面放大和缩小 网站浏览者可根据自己的需求自行调整网页界面的大小 界面放 大是将网站当前页面显示比例放大 界面放大后网页内容也会随之变 大 界面缩小 将网站当前页面显示比例缩小 界面缩小后网页内容 也会随之变小 6 无障碍强化导航功能 网站为方便盲人浏览 采用最先进的有含义的标记方式 为屏幕 阅读器软件读取网站内容提供了完备的支持 盲人朋友可以通过无障 碍强化导航功能 快速切换到目标位置 结合读屏软件浏览网站信息 7 无障碍快捷键设置 无障碍快捷键设置分为以下四类 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 及其它浏览器通用快捷键 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 关闭和开启工具条快捷键 IE6 及其它浏览器通用快捷键 Alt J b 纯文本模式开启快捷键 IE6 及其它浏览器通用快捷键 Alt Shift J d 可视化模式返回快捷键 IE6 及其它浏览器通用快捷键 Alt Ctrl J 纯文本模式开启 返回快捷键不依赖于工具条 的开启状态 返回无障碍操作说明顶部 语音验证码 a 播放语音验证密码的快捷键 Alt Q 当焦点移动到输入验证 码的文本框时 读屏软件会朗读 请按快捷键 Alt Q 播放语 音验证码 此时按 Alt Q 就会收听到语音验证码信息 2 4 2 语音无障碍网站 中国残疾人联合会语音网站 北京市朝阳区无障碍网站 江西省 信息产业厅无障碍化网站这三个网站采用了建设语音无障碍网站 专 栏 的形式让障碍人士实现无障碍访问 实现此类网站网站建设方采购语音阅读软件 以及事先录制各类 说明性语音 并结合网站快捷键进行无障碍访问 中国残疾人联合会 朝阳无障碍网站 江西省信息产业厅 2 4 3 无障碍浏览通道 专栏 1 上海市司法行政网无障碍浏览通道 专栏 上海市司法行政网既实现了通过全网站的无障碍工具条来访问网 站的所有网页 也实现了点击网站首页无障碍