FavLink Stack

LinkPlus Stack

make sure your links are clearly distinguished from normal text

When you are serious about attracting as many visitors as possible to your site, you should not overlook those with a disability. I developed this stack to make links in your main content easier to use for visitors with vision and dexterity impairments in mind – and at the same time make those links look cool.

Background
According to the W3C’s Web Content Accessibility Guidelines (WCAG) 2.0, you should not use color ‘as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element’ (source).

This means that links (at least those in the main text area of a web page) that only differ from its surrounding text in color, limit the accessibility of your website. It may be in fashion nowadays, but especially color blind and people with poor eyesight (like many elderly) benefit from a clear distinction between ‘normal’ text and links by other means than just the color.

Suggested reading
Adrian Roselli: I Don’t Care What Google Did, Just Keep Underlining Links
Web Axe: Keep the Underline
SitePoint: Making Accessible Links: 15 Golden Rules For Developers
Salesforce UX: 7 Things Every Designer Needs to Know about Accessibility

Features
With this stack, you can make that distinction in several ways:
  • Add underlining to your links, even if your theme does not. You can even use different colors for the link text and its underlining.
  • Use a border bottom on links. The advantage is that you have more styling options than with normal underlining (width, dotted, dashed, double line…). On the other hand, the line will be lower than a normal underline, which may call for a greater line height (can be set in the stack).
  • Use a background color (like on this page). It’s a nice effect, as long as there’s enough contrast with the text color – see below. Unfortunately, it does not look great with every font. Just as with border bottom on links, you may need to increase the line height.
  • Change the text of the links to bold and/or italic. This can be combined with each of the options above, or used separately.
  • Add icons to the links:
or at the end of external links
at the end of internal links
or at the end or the beginning of email links
As suggested by the W3C, the LinkPlus stack also applies the :hover styling to :focus, making it easier for those who use a keyboard instead of a mouse or trackpad to navigate on a page to see which link is selected.
Whatever you choose, make sure there’s enough contrast between the text and its background. There’s an easy to use checker on WebAIM. On this site, you can also find a lot of other valuable information about web accessibility that’s worth checking.

Oh, and never ever underline text that is not a link. That’s utterly confusing.

Demo
Visit the demo page for examples on how this stack can improve the accessibility of your links.

Usage
Just drag one or more stacks that can contain text in the drop zone of the stack.
You can also style links in elements outside the stack (like the sidebar). This option is meant for advanced users only and the use of it is not supported (you can also use DooBox’ Teleporter Stack or the PlusKit Plugin by YourHead).

Need help using it on a non-stacks page? Here’s a tutorial.

Limitations
  • When the visitor has JavaScript disabled in his browser, this stack will not work properly.
  • You can use only one custom selector in the stack. When you want to use more than one custom, add another copy of this stack, disable the option use with drop zone and set another custom selector. Repeat if necessary.
  • If links are spread over two lines, the icon at the end of a link may end up at the next line; and the background does not look perfect in Internet Explorer and Edge (fig. 1). At present, the only solution to prevent this is to use the option keep link text on one line.
  • The LinkPlus Stack is not compatible with the ExternalLinkIcon3 Stack. Don’t worry, all options of that stack are also part of the LinkPlus Stack.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).
LinkPlus IE
fig. 1: When a link is spread over two lines, the background does not look perfect in Internet Explorer and Edge
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
LinkPlus HUD
© 2012-2017 Marathia Web Design | Contact