无障碍设计：从第一行代码起的尊重

文章配图，仅供参考

　　后来拉了设计、后端、测试开了三小时会。设计说“我们原型里明明标了label”，结果切图时为了“视觉统一”全给删了；后端说“接口又没报错，前端自己处理”，可问题是前端连正确的DOM结构都没拿到啊！最绝的是测试，说“我们只测了明眼人流程”——那会儿外卖塑料袋在旁边哗啦哗啦响，我听着都替他们臊得慌。你说这算啥？优胜劣汰啊！现在用户选择多了，你产品连基础的无障碍都做不到，人家转头就用竞品去了，市场可不惯着你。

　　可这事儿最气人的不是技术问题，是态度。我干数据录入15年，最清楚“基础”有多重要——你录入数据漏个字段，后面分析全错；代码里漏个label，人家用屏幕阅读器的用户直接卡死。就像上周我电脑开了三十来个标签页，浏览器卡得要死，结果发现是某个页面的JS无限循环，把CPU吃满了。这跟无障碍设计有啥关系？关系大了！都是基础没打牢，后面全是坑。而那些说“无障碍是小众需求”的，要么是没吃过亏，要么是还没被市场教育够。

　　我原以为现在前端框架都内置了无障碍属性，结果一查文档——好家伙，React的`aria-`属性得手动传，Vue的`v-model`默认不关联label，就连最新的SolidJS，文档里关于无障碍的例子都少得可怜。你说这怪谁？框架作者？产品经理？还是我们这些写代码的？我记得去年有个项目，后端死活不肯给表单字段加`id`，说“影响性能”，结果前端为了兼容，用`data-`属性模拟，最后屏幕阅读器还是读不出来。那会儿联调时，测试在旁边开外放会议，吵得我头都大了，最后还是我偷偷改了后端接口，把`id`塞进去才解决问题。

　　说到这儿，我想起个真事儿。2024年双十一，某大厂的购物车页面因为没给“删除”按钮加`aria-label`，导致盲人用户误删商品，直接上了热搜。后来他们紧急发版，结果因为缓存没刷，部分用户还是看不到更新，又被骂了一波。你说这损失多大？而要是在第一行代码就考虑无障碍，至于这样吗？就像我录入数据，要是第一次就核对清楚，后面哪需要返工？可现实是，大家总想着“先跑起来再优化”，结果优化着优化着，项目都黄了。

　　不过话说回来，无障碍设计也不是完全没好处。我上次给一个政府项目做无障碍适配，结果发现他们的表单设计特别乱——有的字段用``，有的用``，还有的直接嵌了iframe。我花了两天时间统一了DOM结构，加了所有必要的`aria-`属性，结果不仅通过了无障碍检测，连表单的提交成功率都提高了15%——因为之前明眼人用户也经常填错字段，现在屏幕阅读器会实时提示，大家反而更仔细了。这事儿让我明白，无障碍设计不是“额外工作”，而是“基础优化”，就像我录入数据时核对字段，看似麻烦，实则省了后面无数麻烦。

　　可现在的问题是，很多人把无障碍设计当“政治正确”，而不是“技术需求”。就像上周那个会，设计说“我们要做有温度的产品”，结果连最基本的``都没标；产品说“用户需要包容性设计”，结果需求文档里连“屏幕阅读器兼容”都没提。最搞笑的是测试，说“我们用NVDA测过了”，结果一查——他们用的是Windows自带的讲述人，而大部分盲人用户用的是NVDA或JAWS。这就像我录入数据时用Excel，结果测试用WPS，最后格式全乱，谁负责？

　　我后来想了想，这事儿得从根上解决。就像我录入数据，要是第一次就要求必须填所有字段，后面就不会漏；代码也是，从第一行就开始写无障碍属性，后面就不会忘。现在有些框架已经开始强制了——比如Angular的`cdkA11y`模块，不写`aria-`属性就报错；Svelte的编译器会检查表单关联性。我觉得这才是正道——不是靠“自觉”，而是靠“规则”。就像我录入数据，要是系统自动校验字段，我哪会漏？

　　不过话说回来，我也知道这事儿难。就像我上周想优化一个老项目的无障碍，结果发现代码里全是`innerHTML`拼接，DOM结构乱得像团毛线，改起来比重新写还麻烦。而新项目呢？产品经理天天改需求，今天要加个弹窗，明天要改表单布局，我哪有时间管无障碍？所以有时候我也迷茫——是该坚持“从第一行代码做起”，还是先保证项目能按时上线？

　　后来我想通了——优胜劣汰嘛。现在用户选择多了，你产品连基础的无障碍都做不到，人家转头就用竞品去了。就像我录入数据，要是总出错，公司早把我开了。所以我觉得，无障碍设计不是“做不做”的问题，而是“怎么做”的问题。从第一行代码开始，把`aria-`属性当必填项，把表单关联性当基础检查，把屏幕阅读器测试当联调的一部分——这样才不会等到真机测试时，才发现构建进度条卡在百分之八十七，而水杯底的渍已经干透了。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!