自动将 span 附加到外部链接 - 目标 _blank答案

【问题标题】：Automatically append span to external links - target _blank自动将 span 附加到外部链接 - 目标 _blank
【发布时间】：2018-02-27 11:43:00
【问题描述】：

我想自动将跨度附加到任何具有目标“_blank”的链接。这样做的目的是让屏幕阅读器阅读“（在新选项卡中打开）”，但在视觉上被“屏幕阅读器文本”范围隐藏。

示例链接：

<a href="https://google.com" target="_blank">Google</a>

附加跨度后的示例链接：

<a href="https://google.com" target="_blank">Google<span class="screen-reader-text"> (opens in new tab)</a>

因此，用户（在 WordPress 中）所要做的就是创建一个在新选项卡/窗口中打开的链接，并且附加的跨度将自动添加到链接中。

【问题讨论】：

【解决方案1】：

$(“a[target=‘_blank’]”).append(‘<span class="screen-reader-text"> (opens in new tab) <\span>’);

应该这样做

【讨论】：

【解决方案2】：

虽然您可以使用 JavaScript 动态插入 <span></span> 标签，但许多屏幕阅读器可能不会执行 JavaScript 代码，因此观众永远不会听到注释。要使您的网站易于访问，请在网站的所有版本中包含 span，并使用 CSS 将其隐藏在视觉访问者面前。

Twitter Bootstrap 框架对其 sr-only 类使用以下 CSS 规则：

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

请注意，此类不包含任何可能导致某些屏幕阅读器忽略内容的 display: none; 或 width: 0px; height: 0px; 规则。

要直接回答您的问题，这里有一个 jQuery 示例：

$("a[target='_blank']").append('<span class="screen-reader-text">...</span>');

【讨论】：