网站无障碍（WCAG）：B2B 官网的可执行改造范围
一、谁会真的来查你：法规与适用边界
先划边界：数据合规讲的是 cookie 与个人数据怎么处理，速度审计讲加载性能，本篇只讲一件事——站点的内容与交互能不能被所有人，包括使用辅助技术的人，正常读取和操作。
B2B 企业关心无障碍，通常不是因为”有视障客户”，而是三件更实际的事：法规、采购与可用性。谁会真的来查，一张表说清。
| 触发来源 | 适用对象 | 具体要求 | 时间线 |
|---|---|---|---|
| 欧盟无障碍法案 EAA（2019/882） | 在欧盟销售的电子商务及相关服务 | 参照 EN 301 549，其技术核心即 WCAG 2.1 AA | 2025 年 6 月 28 日起新服务须合规 |
| 欧盟公共采购指令（2014/24/EU） | 参与欧盟公共项目的供应商 | 技术规格引用 EN 301 549，无障碍进入评标 | 已生效多年 |
| 美国联邦采购（Section 508） | 向美国联邦机构供货的厂商 | 要求提供 VPAT/ACR 符合性报告 | 常设要求 |
| 大企业供应商准入问卷 | 各行业头部买家的合格供应商名录 | 问卷常含”是否符合 WCAG 2.1 AA”一栏 | 随采购周期出现 |
版本口径也一并定死：WCAG 2.2 于 2023 年 10 月发布，在 2.1 基础上新增了焦点外观、目标尺寸等九条成功标准，而 EN 301 549 当前引用的仍是 2.1 AA。采购与合同里写”WCAG 2.1 AA”或”2.2 AA”都成立，两者 90% 以上的改造项重合。判断要不要做的方法很简单：看客户画像。做欧盟市场、参与公共采购、或给大企业做一级供应商的，无障碍是要交卷的题；都不占的，优先级可以放低，但最小集仍然要做，见第七节。
二、四层原则：问题长什么样
WCAG 把所有要求归在四个原则之下。对照到 B2B 官网，常见问题高度集中。
| 原则 | 含义 | B2B 站最常见的表现 |
|---|---|---|
| 可感知 | 信息能被看到或听到 | 产品图无 alt、浅灰正文对比度不足、视频无字幕 |
| 可操作 | 全部功能键盘能用 | 下拉菜单只能悬停触发、弹窗关不掉、焦点看不见 |
| 可理解 | 内容与操作可预期 | 表单无 label、报错只说”提交失败”、页面语言未声明 |
| 健壮 | 能被辅助技术正确解析 | div 冒充按钮、标题层级从 h2 直接跳到 h5 |
举一个实际场景：海外采购经理让同事在电话里核对参数，同事用屏幕阅读器读你的产品页，遇到无 alt 的参数图直接跳过——这一页对他就等于不存在。这类问题里，图片缺失、对比度不足工具能扫出来，但”alt 写得对不对、Tab 顺序合不合理”工具判不了，这正是后面验收要分三层的原因。
三、P0 必改五项：模板级就能修完
B2B 站无障碍改造的第一优先级只有五项，全部是 P0。
| 项目 | 判定标准 | 常见错法 |
|---|---|---|
| 表单 label 与错误提示 | 每个输入框有可见 label；错误提示是文本且与字段关联；不只靠颜色标错 | placeholder 冒充 label；报错只在弹窗里说一次 |
| 颜色对比 | 正文对比度 ≥4.5:1；大字与界面控件 ≥3:1 | 浅灰 #999 压白底，实测约 2.8:1 |
| 键盘可操作 | 全部功能 Tab 可达、顺序合理、焦点可见、无键盘陷阱 | 悬停菜单键盘打不开；弹窗打开后焦点仍留在页面后方 |
| 图片 alt | 有信息的图给文字替代；纯装饰图 alt 置空 | 全站图片无 alt；或写成 img_0342.jpg 这类文件名 |
| 语言声明 | html 的 lang 属性逐语言设置正确 | 中英混排站全站统一声明为 en |
对比度的具体阈值单独列出来，设计改稿时直接对照。
| 内容类型 | AA 下限 | 常见不达标场景 |
|---|---|---|
| 正文文本（小于 24px） | 4.5:1 | 灰底白字、半透明水印字 |
| 大标题（≥24px 或 ≥18.5px 粗体） | 3:1 | 品牌浅色字压浅色底 |
| 按钮边框与图标 | 3:1 | 浅色描边按钮 |
| 禁用态控件 | 无强制要求 | 可保留浅色，但别用在关键操作上 |
P0 五项里，除表单外的四项都是模板级改动——改一次主题，全站生效，这就是 B2B 站无障碍成本可控的根本原因。表单项与询盘能不能收上来直接相关，改 label 和报错的同时建议把表单可靠性里的投递检查一起过一遍，一次改动解决两类问题。
四、P1 与 P2：建议改与锦上添花
P0 之外再分两档，避免”要么全做要么不做”的两个极端。
| 档位 | 项目 | 判定标准 | 建议时机 |
|---|---|---|---|
| P1 | 焦点样式 | 焦点框可见且对比度 ≥3:1，禁止全局 outline:none | 改主题时顺手做 |
| P1 | 跳转链接 | 页面第一个 Tab 落点是”跳到主内容” | 长页面与多级导航站 |
| P1 | 标题层级 | h1 唯一、不跳级 | 与 SEO 语义化是同一件事 |
| P1 | 链接文本 | 脱离上下文能读懂去向 | 避免”点击这里”满天飞 |
| P2 | 目标尺寸 | 可点区域 ≥24×24 像素（WCAG 2.2 新增） | 移动端改造时 |
| P2 | 动效减弱 | 响应系统的 prefers-reduced-motion 设置 | 有轮播与动画的站 |
| P2 | ARIA 细节 | 手风琴、标签页等组件补足状态标记 | 换组件库时一并处理 |
P1 全站做完约 10–15 小时，多数项目和主题改版合并推进，不单独立项。P2 的判断标准更直接：除非恰好有对应的组件改造窗口，否则不为它专门开工——无障碍改造最忌讳的就是把 P2 的细节当成主体工程，投入产出完全不成比例。
五、三个常见误区
| 误区 | 为什么错 | 正确做法 |
|---|---|---|
| 加了 ARIA 就算无障碍 | ARIA 是对原生语义不足的补救，不是替代；标错的 ARIA 比没有更糟 | 优先用原生 button、label、nav 等元素 |
| 用 div 加点击事件做按钮 | 键盘无法触发，读屏软件不把它识别为按钮 | 换成 button 元素，样式照旧 |
| 自动工具跑满分就交差 | 工具只覆盖约 30–40% 的问题 | 补键盘走查与读屏抽查再下结论 |
三个误区的共同点是都想抄近路。ARIA 规范自己写着”第一条规则：不要用 ARIA”——能用原生元素解决的不要叠属性。div 按钮在 B2B 模板里极常见，尤其是卡片整块可点的场景，正确做法是内部放一个真按钮。至于工具满分，它只能说明没有低级错误：alt 是否恰当、Tab 顺序是否符合阅读逻辑、报错文案人能不能读懂，这些判断机器做不了，必须人来走一遍。
六、验收怎么做：自动扫描、键盘走查、读屏抽查
验收分三层，缺一层结论都不可靠。
| 层 | 工具与方法 | 能发现的问题占比 | 耗时参考 |
|---|---|---|---|
| 自动扫描 | axe、WAVE、Lighthouse 逐页跑 | 约 30–40% | 全站 1 小时以内 |
| 键盘走查 | 收起鼠标，用 Tab、Enter、Esc 走完询盘全流程 | 交互类问题的主要手段 | 5–8 个页面约 1–2 小时 |
| 读屏抽查 | NVDA（Windows）或 VoiceOver（macOS）走一段表单流程 | 语义与提示类问题 | 约 1 小时 |
抽哪几页有讲究：首页、一个产品详情页、询盘或联系表单页、一个内容页——这四类覆盖了 B2B 站 80% 以上的交互场景，超出这个范围逐页扫描即可，不必逐页走查。验收记录要存档：供应商准入问卷要 VPAT 时，把记录改写成符合性说明就能直接交。主题与模板层面的改造如果团队没有人手，可以联系我们按站点现状评估。
七、成本工时、与 SEO 的重叠、什么时候不做
工时先给量级，再给判断。
| 工作项 | 工时量级 | 说明 |
|---|---|---|
| 模板级修完 P0 | 8–20 小时 | 取决于模板数量与定制程度 |
| 逐页修 P0 | 约为模板级的 2 倍 | 定制落地页多时出现 |
| P1 全站 | 10–15 小时 | 多数与主题改版合并做 |
| 三层验收 | 3–5 小时 | 含记录整理与符合性说明撰写 |
无障碍与 SEO 的重叠比想象中大，多数项目一鱼两吃。
| 无障碍改造项 | 对 SEO 的直接影响 |
|---|---|
| 语义化标题层级 | 与站内结构优化是同一件事 |
| 图片 alt | 图片搜索与可访问性共用 |
| 可读链接文本 | 锚文本质量本身是排名信号 |
| 页面语言声明 | 帮助多语言区域判定 |
| 移动端目标尺寸 | 与移动可用性一致 |
什么时候不做也要说清：内部工具站（用户可控、可培训）、没有欧盟与公共采购客户且从未被采购问卷问到的纯国内站，可以只做最小集三件——表单有 label 与文本报错、正文对比度达标、信息图有 alt，合计半天以内。改造与站点重构同步推进时，注意别和结构化数据部署、性能优化相互覆盖，结构化数据与速度各有单独篇章，建议排成先后批次而不是混在一起改。
FAQ 常见问题
写在最后
无障碍不是公益装饰，而是采购链路上的合规文件加可用性兜底。B2B 站的正确姿势是分档执行：P0 五项模板级修完，三层验收留档，P1 合并进改版，P2 不单独立项。多数站点两周以内能拿到一份能写进供应商问卷的符合性说明，这个投入对得起它在采购环节里出现的那一分钟。
记住一句判断就够了：先修模板再谈页面，先走键盘再信扫描。