表格单元格内样式为图片的空<span>适配屏幕阅读器的正确方案

嘿，这个场景太常见了，咱们直接说最实用的解决方案，完全不用改动你现有的视觉效果：

首选方案：role="img" + aria-label组合 #

因为你的<span>是被当作「状态图标」来用的，但它本身不是原生图片元素，所以第一步给它加role="img"，明确告诉屏幕阅读器「这是一个图像类元素」；然后用aria-label补充屏幕阅读器专属的状态文本，比如：

<span role="img" aria-label="已启用" class="status-enabled"></span>
<span role="img" aria-label="已禁用" class="status-disabled"></span>
<span role="img" aria-label="错误状态" class="status-error"></span>

这样既保留了原有的颜色状态视觉效果，屏幕阅读器也能准确读出对应的状态，完美兼顾两类用户。

备选方案：视觉隐藏的关联文本 #

如果你不想用role="img"，可以给状态<span>搭配一个视觉上隐藏但屏幕阅读器可见的描述文本，用aria-describedby关联：

1. 先定义一个视觉隐藏的CSS类：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. 然后这样写HTML：

<span class="status-enabled" aria-describedby="status1"></span>
<span id="status1" class="sr-only">已启用</span>

不过这个方法比第一种繁琐，更适合需要重复复用描述文本的场景。

额外提醒 #

• 尽量别只靠颜色区分状态（如果能在颜色之外加个微小的形状区分，比如启用是绿圆点、禁用是灰横线，会更友好，但这属于可选优化，完全不影响你现有布局）；
• 测试时记得用NVDA、VoiceOver这类主流屏幕阅读器验证效果，确保状态能被正确读取。

内容的提问来源于stack exchange，提问作者Murval