独立站无障碍WCAG：对比度、键盘导航、屏幕阅读器的改造清单
一、为什么 B2B 独立站也要做无障碍
很多人以为无障碍是给残障用户做的慈善项目，和一个卖设备、做询盘的 B2B 站没关系。这个判断只对了一半。真实动力有三个：欧美大客户的供应商问卷里，”网站是否符合 WCAG”已经是固定一题；美国部分州和欧盟采购对政府及公共采购合同有可访问性要求；更实际的是，语义化的 HTML 对搜索引擎和 AI 爬虫同样友好。
反直觉的判断在这里：无障碍改造不是额外成本，它和你想做的 SEO、结构化数据、AI 引用是同一份代码。把 div 按钮换成真正的 button、给图片加 alt、把字号层级理顺——这些事对屏幕阅读器是刚需，对 Google 和大模型理解页面结构同样是加分项。相关范围界定，可看网站无障碍（WCAG）里哪些必须做、哪些可以先放。
| 改造类别 | WCAG 2.2 AA 硬指标 | 常见错误现状 | 修复成本 |
|---|---|---|---|
| 文本对比度 | 正文 ≥ 4.5:1，大字 ≥ 3:1 | 浅灰字配白底，约 2.5:1 | 半天 |
| 键盘焦点 | 所有交互元素可 Tab 到达且焦点可见 | outline:none 去掉了焦点环 | 一天 |
| 图片 alt | 信息图有描述性 alt，装饰图留空 | alt 全是”image”或为空 | 两天 |
| 标题层级 | h1→h2→h3 不跳级 | 直接从 h2 跳到 h4 | 半天 |
| 表单标签 | 每个输入框有可见 label | 只有 placeholder 当标签 | 一天 |
二、第一件事：把对比度调到 4.5:1
对比度是最容易量化、也最容易自测的一项。规则很简单：18 磅（约 24 像素）以上的大字，或者 14 磅（约 18.66 像素）加粗的字，要求 3:1；其余正文、小字、按钮文字，要求 4.5:1。灰色小字配浅色背景是独立站最常见的翻车点，设计师为了”高级感”把正文调成 #888 放在 #f5f5f5 上，实际对比度只有 2 点几比一。
自测不用买工具，浏览器装个 axe 或者 WAVE 插件，一键扫描就会标出所有对比度不达标的元素。修的时候不要整体改设计，只把不达标的那几处颜色加深：正文从 #888 提到 #555 通常就能过 4.5:1，代价几乎为零。这和性能优化里先抓低 hanging fruit 是一个思路，见Core Web Vitals里按收益排序的做法。
| 元素类型 | AA 对比度要求 | 判断方法 | 常见修法 |
|---|---|---|---|
| 正文小字 | ≥ 4.5:1 | axe/WAVE 自动标注 | 文字色加深一档 |
| 大字标题 | ≥ 3:1 | 同上 | 通常已达标 |
| 按钮文字 | ≥ 4.5:1 | 连同底色一起测 | 加深按钮文字或底色 |
| UI 边框/图标 | ≥ 3:1 | 与相邻背景对比 | 边框色加深 |
| 禁用状态文字 | 可豁免 | 确认是真禁用 | 不必强改 |
三、第二件事：关掉鼠标，用键盘把全站走一遍
键盘导航的验收方法只有一个：拔掉鼠标，纯用 Tab、Shift+Tab、Enter、Esc，把首页、产品列表、产品详情、联系表单这四个页面从头到尾走一遍。你会立刻发现三类问题：焦点环被 CSS 用 outline: none 干掉了，根本看不到自己在哪；下拉菜单用纯 JS 写的，键盘进不去；弹窗打开后焦点被困在里面出不来，这叫键盘陷阱。
场景一：一个用 div 写的”假按钮”。设计师图省事用 div 加点击事件，键盘用户 Tab 不到、回车也触发不了。修法不是补 JS，而是直接换成原生 button，它天然支持键盘，还自带可访问名。场景二：焦点环看不见。很多全局样式里写了 *:focus { outline: none }，把浏览器默认焦点线删了。正确做法是保留一个清晰的焦点样式，比如 2px 蓝色外描边，而不是彻底删除。语义化和结构化数据怎么配合，见结构化数据Schema。
| 键盘走查项 | 合格标准 | 不合格表现 | 修复方式 |
|---|---|---|---|
| Tab 顺序 | 与视觉阅读顺序一致 | 乱跳、跳不到按钮 | 调整 DOM 顺序或 tabindex |
| 焦点可见 | 当前焦点元素有清晰描边 | outline 被删，看不见 | 加 :focus-visible 样式 |
| 下拉菜单 | 方向键可展开选择 | 只能鼠标点 | 改用原生 select 或加键盘支持 |
| 弹窗 | 焦点进入弹窗，Esc 关闭 | 焦点被困住出不去 | 实现焦点圈 trap 与释放 |
| 跳转链接 | 长页面有”跳到主内容” | 每次从导航 Tab 几十次 | 加 skip to content 链接 |
四、第三件事：让屏幕阅读器读得懂
屏幕阅读器用户听到的是 HTML 的”语义骨架”，不是你眼睛看到的设计。三件事决定骨架好不好：alt 文本、标题层级、ARIA 标签。alt 不是”给图起个文件名”，而是用一句话说清这张图传达的信息；装饰性分隔图则要写 alt=””，让读屏器直接跳过，不要把”按钮”两个字念出来。
标题层级是另一个重灾区。很多页面为了让某个标题显示成大字号，直接用 h4 甚至 p 标签套 CSS，结果读屏器从 h2 直接听到 h4，用户完全摸不清文档结构。规则是机械的：一个页面一个 h1，下面 h2 平级，小节用 h3，不许跳级。图标按钮（比如放大镜、汉堡菜单）没有文字，必须加 aria-label，否则读屏器只念”按钮”两个字，用户不知道点了干嘛。文案层面哪些表述对海外买家友好，见官网文案语气规范。
| 检查项 | 正确做法 | 常见错误 | 工具验证 |
|---|---|---|---|
| 信息图 alt | 描述图中关键结论 | alt=”产品图”，无信息 | 读屏器实际听 |
| 装饰图 alt | alt=”” 留空 | 念出无意义的文件名 | 听是否被跳过 |
| 标题层级 | h1>h2>h3 逐级 | h2 直接到 h4 | axe 标跳级 |
| 图标按钮 | 加 aria-label=”搜索” | 只读”按钮” | NVDA/VoiceOver |
| 表格 | 表头 th 标记 | 全部用 td 拼 | 读行是否念出表头 |
五、验收：自动化扫完，手动补刀
最后一个认知误区是”axe 插件扫绿了就等于合规”。自动化工具大约只能覆盖 30% 至 40% 的无障碍问题——对比度、缺失 alt、标题跳级这些机械错误它能抓，但键盘陷阱、焦点顺序、读屏器实际体验，它全都测不出来。完整验收必须三件套：axe 自动扫一遍、键盘纯手动走四个关键页、用 NVDA（Windows）或 VoiceOver（Mac）把首页听一遍。
优先级上，先做”不影响设计、纯修代码”的项：对比度、标题层级、alt、焦点环，这些不需要设计介入，开发自己两天就能改完。涉及交互重写的项（自定义下拉、弹窗焦点管理）放第二批，工作量大但数量少。目标定在 WCAG 2.2 AA，不要去追 AAA——AAA 要求正文对比度 7:1，在实际设计里往往要牺牲视觉，投入产出不划算。
| 验收方式 | 能发现的问题 | 覆盖比例 | 频率 |
|---|---|---|---|
| axe/WAVE 自动扫 | 对比度、缺 alt、标题跳级 | 约 30% 至 40% | 每次上线前 |
| 键盘手动走查 | 焦点顺序、键盘陷阱 | 自动化测不出 | 每月一次 |
| NVDA/VoiceOver 试听 | 读屏体验、aria 命名 | 自动化测不出 | 每季度一次 |
| 真实用户反馈 | 实际使用中的卡点 | 最准但最慢 | 持续收集 |
FAQ 常见问题
WCAG 2.1、2.2、AA、AAA 到底选哪个？
我们的站不大，无障碍改造要投入多少天？
axe 插件扫出来全绿，是不是就达标了？
图片的 alt 到底写多长、写什么？
我们用的是现成主题，有必要自己改无障碍吗？
无障碍和 SEO 冲突吗，会不会要我放弃设计？
写在最后
无障碍改造最容易被做成”为了合规而合规”的面子工程，扫个插件、截几张图放进交付文档就完事。真正有用的做法是把它拆成三天可完成的 P0 清单：先把对比度和标题层级理顺，再把键盘焦点走通，最后把 alt 和 aria 补齐。这套动作做完，你的站对屏幕阅读器可用了，对搜索引擎和 AI 爬虫也更好懂了。
落地三步：第一，装 axe 扫全站，把对比度、缺 alt、标题跳级列成一张表；第二，拔掉鼠标用 Tab 走首页、产品页、表单页，记录所有焦点卡住的地方；第三，每个月发布前自动扫一次，每季度用读屏器完整听一遍首页。多语言站还要注意 alt 和标题的翻译完整性，见多语言站的图表处理。
一句可以记住的话：无障碍不是给特殊人群做的补丁，而是把网页写成人话——读屏器听得懂，搜索引擎才读得懂，AI 才引得到你。