CSS: Automatically Marked and Accessible External Links

del.icio.us Digg Reddit StumbleUpon Technorati

Posted on December 18th, 2007 .

Comments

Comments

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:

Links Background Image

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%

Listen to this podcast Listen to this podcast

What I´m listening to: Craig Armstrong - William Shakespeare's Romeo + Juliet: Music From The Motion Picture, Volume 2 (1996 Version)


This Post Was Brought To You By:

Related Posts

Top 10 Must-Have Plugins for Wordpress
Creating Content for Your Website
SES: Paid Links - powerpoint presentation
47 XML-RPC Ping Services
Common Web Design Mistakes




discussion by DISQUS

Add New Comment

Viewing 51 Comments

blog comments powered by Disqus
my del.icio.us my Digg  my Facebook