自动将跨度附加到外部链接 - 目标_blank

Question

我想自动将跨度附加到任何具有目标＆＃34; _blank＆＃34;的链接。这样做的目的是让屏幕阅读器阅读＆＃34;（在新标签中打开）＆＃34;但是用'＃34;屏幕阅读器 - 文本＆＃34;可视地隐藏跨度。

示例链接：

<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中）创建一个在新标签/窗口中打开的链接，并且附加的跨度将自动添加到链接中。

Answer 1

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

应该这样做

Answer 2

虽然您可以使用JavaScript动态插入<span></span>标记，但许多屏幕阅读器可能无法执行JavaScript代码，因此观众将永远不会听到注释。要使您的网站可访问，请在网站的所有版本中包含范围，并使用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>');