解决按钮内target="_blank"链接的屏幕阅读器文本显示及空白问题

方法1：优化屏幕阅读器专属样式类（推荐） #

你之前用绝对定位隐藏文本但留下空白，大概率是因为隐藏类的样式没写全。用下面这个标准的屏幕阅读器专属类，既能让辅助设备识别文本，又不会在页面上占据任何空间：

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

把你添加的荷兰语屏幕阅读器文本都套上这个类，不管是在普通链接还是按钮内，都不会产生多余空白。这个方案是WAI-ARIA推荐的隐藏策略，兼容性拉满。

方法2：针对按钮内的文本单独屏蔽 #

如果不想改动全局样式，直接给按钮内的屏幕阅读器文本加专属样式：

/* 匹配按钮内的屏幕阅读器文本元素 */
.button a .sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

通过把元素移出可视区域并压缩尺寸，彻底消除空白。

方法3：从JS根源避免添加文本 #

既然按钮内不需要这个荷兰语文本，不如直接在JS里判断链接的父元素，跳过按钮内的链接：

document.querySelectorAll('a[target="_blank"]').forEach(link => {
  // 检查链接是否在按钮内部
  if (!link.closest('.button')) {
    // 原来的添加tooltip和屏幕阅读器文本的逻辑
    const srSpan = document.createElement('span');
    srSpan.className = 'sr-only';
    srSpan.textContent = '(opent in nieuw venster)';
    link.appendChild(srSpan);
    
    // 你的tooltip代码...
  }
});

这个方案从源头解决问题，不用后续再处理样式，逻辑更清晰。

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