Michael Gaigg: Über UI/UX Design

28Oct0

Best Practices for accessible Links

Posted by Michael Gaigg

It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It's definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.

Basic Rules

See also my Design Guidelines for Links.

  • Contrast link text color and regular text color
  • Underline link text
  • Ensure link text is descriptive of its destination
  • Make visited links change color
  • Limit link text to a maximum of four words
  • Place important words at the front of link text
  • Minimize amount of links to seven (excluding the menu) unless they are presented in a clear structure
  • Use meaningful pathnames when creating directory structure

Best Practices

Level 1

No Level 1 requirements.

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Clearly identify the target of each link 13.1 n/a <A href="my-doc.html">My document is available in HTML</A>,<A href="my-doc.pdf" title="My document in PDF">PDF</A>,

<A href="my-doc.txt" title="My document in text">plain text</A>

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Create a logical tab order 9.4 n/a <A tabindex="2" href="link2.txt"">Link 2</A><A tabindex="1" href="link1.txt">Link 1</A>

<A tabindex="3" href="link3.txt">Link 3</A>

Links Provide keyboard shortcuts to important links 9.5 n/a <A accesskey="2" href="link2.txt"">Link 2</A><A accesskey="1" href="link1.txt">Link 1</A>

<A accesskey="3" href="link3.txt">Link 3</A>

Links Include non-link, printable characters (surrounded by spaces) between adjacent links 10.5 n/a [<A href="a.htm">Link A</A>] [<A href="b.html">Link B</A>] or<A href="a.htm">Link A</A> | <A href="b.html">Link B</A>

Templates

Find out more about <a title="Michael Gaigg IT Solutions Webpage" href="http://www.michaelgaigg.com/">IT Solutions</a>

References

15Oct0

Design Guidelines: Links

Posted by Michael Gaigg

"If links were married they'd get divorced all the time! That's because they can't keep their promise." (Gerry McGovern)

What Gerry means is that what links say they will do and what they actually do are total opposites. How many times have I believed, clicked and followed a link that promised me to 'Download this or that' just to find another page describing this piece of software. There I had to muddle through even more links just to find another 'Download version' link that yet again takes me to another page acknowledging the terms and conditions. The story could go on and on.

Remember: Good links are like magnets - they drive users to them.

With that in mind, here are the

Design Guidelines for Links

  1. Color and underline link text (exceptions include lists of links like a navigation menu)
  2. Reserve underlining for links (do not underline text that is not a link)
  3. Use different colors for visited and unvisited links (e.g. shades of blue)
  4. Avoid using color for text unless it is a link and never use blue for non-text links (even if your links are not blue)
  5. Avoid changing the font style on mouse over
  6. Avoid tiny text for links
  7. Use appropriate spacing between links or use a clear separator
  8. Use links primarily for navigation between pages
  9. Link text must be describe the target as short and precise (clear call to action) as possible AND hold this promise!

Best Practices

See my blog entry for Best Practices for accessible Content

References:

 

Suggested reading: