数字角标是带数值的状态提示，非语义化徽章；须用aria-label、role="status"和aria-live确保可访问性，避免absolute定位偏移与空内容渲染。
数字角标不是徽章，但常被误用为徽章
HTML 里没有原生的 <badge></badge> 或 <badge-number></badge-number> 标签。所谓“HTML 徽章”，实际是用 CSS 模拟的视觉组件；而“数字角标”（badge badge-number）只是其中一种常见形态——通常右上角小圆点+数字，比如未读消息数。很多人直接把 span 加 class 当成“徽章元素”，结果语义缺失、可访问性差、响应式错位。
关键区别在于：徽章是**有明确语义意图的装饰性标记**（如“新”、“推荐”、“Beta”），数字角标是**带数值的状态提示**（如“9+”、“12”）。二者 HTML 结构可以相同，但语义、ARIA 属性、CSS 处理逻辑必须区分。
用 aria-label 和 role="status" 让数字角标真正可读
纯视觉角标对屏幕阅读器不可见，用户可能完全不知道有未读消息。不能只靠 aria-hidden="true" 隐藏数字再另加描述——这会让数字本身丢失语义。
- 对动态更新的数字角标，用
role="status"+aria-live="polite"，确保变化时被朗读（如“消息 3 条”） - 数字本身保留为文本节点，不要用伪元素生成（
::after无法被读取） - 若角标依附于按钮/链接（如购物车图标），应将
aria-label写在宿主元素上，例如：<button aria-label="购物车，3 件商品"><span class="badge">3</span></button> - 避免给角标容器单独加
aria-label，否则屏幕阅读器会把它当作独立控件朗读两次
position: absolute 容易导致角标偏移或裁切
几乎所有 CSS 角标都依赖绝对定位，但父容器没设 position: relative 就会相对 body 定位；更隐蔽的问题是：父元素有 overflow: hidden（常见于卡片、头像、导航项），角标直接被截掉。
- 务必检查父元素是否设置了
position: relative，且无overflow: hidden或clip-path - 用
transform: translate()替代top/right做微调，减少因父级 padding/border 导致的像素偏差 - 响应式场景下，小屏时角标文字易撑开或重叠，建议用
min-width+font-size: clamp()控制尺寸，例如：font-size: clamp(0.5rem, 0.6vw, 0.75rem) - 避免用
em单位写right/top，父元素 font-size 变化会导致角标飘移
徽章内容为空时，别留空 span 占位
后端返回 count: 0，前端却仍渲染 <span class="badge">0</span>，既误导用户，又增加无意义 DOM 节点。更糟的是，有些框架（如 Vue）用 v-if 切换但忘记清空 aria-live 区域，导致旧数值残留。
- 数字为 0 或 null 时，直接不渲染角标元素（不是 display: none）
- 若需显示 “0”（如库存归零提示），改用语义化文案：
<span class="badge" aria-label="库存已售罄">0</span>，而非仅数字 - “新”“Hot” 类静态徽章，用
data-badge属性控制显隐，比硬编码 class 更易维护 - 服务端返回的数字若超过 99，统一显示为
"99+"，并确保 ARIA 描述同步更新（如aria-label="消息 99 条以上"）
最常被忽略的其实是状态同步：角标数字变了，但 aria-live 区域没更新，或者用了 aria-live="off" 却期望它发声——这类问题在线上环境几乎无法靠肉眼发现，必须用屏幕阅读器实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
