网页设计无障碍方案研究

　　1  概述

　　近年来，笔者持续参与信息无障碍标准的起草和评审工作，以及众多网站的无障碍规划和测试。以上海市政府部门网站的无障碍改造为例，《“十二五”期间上海市残疾人事业主要发展指标》指出：政府网站实施无障碍改造的比例，预期性大于 80%.据上海市政府部门网站管理中心、有关承建单位的不完全统计，上海市共有 64 家政府部门网站纳入无障碍改造计划 （ 其中区县政府网站 17 家，委办局网站 47 家 ）。截至 2014 年 12 月，已实施无障碍改造的 54 家，正实施和待实施的网站 10 家，上海市政府 64 家网站实施无障碍改造比例已达 84.38%,这些网站的无障碍改造为相关标准的应用和完善提供了丰富的实践经验。

　　纵观国内外有关网页设计的无障碍标准，它们的一大共同点，就是强调无障碍网站的四项基本原则：（1） 网页内容必须是可感知的；（2） 网页内容中的界面组件必须是可操作的；（3） 网页内容和控件必须是可理解的；（4） 网页内容应具备足够兼容性和前瞻性，能够与当前及未来的用户代理（包括辅助技术）协同工作。

　　以上这些可简述为：“可感知、可操作、可理解、以及兼容性”,是每个设计人员应该遵循和掌握的基本原则。

　　2  网页设计无障碍方案的流程和要点

　　一个合格的、适合读屏软件操作、符合视力障碍用户需求的无障碍网站，它的一般设计流程可总结为：

　　（1） 检测分析：根据无障碍标准对改造前的网站进行检测及体验，分析、讨论、汇总存在的问题。这方面工作可采取智能化的测试平台和人工实际体验相结合的方式。

　　（2） 方案设计：根据存在问题结合网站信息无障碍改造的标准和目标，设计相应的无障碍解决方案。

　　（3） 实施开发：根据解决方案，遵循相关技术标准，利用信息无障碍技术进行实施开发工作。

　　（4） 测试体验：通过系统测试、人工测试、用户体验相结合的方式，全方位地保障改造成果。

　　（5） 运行维护：为保证无障碍的可持续性，对改造后的网站进行必要的运行维护，持续测试体验，反馈和修正可能出现的偏差。在具体改造设计过程中，依据目前颁布的无障碍设计标准，主要针对以下要点进行设计和开发：

　　（1） 针对网页不同布局形式提供统一的无障碍网页操作方法，避免由于操作不当引起问题。

　　（2） 针对内容页面进行单独设置，直接读正文内容。

　　（3） 对图形验证码提供语音提示功能，对图片等内容提供必要的文字说明。

　　（4） 避免在切换 Tab 键时产生焦点无法移动、导致键盘陷入的现象，同时注意打开网页时 Tab 键焦点的定位点和光标键的移动顺序。

　　（5） 提出快捷键实施方案，提供一整套热点跳转、区域跳转、栏目跳转等快捷键。并注意这些快捷键是否与已有的系统快捷键、读屏软件快捷键相冲突。

　　（6） 为功能性操作提供语音提示，提供有意义的可理解的提示性说明内容。

　　（7） 统一页面 “开启 / 关闭” 方式，避免焦点直接返回桌面。

　　（8） 为繁琐的非文本内容提供替代内容页面。

　　（9） 区分各网页标题，帮助读屏用户正确定位。

　　（10） 部署无障碍工具条，方便低视力和老年用户按需调节屏幕显示样式；提供纯文本模式浏览，提供语音插件。但必须注意不能仅以此来替代上述各项必要的无障碍设计。

　　页面改造则结合辅助功能以及无障碍检测工具的模式进行：

　　（1） 采用 DIV+CSS+JS 技术路线实现网站结构、表现、行为相分离的基本要求；对功能性内容、Flash 等进行无障碍设计，使其不依赖鼠标，即使用键盘也可完成正常操作，适合视力障碍人群浏览。

　　（2） 辅助工具条充分考虑不同布局、不同色觉环境下的颜色辨识度和文字放大率，设计开发功能完善的辅助浏览工具条，可集约化部署在某一中心门户网站上，供各部门网站共享。

　　（3） 采用先进的云平台技术理念，从功能、性能及安全性等要求进行架构设计，搭建网站语音服务（4） 无障碍检测根据 WCAG2.0 以及相关的国家标准和行业标准，设计开发无障碍检测网关，采用HTML 解析技术定位网页元素，通过与网站内容管理系统的整合对新增内容进行无障碍检测，确保信息发布无障碍的可持续性。

　　需要注意以下两点：

　　（1） 网站无障碍建设应满足全体人群在任何情况下都能平等、方便、无障碍地获取和利用信息。在保持网站原有风格和功能、不改变视力健全人士浏览网站和获取信息服务的基础上提升视障人群访问政府网站的便捷性、准确性。

　　（2） 实践证明，在网站的无障碍建设过程中，必须始终按照国际通用的 WCAG2.0 标准和规范以及相关的国家标准和行业标准，采用国际领先的无障碍建设方法进行，而不是简单的通过架设某一服务器端推送的语音系统或语音频道来代替全网站的无障碍设计和改造。

　　3  实现强化的无障碍语音导航和快捷键操作

　　设计一套优化的语音提示跳转链接，配合区域跳转、栏目跳转、热点或锚点跳转等快捷操作，帮助读屏软件用户快速准确地在众多的页面和栏目链接内定位。

　　为了充分说明语音导航和快捷键跳转的特点，可参见图 1 和图 2.其中图 1 为某区政府门户网站首页的部分屏幕截图，是我们平时所熟悉的网页样式。而图 2 是将该网页另存为文本文档 （*.txt） 后的屏幕截图。与原来的网页相比，在头部区域新出现了：“无障碍操作说明 跳转到网站导航区跳转到主要内容区域”等隐含的链接，这些通过语音提示获取的隐含链接，必须使用读屏软件方可朗读出来，视力障碍用户可以根据语音提示回车确认，快速跳转到需要的位置。

　　通常我们为读屏软件用户专门设计了一套统一的键盘快捷键操作方案，例如：

　　（1） 支持全键盘操作，无需依赖于鼠标。一般采用 Tab 键、光标键切换、回车键确认等，辅以读屏软件配置的朗读功能键实现网页的浏览和内容页的朗读。

　　（2） 栏目跳转，实现栏目分组间的跳转；一般采用 Ctrl + Z 键。

　　（3） 区域跳转，实现页面内各区块的跳转，主要包括：顶部导航区、左部导航区、中间内容区、主要内容区、底部内容区等区块； 一般采用组合键：Alt + Shift + 数字键 1,2,3,…， 等。

　　（4） 热点跳转快捷键，可分别快速定位到：跳转到无障碍操作说明页面、跳转到主菜单（网站导航）、跳转到主要内容区域、跳转到网站地图链接，等。

　　一般采用 Ctrl（ 或 Alt） + 数字键 1,2,3,…， 等。

　　4  网站无障碍改造的其他技术要点

　　网站无障碍改造的推进，除了上述各项技术要点外，还应该注重以下几点：

　　（1） 坚持以用户体验为核心，视障人群全程参与的原则。

　　引入体验员监督机制，通过组织招聘无障碍体验人员，在项目建设的前、中、后期以及整个运维过程中全程参与，以利于问题的发现和解决。

　　（2） 坚持可持续发展的原则。

　　网站信息无障碍建设是一个长期的系统工程，必须在整个过程中重视无障碍建设，坚持贯彻无障碍标准和规范。同时关注人员组织的可持续性，加强技术交流与培训，促使本地化技术力量不断成熟发展。

　　（3） 加强网站管理人员、技术开发人员的培训工作。

　　目前有关网站无障碍设计的国家标准和行业标准已经出台，一方面有必要在各地设立权威的测试网点，另一方面迫切需要对网站的从业人员进行标准化的培训，使得网站管理人员、技术开发人员充分了解视力障碍用户的需求、网站中存在的障碍现象，语音读屏软件的基本操作方法等，避免引入不切实际的改造方案。

　　5  与民生服务密切相关的网站无障碍改造

　　当前，政府部门网站、残联系统网站等率先垂范，取得了很好的经验和成果，但对于为数众多的其他服务部门网站和大众传媒网站等，无障碍改造的任务还很艰巨，这些与残障人士息息相关的服务部门网站还存在着大量的障碍。据了解，中国残疾人联合会等正在拟定相关的政策指导意见，希望各类网站的无障碍改造能继续深入展开。