在表格中展示“X/Y”格式的部署统计（如“5/15”）时，仅用纯数字和斜杠无法传达语义，屏幕阅读器会将其读作“五斜杠十五”，丧失可访问性。正确做法是为分子和分母分别添加语义化 aria-label，明确标识其含义。
在表格中展示“x/y”格式的部署统计（如“5/15”）时，仅用纯数字和斜杠无法传达语义，屏幕阅读器会将其读作“五斜杠十五”，丧失可访问性。正确做法是为分子和分母分别添加语义化 `aria-label`，明确标识其含义。
为提升表格中“X/Y”类状态文本的无障碍体验，核心原则是用机器可读的语义替代视觉简写。原始写法 <td>5/15</td> 对屏幕阅读器不友好，应拆解并赋予明确含义：
✅ 推荐方案：使用 <span></span> 包裹数字，并通过 aria-label 注明上下文
<td> <span aria-label="5 successful deployments">5</span> <span aria-hidden="true">/</span> <span aria-label="15 total deployments">15</span> </td>
关键细节说明：
-
aria-label提供完整、自然语言的描述（如"5 successful deployments"），确保屏幕阅读器准确播报语义； - 斜杠
/使用<span aria-hidden="true">/</span>隐藏其无障碍角色，避免被误读为“slash”或干扰语义流； - 不推荐使用
aria-labelledby或aria-describedby引用外部元素——该场景下内联aria-label更简洁、可靠且无需额外 ID 管理； - 若需支持多语言，
aria-label值应随页面语言动态切换（例如英文"successful"→ 中文"次成功部署"）。
⚠️ 注意事项：
- 避免仅依赖 CSS 视觉样式（如颜色、图标）传递关键信息，必须辅以文字语义；
- 不要将
aria-label加在<td> 上整体标注（如 <code>aria-label="5 out of 15 deployments"），这会覆盖单元格内所有子内容，且无法区分 X/Y 的独立含义； - 若该列存在多种状态（如 “Pending”、“Failed”），建议统一采用
<span role="status"></span>+aria-live实现动态更新通知（适用于实时部署监控场景）。
总结：可访问性不是叠加属性，而是重构语义。对“X/Y”这类简写数据，用带 aria-label 的 <span></span> 显式声明每个数值的业务含义，是最轻量、最兼容、最符合 WCAG 2.1 AA 标准的实践方式。
