网站改版上线前的无障碍 QA 检查清单

无障碍问题越早发现，修复成本越低。等到内容已经审批、重定向表已经锁定、开发只剩上线缺陷要处理时，每一个无障碍问题都会和时间表抢资源。低对比度按钮、缺失的焦点状态、含糊的链接文案、没有关联字段的错误提示、无人负责的图片 alt，通常都是这个阶段漏掉的。

这份清单适合 B2B 网站、服务型官网、Shopify 店铺和 WordPress 改版项目。它不是完整的 WCAG 审计，但能帮助团队做一次实用的上线前 QA：保护真实用户体验，也顺手发现经常藏在无障碍问题里的技术 SEO 风险。

不要只在设计稿里检查颜色对比度。要在已经开发出来的页面里看浅色模式、深色模式、hover、disabled、固定导航、Cookie 提示、卡片、标签、表单错误等状态。很多对比度问题不在主视觉，而在二级 UI 里。

网站改版尤其要注意品牌色。新的配色在提案里可能很高级，但放到小字号、辅助说明、描边按钮或图片遮罩上就不一定能读。如果某个品牌色不适合作为文字颜色，可以把它保留在背景、点缀或大面积图形上，不要用于关键文案。

• 检查正文、说明文字、元信息、表单标签、导航、CTA 和页脚链接。
• 用真实 CMS 内容测试图片和渐变上的文字，不要只用占位内容。
• 记录失败的颜色组合、页面 URL、组件名称和建议替换方案。

纯键盘测试能很快暴露网站是否真的可以不用鼠标操作。从每个关键模板顶部开始，用 Tab 依次经过导航、下拉菜单、按钮、卡片、筛选器、表单、弹窗、预约插件、Cookie 提示和页脚链接。焦点顺序应该符合视觉顺序，当前焦点也必须始终可见。

这对 B2B 网站尤其重要，因为转化路径经常藏在菜单、长服务页、资源筛选或联系表单后面。页面再好看，如果买家无法到达表单、关闭弹窗，或看不出焦点移动到哪里，转化路径就是断的。

• 确认每个可交互元素都能被键盘到达、触发和退出。
• 检查焦点是否被菜单、浮层、轮播或第三方插件困住。
• 测试跳转到主内容的链接，确保它落在主要内容附近，而不是另一个装饰区块。

标题结构既是无障碍工作，也是技术 SEO 工作。每个页面应该有一个明确的 H1，主要区块应该按逻辑使用 H2 和 H3，不要因为视觉样式随意跳级。屏幕阅读器、搜索引擎抓取和人工审稿都会受益于清晰的内容层级。

链接文案也要具体。反复出现的“了解更多”“点击这里”很弱，因为脱离上下文后看不出目的。服务页和案例页里的链接最好直接说明用户下一步会看到什么：价格页、项目案例、Shopify 审计、改版清单，还是联系入口。

• 每个页面保留一个 H1，并检查主要模板的 H2/H3 大纲。
• 在框架支持的地方检查 header、main、footer、nav 和 form 等语义区域。
• 把重复且含糊的链接文案改成脱离上下文也能看懂的目的说明。

表单是无障碍问题最容易变成线索损失的地方。测试必填项为空、邮箱格式错误、很长的姓名、带符号的公司名、多个国家的电话号码、复选框错误、垃圾信息拦截和成功提交。错误提示应该和字段有关联，容易找到，并且足够具体。

还要测试非视觉路径。表单字段应该有真实 label，而不是只靠 placeholder。必填状态应该清楚。提交按钮进入加载状态后也不应该让用户困惑。成功页或成功提示应该说明发生了什么，以及用户接下来会收到什么。

• 检查联系、订阅、资料下载、咨询、结账、账户和站内搜索表单。
• 验证错误状态、成功状态、加载状态、重复提交和反垃圾机制。
• 确认验证失败和提交成功后，分析事件仍然正常触发。

图片 alt 应该根据图片在当前页面里的作用来写。创始人头像、产品截图、案例数据图、Shopify 商品图和装饰背景，不应该都用同一种处理方式。有些图片需要描述性 alt，有些图片应该留空，有些信息则应该用正文解释，而不是只放在图里。

下载文件和嵌入内容也要检查。PDF、视频、iframe、地图、预约组件和商品媒体，常常会在生产后期带来新的无障碍缺口。如果某个嵌入组件对转化很关键，就应该像核心页面组件一样测试，而不是默认第三方已经处理好。

• 为有意义的图片写 alt，装饰图片在适当场景下留空。
• 检查视频或音频内容的字幕、转录稿、控制按钮和备用文案。
• 避免把关键信息只放在无法访问的 PDF 或截图里。

无障碍 QA 在桌面端通过，不代表移动端也通过。要在真实移动宽度下重新检查导航、固定按钮、折叠面板、筛选器、表单字段、Cookie 提示和表格。注意内容是否被隐藏、焦点是否跑出屏幕、点击区域是否变小，以及标题换行后是否难以理解。

然后测试 CMS 模型。让非开发成员编辑一个服务页、发布一篇博客、修改 CTA、上传图片、添加客户评价。如果 CMS 允许编辑者制造低对比度、缺失 alt、错误标题层级或过长按钮，那么网站只是上线当天暂时无障碍。

• 在手机、平板、笔记本和宽屏桌面上测试最重要的模板。
• 检查 CMS 字段是否有帮助说明、必填 alt、字符限制和合理默认值。
• 记录组件规则，避免后续活动页再次引入同样的问题。