索赔函是机器人写的
谈无障碍,通常都从访客那一侧讲起:一位盲人没能把订单下完。这一回我们换一条线索——钱,以及机器。当查一个网站不再需要人力之后,索赔这门生意的账算法变了;而商家最爱用的那个应对办法,恰恰让自己站得更不稳。
店面是怎么变成公共场所的
几十年里,美国那部残障人士权利法案的第三章都被照字面理解:门口的坡道、盲文牌子、改造过的卫生间。说的全是建筑。转折发生在联邦法院把一个做生意的网站,摆到了公共设施场所旁边。
由此推出的结论既简单又硬:只要这个站点卖东西、接受预订,或者只是把信息交给广泛的受众,它就欠视力、听力、运动机能和认知功能受限的人一份可达。这份义务并非源自一部新法条,而是源自对旧法条的读法,并且一下子落到了所有早就在网上的人头上。
流水线是从一处不对称里长出来的
接着起作用的,是查验成本上的落差。挑街角那家店的毛病,得有个人去:跑一趟、进门、量一量、记下来。挑一个网站的毛病,除了一台永不合眼的机器,什么都不需要。靠批量诉讼吃饭的律所,比谁都先看明白这一点。
后果是可以量的:近些年,与站点无法访问有关的第三章索赔,涨幅超过了三成的十倍。几乎无人幸免——零售、住宿、金融、医疗,还有规模不大的本地经营者。而最先响的警报,很少是顾客的抱怨,多半是一封正式的诉前函件,要求付钱,数目通常落在一万到五万美元之间,备选方案则是去联邦法院打一场。
爬虫真正找的是什么
机器人不评判好不好用。它查四样东西,每一样都摆在标记里。头一样,图片没有替代描述:缺了那段文字属性,屏幕阅读软件就没法告诉看不见的人,画面上到底是什么。第二样,输入框身上没有绑定标签——搜索条、联系表单、邮件订阅栏,都算在内。
第三样是算出来的:规范要求正文与背景之间的对比至少达到四点五比一,样式表要靠计算来核。第四样是键盘:运动机能受限的人靠制表键和回车在页面上走动,若菜单这样打不开、订单这样确认不了,那就谈不上符合。这四样都出自那份国际指南,WCAG 的 2.1 版,AA 这一级。
再往后就没律师什么事了。软件把域名持有人的登记信息扒下来,塞进事先备好的投诉模板,把要求打印出来。一家所一周能出几百封,而多出一封的成本近乎为零。
轮椅图标成了识别记号
收到函件之后,店主想找一条快捷出路,而这条出路以第三方脚本插件的样子出现,通常就是屏幕角落上那个小圆圈。承诺听着无懈可击:贴一行代码进去,人工智能便让整个站点合规到底。
从技术上说,那是化妆而非修理。底下的 HTML 与 CSS 原封不动;那层附加物住在访客的浏览器里,试图在页面加载时临时改写文档对象模型。表层能应付简单的,碰上复杂的就散架:会动的菜单、弹出的窗口、结算用的购物车,在辅助软件眼里依旧是一团模糊。
更糟的是,它妨碍的恰是当初为之购置的那些人。看不见的人并不靠贴在站点上的面板浏览,他们用的是按自己习惯调好的本地软件——JAWS、NVDA、VoiceOver。挂件常与之相撞,把键盘的控制权抢走,所以许多这样的面板干脆被关掉甚至屏蔽。
为什么这块补丁反而招来诉讼
最要命的悖论在法律那头。挂件在页面源码里一眼可辨,原告方的扫描器正是冲着这类站点调校的。对提起索赔的一方而言,这是现成的论据:持有人明知有问题,却挑了一层廉价的覆盖物,而不是把它修好。美国已有众多法院认定挂件不足以达标,装着它的公司输掉的案子数以百计。
附带的损失还要另算。沉重的第三方脚本拖慢页面,把 Core Web Vitals 的成绩弄坏,于是对搜索结果的影响往好里说是中性的,往坏里说是负面的。
一次分四层的修理
文中给出的另一条路,是 AIfa Works 工作室的 AIfa Shield 套件,它的做法反着来:动的是源码本身。第一层是有意义的标记。面目不清的容器让位给那些自己就说明用途的标签——页首、导航、主区、区块、页脚。标题排成从一级到六级的严整阶梯。按钮就用按钮,链接就用链接,键盘焦点于是默认开始工作,一行为它兜底的代码都不必写。
第二层是给没有标准对应物的元素配上 ARIA。用途靠标签以及与描述之间的绑定念出来,可折叠列表的状态被明示为展开还是收起,纯装饰的图标则从朗读里藏起来,免得听的人被废话磨完耐心。
第三层是脱开鼠标也能操作。焦点按讲得通的次序走动,最上方放一条通往主要内容的跳转,免得每页都要把菜单听一遍;当前元素高亮得清楚而分明;弹出的窗口,总留一个用退出键离开的口子。凡是键盘进得去出不来的陷阱,都不该存在。
第四层是颜色。所有文字元素的对比度重新算过,按规范要求调到位:正文四点五比一,大号标题三比一。这照顾的不只是失明,也包括视力微弱和辨色异常的人。
一次本该失败的构建
无障碍容易做到,也同样容易在下一次发版里丢掉。所以文中讲的不是一次改动,而是两台常设的机器。Next.js 14 的服务端渲染把成形的语义标记直接交出去,屏幕阅读软件和搜索爬虫都一样立刻拿到;谁也不必等浏览器把页面拼起来。
第二台更要紧。自动检查被嵌进构建流水线:一旦查出无障碍上的错,构建就此中断,这段代码到不了生产服务器。这样一来,无障碍便从承诺那一栏挪进了发布条件里。而且与只会加重量的覆盖层不同,把代码清干净是在减重量,这一点在加载耗时和 Lighthouse 的分数上都看得见。
除了律师,还有谁获益
这笔开销换回来的,不止是原告那边的安静。全球约有一成半的人口带着某种健康上的限制生活——这不是一句慈善式的脚注,而是一块市场,而无法访问的站点会把它机械地切掉。
第二重效果是技术上的。搜索爬虫读一个页面的方式,与屏幕阅读软件相当接近:看语义标记、看图片的替代描述、看标题的层次。对一方清楚的,对另一方也清楚。第三重是声誉上的,同样算数:对可达的用心从外面看得见,它替信任做功。
承诺到哪里为止
此处不能把文章自己作出的那句保留跳过去。在覆盖层与原生修复的对照里,后者的法律保护被评为高,同时附有一句直白的限定:原生的可达降低被诉的风险,而不是把它彻底消除。文中对工作室的描述是致力于达到 AA 这一级,宣称的结果则是法律风险显著下降。
这个措辞是准确的,值得原样记住。合规是代码的一种状态,不是一纸赦免:谁都可以随时提告。区别在于拿什么去应答。装着挂件的站点,只能拿那个已被法庭认定为不足的挂件去应答;而把标记改好的站点,拿出来的是一份构建记录,其中每一次检查都发生在上线之前。
短的那一版
索赔的账法变了,比站点变得更早。查验对查验者而言成了免费,修补对持有人而言依旧要钱,整个快捷覆盖层的市场就长在这道缝里。覆盖层安抚了焦虑,却没安顿好标记,顺带还把这个站点标成了一个顺手的靶子。
扛得住压力的答案只有一个,而且乏味:有意义的标签、给非标准元素配上说明、能用的键盘、老实的对比度,再加一道有权把构建掀翻的自动检查。
原文出处
全文读完约需十分钟:覆盖层与原生修复在五项参数上的对照表、ARIA 属性的完整清单,以及把无障碍嵌入 Next.js 14 架构的那一节。