Question

我希望自动化＆＃34;外部链接的归属＆＃34;图标指向异地的链接（即a - 标记包含target='_blank'的位置）。到目前为止，我通过这样做使用纯CSS成功：

a[target="_blank"]:after {
    font-family:'Glyphicons Halflings';
    font-size: 0.8em;
    content: " \e164";
}

这很有效。然而，这里的缺点是它不满足可访问性规则，因为依赖于屏幕阅读器的人没有看到图标。解决方案是将a - 标签的title属性修改为＆＃34;在新窗口中打开＆＃34; （或者更好的是将其添加到现有的title属性中）。我不认为在CSS中有任何方法可以这样做，所以我试图使用jQuery，我知道一点点，但不定期使用。

我试过了：

<script>
$(document).ready(function(){
    $($("a").attr("target","_blank")).attr("title", "My external link");
});
</script>

但它会更改所有a - 标记，而不仅仅是target='_blank'标记。我必须在jQuery选择中出错 - 但是我无法看到（我尝试查看jQuery文档，甚至尝试了.each() - 函数，但没有成功）。

欢迎提供此方面的帮助，甚至是如何达到预期效果的替代建议。

Answer 1

$("a[target='_blank']").attr("title", "My external link");

您忘记了自己的选择器:)您最好在所有的a-tags上添加一个类，否则您可以使用.each()

来迭代它们

$("a[target='_blank']").each(function() {
    $(this).attr("title", "My eternal link");
});

Answer 2

因此，根据其他答案和我的评论，您选择了jquery中的所有a代码，并应使用$('a[target="_blank"]').attr("title", "My external link");

但是，某些屏幕阅读器不会看到此更新，仍会阅读原始标题文本。（记得你在页面渲染后添加这个）

如果要将目标_blank添加到a标记，则还应添加新标题（如果可能）。如果屏幕阅读器没有看到您更新的标题文本

，您可能无法获益

如何使CSS外部链接（target =＆＃34; _blank＆＃34;）图标可访问？

2 个答案: