网页无障碍：区分专业者与业余者的细节

一个部分访客无法使用的网站

想象你交付了一家店，而它的门窄到有五分之一的顾客进不来。一个不具无障碍性的网站，做的正是这件事：低视力者、色盲者、用键盘操作的人、使用屏幕阅读器的人，或只是大太阳下看手机的人——他们都会撞上那些开发者若不测试便看不见的屏障。

无障碍（a11y）不是最后才叠加上去的一层。它是一种从第一行代码就开始的构建方式。

我会系统检查的东西

这些并非奇特的边缘情况，而是我在每个项目中都践行的基本功：

• 对比度 — 文本必须从背景中凸显出来（正文最低 4.5:1）。那种「优雅」的浅灰配白，往往根本读不清。
• 键盘导航 — 一切可点击之处都必须能用 Tab 键抵达，且焦点可见。许多网站「为了设计」去掉焦点轮廓：这是个错误。
• 替代文本 — 每一张有含义的图片都带描述性 alt；装饰性图片则标注为装饰。
• 语义结构 — 只有一个 <h1>、合乎逻辑的标题层级、以及屏幕阅读器会播报的地标（nav、main、footer）。
• 触摸目标 — 在手机上，太小的按钮就是会被按错的按钮。

无障碍并不束缚设计，而是规训设计。对比度与焦点的要求，几乎总能为所有人带来更清晰的界面。

与 SEO 的直接关联

许多人忽视的一点：Google 读取一个页面的方式，就像屏幕阅读器一样。干净的语义结构、贴切的 alt、明确的链接——这些正是同时服务于无障碍与排名的信号。让一个网站变得无障碍，几乎必然地也让它更易被发现。

于是一个无障碍网站一举勾选三项：更多用户、更好的 SEO、更低的法律风险（在越来越多的国家，无障碍正成为法律义务）。

零 WCAG 违规不等于「真的可用」

自动化工具（Lighthouse、axe）能抓到一部分问题——对比度、缺失的 alt、损坏的 ARIA 角色。但满分 100 并不能保证一个真人能应付得来。有些东西只能手动测试：

• 只用键盘、不用鼠标，走完整个页面。
• 用屏幕阅读器（VoiceOver、NVDA）去听。
• 检查是否有任何内容仅凭颜色才能被理解。

正是这最后一行——真人测试——业余者会跳过，而专业者永不遗忘。

我的立场

我不会把「无障碍」当作高价附加项来收费。它本就是交付一个像样网站应有之义，正如网站理应能在手机上显示。一份把部分访客拒之门外的交付物，并未完成——它是残缺的。而这项在三十秒演示里看不见的要求，恰恰区分了能长久的作品与用完即弃的网站。