CSS: Automatically Marked and Accessible External Links
The guideline 13th from the Web Content Accessibility Guidelines 1.0 clearly states that a website should provide clear navigation mechanisms.
13.1 Clearly identify the target of each link. [Priority 2]
Link text should be meaningful enough to make sense when read out of context — either on its own or as part of a sequence of links. Link text should also be terse. For example, in HTML, write “Information about version 4.3″ instead of “click here”. In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g., in HTML, the “title” attribute).
This guideline indicates that every external link should be clearly marked. I believe that is important to make websites that are accessible but on the other hand marking all external using classes or title attributes it is time consuming and prone to error. It would be very easy to overlook the odd link, well at least for a forgetful soul like me. 
The method used in this tutorial addresses this issue effectively using only CSS.
The following CSS attribute selector selects any link with the href attribute that begins with “http://“, but does not contain the defined domain name (yourdomain.com for this example). It uses two separate attribute selectors so that it will match the URI whether or not uses the www.
a[href^="http://"]:not([href*="yourdomain.com"])::after {
content: "\2197";
}
The CSS code above matches:
<a href="http://www.yourdomain.com">Link with www</a>
and
<a href="http://yourdomain.com">Link without www</a>
Smashing Magazine has explored this technique before, the CSS code above simply places an north east arrow ( ↗) after any outgoing link. To make things a little prettier I have just tweaked it further:
1. To make the icon appearing different for each link state, I have created three variations of the same image in one file:
2. Added a CSS rule to add a background image to the normal state of the external link.
a[href^="http://"]:not([href*="yourdomain.com"]) {
background: url(images/external_link.png) no-repeat 100% 3px;
padding: 0 12px 0 0;
}
3. Added a CSS rule to add a background image to the hover state of the external link.
a:hover[href^="http://"]:not([href*="yourdomain.com"]) {
background: url(images/external_link.png) no-repeat 100% -97px;
padding: 0 12px 0 0;
}
4. Added a CSS rule to add a background image to the visted state of the external link.
a:visited[href^="http://"]:not([href*="yourdomain.com"]) {
background: url(images/external_link.png) no-repeat 100% -197px;
padding: 0 12px 0 0;
}
Note
Internet Explorer doesn’t seem to like this method very much. It is not a big deal though because it simply ignores the rule, not displaying the background image. But to be honest… Who cares! There are so many standard compliant rules that don’t work with IE anyway.
Let me know what you think if you encounter any problems with this method or if you feel that there are better ways to achieve this.
Tino
Popularity: 100%
What I´m listening to: Leonard Cohen - I'm Your Man
This Post Was Brought To You By:
Related Posts
Make A Comment: ( 10 so far ) | Trackback URI
10 Responses to “ CSS: Automatically Marked and Accessible External Links ”
Web design Manchester
December 19th, 2007
I have noticed that you use rel=”external” on your site. I hope that this CSS rule makes it easier for you!
Tino
December 20th, 2007
Great tutorial! I’m going to try it out on my site…
What plugin are you using to show your code in those boxes?
MInTheGap’s last blog post..Upgrade Your Blog
MInTheGap
January 10th, 2008
I have used the Chili + Enzymes Wordpress plugin which highlights the code, you can find it here, it’s fully documented:
http://noteslog.com/post/chili-enzymes/
And then I’ve styled it with CSS to make it look a bit better. You can do something like:
pre.chili-all {
background-color: grey;
border:4px solid black;
}
In this case this would add a 4px black border and a grey background to create the box.
And to make it even better you can add a different background colour on mouse hover (not supported on IE because it’s a pseudo-class, IE simply ignores this rule):
pre.chili-all:hover {
background: darkgrey;
}
I hope this helps!
Tino
January 10th, 2008
Hi I like the external image link would it be possible if I could use the image for my links.
Rich
February 28th, 2008
Yes feel free to use the code or images in your site. Cheers
Tino
February 28th, 2008
This is a great tip, thanks you. My question is: how to deal with images that have links to external sites. It looks a little strange to have an image with a little icon beside it.
Is there a way to handle this with CSS? I haven’t been able to come up with a solution.
Patrick
April 30th, 2008
Patrick,
The best way I think that would be to enclose the images in a div or span and then set the property background to none. Something along the lines of the example below.
<span class="img_no_bg"><a href="#"><img src="image.png" alt="image" /></a></span>
span.img_no_bg a {
background:none
}
Tino
April 30th, 2008
Found a workaround for ie
Do two separate selectors like this
a[href^=”http://”]{
background: url(images/external_link.png) no-repeat 100% 3px;
padding: 0 12px 0 0;
}
a[href*=”yourdomain.com”]{
background: url();
}
The second selector will overide the first one if it is within your domain and won’t show the image. It works in ie for me.
nicolas
May 26th, 2008
That’s great nicolas. Thanks for sharing!
Tino
June 3rd, 2008
Thanks for that - great info - i am going to use some of those techniques on a few sites i am doing now