Best Practices for accessible Links
October 28th, 2008
No comments
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
| 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
| 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.mgitsolutions.com/">IT Solutions</a>
References
- Webcredible. Writing effective link text. http://www.webcredible.co.uk/user-friendly-resources/web-usability/effective-link-text.shtml
Categories: Accessibility 508, accessible, accessiblity, best practices, checkpoint, color, compliancy, contrast, descriptinve, destination, effective link text, examples, hypertext links, identify, keyboard shortcuts, level 1, level 2, level 3, link, maximum, meaningful, rules, section 508, tab order, target, underline, Useful Links, visited, w3c, wcag, webcredible
