12个无障碍设计资源站，省80%调研时间

　　前端又在群里@我：「这个按钮的焦点状态颜色太浅了，WCAG AA级要求对比度至少4.5:1，现在才3.8，得改。」我盯着屏幕上的色板——那个被产品说「高级灰」的色值#B8B8B8，突然想起上周刚换的数位笔尖，笔尖在数位板上划拉时，总有点打滑，像现在这设计稿的间距，怎么调都不对。

　　改到第九版时，窗台上的绿萝死了半盆。产品说「要无障碍设计，但别太丑」，前端说「WCAG标准是死的，用户习惯是活的」，我原以为这俩能吵一架，结果他们转头开始讨论「色盲用户会不会把红色和绿色按钮搞混」——而我的切图文件夹里，还躺着八个版本的「确认按钮_无障碍版.png」，命名乱得像甲方审美。

　　但今天不聊吵架，聊个省时间的玩意儿。我整理了12个无障碍设计资源站，不是那种「100个免费图标库」的凑数合集，是实打实能筛掉80%调研时间的——毕竟谁想在改稿间隙，还要翻WCAG官网查「动态内容的时间限制」条款？

　　第一个站叫「A11y Project」，我原以为它是给新手看的，结果发现它连「键盘导航的焦点顺序」这种细节都有案例库。上周改那个电商首页，产品非要把「搜索框」放在「购物车」前面，说「用户习惯先找东西再结算」，可键盘用户是按Tab键跳的，焦点顺序不对，盲人用户会直接跳过搜索框——我在A11y Project的案例里找到个类似的，直接甩给产品，他看了五分钟，说「哦，那改吧」。

　　第二个是「WebAIM Contrast Checker」，色板里那个说不清的灰，就是在这儿被毙的。它不用你算对比度，直接拖色块，数值不够会标红。前端以前总说「我觉得够了啊」，现在他直接把色值贴进去，看红色警告就闭嘴——不过他最近开始吐槽「这工具太严格，有些颜色明明能看清，就是不过审」，我回他「要不你去跟WCAG标准委员会说？」

　　第三个有点反常识，叫「Inclusive Components」。它不讲「应该怎么做」，而是讲「别怎么做」。比如那个被改废的「下拉菜单」，产品说要「有动画效果，显得高级」，结果动画时间太长，屏幕阅读器读不完选项；Inclusive Components里有个案例，直接说「动画时间超过0.5秒，对认知障碍用户不友好」——我拿这案例怼产品，他说「哦，那简单点也行」。

　　旁边工位的小李在刷短视频，外放声盖过了我的键盘声。他最近在做政府项目，甲方要求「所有按钮都要大，字号至少18px」，他吐槽「这哪是无障碍，这是给老年人设计的」。我偷瞄他的屏幕，发现他在用「Accessibility Insights」——微软出的工具，能自动扫页面，标出所有不符合WCAG的地方。他扫完说「靠，原来我的表单标签没关联输入框，屏幕阅读器会读错」，然后默默改了俩小时。

　　说到表单，第四个站「ARIA Authoring Practices」必须提。它把所有ARIA属性都列出来了，连「什么时候用role=button，什么时候用role=link」这种细节都有。上周改那个「分享按钮」，产品说要「点一下弹出分享菜单」，前端用div模拟按钮，结果屏幕阅读器读不出「按钮」状态；我在ARIA里找到「role=button」的用法，让前端加上，问题解决——不过前端说「这属性太老了，新浏览器可能不支持」，我回他「WCAG 2.1都出了，你还在纠结IE？」

　　显示器有点色偏，我调了半天，还是觉得#333的黑色有点发蓝。第五个站「Color Safe」能根据背景色生成安全的文字颜色，还能选WCAG等级。我原以为它只能生成丑丑的纯色，结果发现它能调「暖灰」「冷灰」，甚至能生成渐变——不过产品看了说「这灰太普通了，能不能加点品牌色？」我回他「品牌色对比度不够，盲人用户看不见」，他沉默了三秒，说「那算了」。

　　第六个是「Deque University」，它有免费课程，从「什么是无障碍」讲到「如何测试」。我让新来的实习生去看，他看了两天，回来跟我说「原来无障碍不是只给残疾人用的，是给所有用户用的」——比如那个被产品说「多余」的「跳过导航」链接，对键盘用户来说，能直接跳到主内容，不用按十次Tab键；对屏幕阅读器用户来说，能快速定位内容，不用听一堆导航菜单。

文章配图，仅供参考

　　但这些站不是万能的。比如上周改那个「轮播图」，产品说要「自动轮播，每3秒换一张」，我说「规则99说‘别用自动轮播，除非用户能控制速度’」，他回「可用户习惯自动轮播啊」；前端说「那加个暂停按钮？」，我说「规则100说‘暂停按钮要明显，且能用键盘操作’」，最后我们折中——默认不自动轮播，但用户可以选「自动播放」选项。改完测试时，屏幕阅读器用户说「终于不用被轮播图打断阅读了」，产品听了，居然没反驳。

　　现在我的切图文件夹干净多了，命名都是「按钮_默认_无障碍.png」「输入框_焦点_WCAG.svg」这种。前端偶尔还会吐槽「这规范太严格了」，但至少他不再说「我觉得够了啊」——毕竟工具和案例摆在那儿，他没法反驳。而产品呢，他现在会主动问「这个设计符合无障碍吗？」，我回他「你去那12个站里查，查不到我再帮你找」。

　　不过话说回来，这些站省的是调研时间，省不了改稿时间。就像那个被改废的「下拉菜单」，就算我知道所有规范，产品还是要「有动画效果」，前端还是要「用div模拟按钮」，最后还是得我熬夜改——但至少现在，我知道怎么怼他们了。

　　窗台上的绿萝彻底死了，我打算明天买盆新的。而那12个站，我存在了浏览器的收藏夹里，标签是「改稿救命包」——毕竟谁知道下次产品又会提什么「高级需求」呢？

（编辑：天瑞地安资讯网）

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