Do It Myself Blog – Glenda Watson Hyatt

Your Accessibility Conscience

3 Tips for Making Your Hyperlinks More Usable

Filed under: Accessibility 100, Blog Accessibility — by Glenda at 5:11 pm on Wednesday, February 11, 2009

How many times do you skim an online article or blog post, looking for interesting or relevant links? Individuals with sight impairments using screen readers (software that reads aloud text on the computer monitor) can have the software scan for hypertext links. However, oftentimes, the purpose of the hyperlink is difficult to determine. Similarly, individuals with other types of disabilities may face other obstacles while trying to use hyperlinks.

Web designers and bloggers can easily improve hyperlink usability by implementing the following three tips:

Tip #1: Make hypertext links informative when read out of context.

Imagine what individuals using screen readers would hear in the following example:

Examples of poorly written hypertext links, including "Click here"

In this example, the links “Christa Couture” and “Click here” are meaningless when read out of context. These individuals do not have any clue where the links will take them. The links should be rewritten to read “British Columbia singer/songwriter Christa Couture” and “View event details”.

Tip #2: Make hypertext links succinct.

Imagine how time consuming the next link would be to listen to, if you are scanning for only links:

Another poor hypertext link: an entire sentence is linked  

Making an entire sentence a link is unnecessary and is sloppy.

Tip #3: Separate adjacent links with non-linked, printable characters.

Imagine how confusing these two adjacent links would be if you had double vision or how difficult selecting the small links would be if you had a shaky hand:

An example of a poor hypertext link: two adjacent links with no separating character

In this example, rewrite:

“…running two Group Research projects…” (where each hyperlinked word points to a separate link)

to read

“…running the Internet Marketing Group Research Project and the Community Building Group Research Project…” (where the project names are hyperlinked and separated by the non-linked word “and”).

Other printable characters that can be used for separating adjacent links include punctuation, pipe bar |, brackets [ ], parenthesis ( ), and slash /.

Additional resources on hypertext links

(Re-examine the first two examples for a clue to next Wednesday’s web accessibility tip…)

If you enjoyed this post, consider buying me a cafe mocha. Thanks kindly.

Random Posts

Trackbacks

  1. Thoughts on Design » Visible or Invisible Links
  2. Anonymous
  3. Do It Myself Blog - Glenda Watson Hyatt » 3 Tips for Making Your Hyperlinks More Usable at tim o’brien photos
  4. Do It Myself Blog - Glenda Watson Hyatt » Can Your Blog Readers Find Your Hyperlinks?
  5. How to make social media ‘wheelchair accessible’ | Socialbrite

7 Comments »

Comment by Darsh

February 11, 2009 @ 7:32 pm

Excellent tips Glenda.

Comment by dani

February 23, 2009 @ 1:14 am

Glenda,
I guess those accessibility and usability tips overlap each other.
And you can check WCAG 2.0 status against ATRC web accessibility checker (currently in development).

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>