The Web Content Accessibility Guidelines 1.0 state:
“Clearly identify the target of each link. [Priority 2] Link text (The rendered text content of a link) 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.”
Depending on how this checkpoint is read, this could mean that every external link should be identified within the link text itself. For example, you could use ” (off-site link)” or “(external link)” within any link text that points to any external resource.
The problem
Is there a way to add descriptive text to all external links and then replace this text with a small icon for CSS supporting browsers?
The solution
1. Give the external link a class.
<a class="external" href="#">Hello world</a>2. A study on titles by Steve Faulkner has shown that the title attribute is not displayed in a device independent way across devices. However, in this case, the title could be used to inform non-sighted users that this is an external link.
<a class="external" href="#" title="External">Hello world</a>3. Create variations of your icon each link state. For example:
4. Create a CSS rule to add a background image icon to the external link:
.external {
padding-right: .9em;
margin-right: .2em;
background-image: url(../img/external-static.png);
background-repeat: no-repeat;
background-position: right;
background-size: 12px 12px;
}
5. Create CSS rules for the other states:
.external:hover {
background-image: url(../img/external-hover.png);
}
.external:focus {
background-image: url(../img/external-focus.png);
}
.external:active {
background-image: url(../img/external-active.png);
}
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea ullam eos corporis quaerat aliquam, tempora id. Iste, veritatis. Hello world Molestias reiciendis veritatis dolore minus at illo, reprehenderit perferendis consequuntur exercitationem laudantium.