做网页设计时，图标用得多了，反而容易忽略一些人看不见的问题。比如色盲用户打不开你的导航菜单，或者视力障碍者根本点不中那个小小的分享按钮。这些看似不起眼的图标，其实藏着不少无障碍设计的门道。
图标不能只靠颜色区分
很多人习惯用红色表示删除、绿色表示通过。但对红绿色盲用户来说，这两种颜色看起来差不多。如果删除图标只是一个红色叉，旁边没有文字或形状辅助提示，就很容易误操作。正确的做法是加上“×”符号，或者在交互区域保留“删除”文字标签，哪怕视觉上藏在屏幕外，读屏软件也能读出来。
图标要有足够的点击区域
手机上常见那种细线条的菜单图标，看着清爽，但手指一戳就偏了。特别是老年人或手部控制不便的人，点不准会直接放弃使用。建议图标的可点击区域至少达到44×44像素，哪怕图标本身只有20像素，也可以用透明内边距撑开点击范围。
给图标加上语义化属性
HTML里可以用 aria-label 给图标补充说明。比如一个放大镜图标用于搜索：
<button aria-label="搜索">
<svg class="icon">...</svg>
</button>这样读屏软件就会念出“搜索按钮”，而不是“图片”或者干脆跳过。
避免纯图标导航
有些网站为了简洁，底部导航栏全是图标，没有文字。对第一次使用的用户来说，猜哪个是“我的”、哪个是“设置”全靠蒙。更友好的方式是在图标下方加上文字标签，哪怕默认隐藏，在用户开启无障碍模式时再显示也行。
动态图标的可暂停问题
有些加载图标一直在转圈，对光敏感用户可能引发不适。W3C建议所有自动播放的动画都提供暂停机制。可以用CSS媒体查询检测用户是否启用了减少动画偏好：
@media (prefers-reduced-motion: reduce) {
.loading-spinner {
animation: none;
}
}一个小图标，不只是装饰。它可能是某些人能否顺利使用你网站的关键。设计时多想一步，少制造一道门槛。