在HTML中如何实现悬停时仅屏幕阅读器可识别的视觉隐藏文本？

你原有方案悬停不生效的核心原因是：.screenreader元素被完全裁剪为0尺寸且脱离文档流，鼠标悬停时指针命中的是图标节点，辅助技术无法关联到隐藏的文本内容。可选择以下任意一种可行方案修复：

方案1：使用aria-label简化实现（最推荐） #

直接移除多余的.screenreader隐藏文本节点，给按钮元素添加aria-label属性，该属性本身就是为辅助技术设计的，无论键盘聚焦还是鼠标悬停，屏幕阅读器都会自动读取属性值，无需修改现有CSS：

<button class="btn-link" aria-label="edit e-mail">
   <span class="icon icon-md icon-create"></span>
</button>

该方案兼容性覆盖所有主流屏幕阅读器（NVDA、VoiceOver、JAWS），代码更简洁易维护。

方案2：保留现有DOM结构的适配方案 #

如果你需要保留现有隐藏文本的结构不变，只需做两处修改即可生效：

1. 给按钮添加和隐藏文本内容一致的title属性，鼠标悬停时屏幕阅读器会主动读取title值，同时还能给普通用户展示悬浮提示：

<button class="btn-link" title="edit e-mail">
   <span class="screenreader">edit e-mail</span>
   <span class="icon icon-md icon-create"></span>
</button>

2. 同步优化你的.screenreader类CSS，适配现代浏览器的无障碍标准，避免旧属性失效：

.screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

两种方案均可以实现键盘聚焦、鼠标悬停按钮时，屏幕阅读器正常读取按钮功能说明的效果。

内容的提问来源于stack exchange，提问作者M.E.Amrani