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
| 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
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
- Color and underline link text (exceptions include lists of links like a navigation menu)
- Reserve underlining for links (do not underline text that is not a link)
- Use different colors for visited and unvisited links (e.g. shades of blue)
- 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)
- Avoid changing the font style on mouse over
- Avoid tiny text for links
- Use appropriate spacing between links or use a clear separator
- Use links primarily for navigation between pages
- 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:
- Nielsen, J. (2007, 05 14). Command Links. Alertbox: http://www.useit.com/alertbox/command-links.html
- Nielsen, J. (2004, 05 10). Guidelines for Visualizing Links. http://www.useit.com/alertbox/20040510.html
About Me
I'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.
I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.
Help me by sharing your thoughts, ideas and comments.
Categories
- Accessibility (16)
- Code Samples & Tips (8)
- Conclusions (4)
- Design Guidelines (11)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (19)
- Here and there (21)
- Map Applications (7)
- This Week's Highlights (53)
- Usability & UCD (22)
- Web Design (21)
Popular Posts
- ColoRotate – 3D color scheme generator with social component
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
Latest tweets
- Awesome resources for website designers http://t.co/oB77As8O 2 weeks ago
- I just contacted Rep. Jerry Lewis to oppose #SOPA #PIPA - Join me! http://t.co/BuFcgvqf #wikipediablackout 2 weeks ago
- Awesome #login #form #sample http://t.co/hob6dtvF 3 weeks ago
- Photo: Dude, just don’t pin the place you’ve been… ;) http://t.co/lwf3gIU8 3 weeks ago
- Photo: Who wants to buy a church in Los Angeles? http://t.co/0SJrYxCv 2011-12-31
- More updates...
Posting tweet...
