Edge朗读功能无法读取仅屏幕阅读器元素的解决方案咨询

问题背景 #

主流教程推荐的屏幕阅读器专属隐藏元素CSS类如下：

.visually-hidden { 
  /* 限制文本在1px容器内 */
  height: 1px; 
  overflow: hidden;
  width: 1px;
  /* 不影响页面布局 */  
  position: absolute;
  /* 完全隐藏视觉痕迹 */
  clip: rect(1px 1px 1px 1px); /* 兼容IE6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); /* 现代浏览器 */
  /* 避免屏幕阅读器忽略单词间空格 */
  white-space: nowrap;
}

但Edge的「朗读」功能无法识别带有overflow: hidden的.visually-hidden元素内容，例如以下代码只会读出“Lucy Bob”：

<p>
  Lucy
  <span style="height: 1px; width: 1px; position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; overflow: hidden">and</span>
  Bob
</p>

若移除overflow: hidden，Edge朗读能正常识别内容，但当隐藏元素文本过长时会出现水平滚动条。

可行解决方案 #

方案1：用overflow: clip替代overflow: hidden #

overflow: clip与hidden功能类似，但不会触发滚动容器特性，既能截断超出内容，又不影响Edge朗读识别。修改后的CSS类：

.visually-hidden {
  height: 1px;
  width: 1px;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: clip; /* 替换为clip属性 */
}

方案2：将元素移出可视区域 #

通过left定位或transform将元素完全移出屏幕，结合overflow: hidden避免滚动条：

.visually-hidden {
  height: 1px;
  width: 1px;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
  left: -100vw; /* 移出可视范围 */
}

或使用transform实现：

.visually-hidden {
  height: 1px;
  width: 1px;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
  transform: translateX(-100%);
}

方案3：添加max-width: 1px限制宽度 #

保留overflow: hidden，同时用max-width强制元素宽度不超过1px，避免长文本撑开容器：

.visually-hidden {
  height: 1px;
  width: 1px;
  max-width: 1px; /* 限制最大宽度 */
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}

验证结果 #

以上方案均满足两个核心需求：

• Edge「朗读」功能可正常读取隐藏元素内的所有文本
• 长文本内容不会触发页面水平滚动条
• 元素保持视觉隐藏，不干扰页面布局

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