搜索（放大镜）、收藏（星）、删除（垃圾桶）、返回（箭头）等高频操作，图标能加快识别。
界面与交互 · 内容与数据展示
图标Icon
图标是承载含义的物件：配可见文字或可访问名才完整，纯图标按钮必须有 aria-label，装饰图标对读屏隐藏。
换三种图标用法，看操作行和读屏读数怎么变
同一个「收藏」操作，图标用法不同，识别速度、可访问性和点击结果都不同。先把操作行物件少掉什么看清楚，再解释为什么。
场景：同一个「收藏这条」操作，换三种图标用法。观察操作行物件、读屏读数和收藏态徽章怎么变。
可访问名收藏这条识别方式图标 + 文字，一眼认出识别速度快当前形态方式 B · 图标 + 文字
对照：遮住底部反馈也能看出结果——操作行物件是图标 + 文字按钮；读屏读数四列随之变化；点按钮后收藏徽章消失，计数 0。
对照：同一个「收藏」操作，换三种图标用法。原因：图标是承载含义的物件，配文字或可访问名才完整。下一步：先切到方式 A 纯图标，再开关 aria-label，看读屏读数和收藏徽章怎么变。
把图标当操作或状态时要盯这些
实验台证明的是机制；真正画图标时，用这五条检查边界。
- 纯图标按钮必须有可访问名没有可见文字时，用 aria-label 写明操作（如「收藏这条」）；否则读屏只读「按钮」，用户不知会执行什么。
- 装饰图标对读屏隐藏旁边已有文字说明的图标是装饰，用 aria-hidden="true" 让读屏跳过，避免重复朗读。
- 语义图标配文字，不只靠颜色或形状状态图标（成功/失败/警告）要配文字；色盲和读屏用户无法只靠颜色或形状判断含义。
- 同一含义全站同一图标收藏用星、删除用垃圾桶、设置用齿轮——全站一致；混用会让用户重新猜每个图标的含义。
- 图标与文字基线对齐，尺寸统一图标和相邻文字按基线对齐（常用 16/20/24 px），描边粗细一致；错位和粗细不一会让行高抖动。
什么时候用图标，什么时候必须配文字
判断依据是「没有文字，用户和读屏还能不能稳定知道操作含义」。
提交订单、永久删除、支付等关键操作，以及含义不唯一的图标（如齿轮是设置还是工具），必须配可见文字。
成功、失败、进行中等状态图标不能只靠颜色或形状，要配「已保存」「发送失败」等文字。
读屏读不出含义，键盘和触屏用户也无法确认操作；这是图标最常见的可访问性事故。
怎么用：从选含义到对齐全局的最短路径
让图标的含义、名称、形态和全局用法绑死。
- 定含义：先确定这个操作或状态叫什么（收藏、删除、警告），再去找对应图标。
- 定形态：高频约定俗成可纯图标；首次出现、易混或高风险必须图标 + 文字。
- 给可访问名：纯图标按钮用 aria-label；图标 + 文字时按钮文字就是可访问名，再 aria-hidden 隐藏装饰图标。
- 对齐全局：和站点既有的同含义图标一致（同一图标库、同一描边、同一尺寸与基线）。
- 读屏走查：从头到尾听一遍，确认每个图标按钮都能读出操作含义，且不重复读装饰图标。
正反例：同一个收藏按钮，只改图标用法
目标都是让用户收藏这条内容。差别只在「图标有没有配可访问名或可见文字」。
纯图标按钮用 aria-label="收藏这条"；或图标旁配可见「收藏」文字。视觉快速识别，读屏也能读出操作含义，点击后收藏态长在物件上。
这样用按钮里只有一个星图标，没有任何可访问名。鼠标用户靠猜测，读屏只读「按钮」，键盘用户无法确认操作；这是图标最常见的可访问性事故。
别这么省快速自测
一个只有垃圾桶图标的按钮，没有任何文字或 aria-label。读屏用户最大的问题是什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。