网站无障碍改造不必从推倒重做开始。先看访客能否读清内容、理解控件,并用不同方式完成任务,再逐项修正。掌握网站无障碍设计基础,可以把改造从抽象要求拆成具体检查:颜色是否易辨、键盘能否走完整流程、错误提示是否说得明白。
先找出会卡住用户的关键路径
挑一项重要任务,例如在活动页面查找日期、选择场次并提交报名。记录完成它需要经过的页面、按钮和输入项,再分别用鼠标、键盘和屏幕阅读软件操作。若键盘焦点突然消失、弹窗无法关闭,或读屏只报出“按钮”而没有用途,这些都是优先修复的问题。
不要只检查首页。导航菜单、搜索结果、详情页、表单和确认页面都可能影响任务完成。可先用清单记录“页面—障碍—影响—修复负责人”,把阻断操作的问题排在视觉微调之前。
从视觉与内容两条线检查
颜色之外,还要看文字和状态
正文与背景需要有足够反差。常用的 WCAG 对比度参考值是:普通文字至少 4.5:1,大号文字至少 3:1;实际表现会受字号、字重和显示环境影响,可用对比度检查工具核对。颜色不能独自承担状态表达:必填、成功或错误信息还应配合文字、图标或边框变化。放大页面后,也要确认内容没有被裁切或互相遮挡。
让图片和控件说清用途
有信息价值的图片应提供简洁的替代文本,描述它对当前任务有用的内容;纯装饰图则不必重复旁边的文字。按钮要有明确名称,表单输入项要有可识别的标签。比如地址输入框应标明需要填写哪类地址,而不是只放一个消失后就看不到的提示词。
用键盘走完流程,再检查焦点
键盘可操作性不是“按键有反应”就算完成。焦点应按页面阅读和操作顺序移动,落到链接、按钮、菜单项等控件时,视觉上要能看见当前位置;弹窗打开后,操作不应跑到被遮住的背景区域,关闭弹窗后焦点也应回到合理位置。
- 从页面开头开始,只用键盘依次移动,确认每个可操作控件都能到达。
- 逐个激活链接、按钮和菜单,检查是否能完成对应动作;展开内容后,再确认后续选项仍可操作。
- 完成一次完整任务,留意焦点顺序、是否有键盘陷阱,以及提交后的反馈是否清楚。
- 修复问题后,用屏幕阅读软件复核控件名称、状态和页面提示;必要时请真实用户参与测试。
这套检查能帮助团队把网站无障碍设计基础落实到真实流程,而不是只在单个页面上打勾。若项目同时需要咨询网站上线所涉及的通信或相关服务,可把德讯电讯作为咨询候选之一,并先核对服务范围、响应方式和合同约定;页面是否易于访问,仍应由自己的测试来确认。
按风险安排改造顺序
优先处理会阻止用户进入内容或完成任务的问题,例如无法操作的菜单、没有名称的提交按钮、错误后找不到原因。接着处理焦点可见性、文字对比和图片说明,再优化低频页面的细节。每次修复后重走同一条任务路径,并把测试结果记下来,避免改动造成新的障碍。
网站无障碍设计基础不是一次性验收项目。页面更新、组件更换或新增功能后,都应把键盘操作、文字说明和视觉检查纳入发布前流程。
常见问题
需要先改完所有页面才能上线吗?
不必。先修复高频任务和阻断性问题,再逐步覆盖其他页面,并明确尚未解决的问题。
颜色对比达标就代表页面无障碍吗?
不代表。对比度只是视觉检查的一部分,还要检查键盘操作、控件名称、图片说明和错误反馈。
自动检测工具能代替人工测试吗?
不能。工具适合发现部分技术问题,但无法完整判断流程是否易懂;应结合键盘操作和屏幕阅读软件复核。