塔斯娱乐资讯网

无障碍设计是及格线|5个最低标准✅

很多设计师觉得无障碍是"锦上添花"的事,等产品做大了再考虑。大错特错👇
全球有超过10亿人有某种形式的障碍。在中国,视力障碍者超过1700万,听力障碍者超过2700万。无障碍不是小众需求
以下5条是最低标准,不是高要求:
✅ 标准一:色彩对比度达标
正文文字和背景的对比度 ≥ 4.5:1 大号文字(18px+粗体)≥ 3:1 用 WebAIM Contrast Checker 在线工具检测 别只靠肉眼看!你觉得"能看清"不代表弱视用户能看清
✅ 标准二:不要只用颜色传达信息
红色表示错误?还要加上图标和文字 绿色表示成功?同样加图标和文字 色盲/色弱用户可能完全分不清红绿
✅ 标准三:可交互元素有焦点态
用键盘 Tab 键能依次选中所有可交互元素 选中时有明显的 focus 样式(蓝色边框等) 很多设计师为了"好看"把 focus outline 去掉了,这对键盘用户是灾难
✅ 标准四:图片有替代文字
所有有意义的图片需要 alt 文本 屏幕阅读器靠这个告诉视障用户图片内容 纯装饰性图片设 alt="" 让阅读器跳过
✅ 标准五:点击区域足够大
最小 44×44pt(苹果标准)或 48×48dp(谷歌标准) 手指不精准的用户、老年用户都需要足够大的触摸目标
💡 检测工具推荐:
Stark(Figma 插件)→ 一键检测对比度和色盲模拟 axe DevTools(浏览器插件)→ 自动扫描页面无障碍问题
做设计的时候多想一步"如果用户看不清/听不见/不能用鼠标,还能用吗?"
这不是善良,这是专业🫶