CODEWITHSUNDEEP
jqueryhtmlcssaccessibility
Martin K
Martin K

Reputation: 439

How to make the CSS external link (target="_blank") icon accessible?

I want to automate the attribution of an "external link" icon to links which go off-site (ie where the a-tag includes target='_blank'). I have so far been successful in this using pure CSS by doing this:

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

This works. However, the drawback here is that it does not satisfy the accessibility rules since someone relying on a screen reader does not see the icon. The solution would be to modify the title attribute of the a-tag to say "Opens in new window" (or better still perhaps to add this to the existing title attribute). I do not think there is any way of doing this in CSS so I was trying to use jQuery which I know a little bit but don't use on a regular basis.

I tried this:

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

But it changes all the a-tags and not just the ones with target='_blank'. I must be getting something wrong in the jQuery select - but I can't see what (and I have tried looking at the jQuery docs and even tried the .each()-function, without success).

Help on this, or even alternative suggestions for how to achieve the desired effect, would be welcome.

Upvotes: 3

Views: 3288

Answers (2)

atmd
atmd

Reputation: 7490

So, as per the other answer and my comment, you are selecting all a tags in your jquery and should use $('a[target="_blank"]').attr("title", "My external link");

However, some screen readers will not see this update and still read the original title text. (remember you are adding this after page render)

If you are adding target _blank to the a tag you should also add the new title (if possible). you might be adding no benefit if the screen readers don't see you updated title text

Upvotes: 2

MortenMoulder
MortenMoulder

Reputation: 6648

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

You forgot your selector :) You're better off adding a class to all the a-tags you want, otherwise you can iterate through them using .each()

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

Upvotes: 4

Related Questions