变量命名别踩坑，语义化标签才是视障友好码

　　去年十一月那阵儿，我盯着视障用户测网页，那时候雨是飘的，机房通风柜漏的风总往后颈钻，连外卖盒汤都凉得快。当时对接的那产品经理，穿个洗得发白的灰卫衣，一只手总攥着个没拆的薄荷糖，没地方放就塞牛仔裤口袋，蹭得口袋边起球。

　　我原以为变量名按业务逻辑起，比那种乱码似的a1b2强，结果真测的时候，人家读屏根本绕不开语义标签的坑——那时候测的是个订单页，我盯了十八秒，那用户还在反复读“订单状态订单状态订单状态”，后来我才反应过来，我加的变量名是“order_status”，语义标签却没标对，读屏软件识别的是“div class=order-status”里的空标签，不是变量映射的真实状态。

　　那产品经理当时皱着眉，说他之前测的时候没这情况，说我是不是改了什么配置，我指着他口袋里露出来的糖纸边角，说你那糖都搁得发皱了，先拿出来再说。他才把手拿出来，糖纸蹭得全是毛絮。

　　我原以为这是个案，结果第二天测个列表页，用户读的“选项选项选项”，翻了三层才找到是没给列表项加aria-label，变量名倒是用“list_item”，但语义没跟上，读屏根本抓不到有效信息。那时候窗外雨变大了，机房的通风风噪突然盖过了读屏的声音，我拿指尖敲了敲桌子，敲出三个节奏，心里骂了句，原来这么多人踩这坑，不是我个案。

　　之后半个月碰的事儿更多，有个前端实习生，变量名起得挺细，“shipping_address_detail”“billing_post_code”，结果语义标签全是空的，用户读的时候总卡壳，说“这里有个空白，这里有个空白”。那实习生当时正用指甲刮键盘上的字母，刮得键帽都松了，说他以为变量名够清楚就行，标签只是个摆设。

文章配图，仅供参考

　　之前我总觉得变量名语义化就够，后来才明白，这俩是搭伴儿的，少一个都不行。优胜劣汰，不是说哪一个好就能赢，是你没同时做好，就会被用户测出来，就会拉低整个产品的可用性。那产品经理后来改了策略，要求变量名和语义标签必须同步写，写完就过一遍读屏，总比改bug来得快。

　　上周我再测一个新页面，变量名是“user_phone_number”，语义标签加了aria-label，用户读屏的时候直接读出“用户电话号码”，没再卡壳。那时候没下雨，风也小，他说现在找信息快多了，不用反复翻。我盯着他屏幕上的读屏进度条，突然想起去年十一月那阵儿的风噪，还有他口袋里那包没拆的薄荷糖，蹭得口袋边起球，后来他把糖放包里了，没再往口袋塞。

　　我原以为这种坑只有新手会踩，结果碰的老开发也有，上周跟个做了八年的哥们聊，他说他之前做的项目，变量名起得特别细，结果语义标签没注意，上线后被视障用户投诉，改了三个版本才搞定，那时候他正盯着电脑屏幕上的代码，手指在键盘上敲了一下，没说话。我那时候手里端着一杯热咖啡，刚喝一口烫得皱眉，说那你后来怎么改的，他说现在每次写代码，变量名写完就顺手把语义标签写上，省得后来返工，这坑踩一次就够了。

　　之前总觉得视障友好是锦上添花的事儿，现在才明白，是底线的事儿，你变量名再清楚，标签没跟上，人家还是用不了，你说的“优胜劣汰”，不是说哪个更重要，是你没做好这俩，就会被淘汰，就会被用户挑出来问题。那时候雨停了，天有点亮，我看着屏幕上的代码，把一个乱码似的变量名改成“order_status”，顺手加了个语义标签，没再想别的，反正这坑，踩过一次，就不想再踩第二次了。

（编辑：站长网）

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