Category: usability

Links: Don’t “Click Here”

So it’s the end of 2013, and sadly, the phrase “click here” continues to be used in text links all around the web. This is poor usability, accessibility, and sure makes the author look silly!

Reasoning

  • “Click” places focus on mouse mechanics (and many people don’t use a mouse).
  • “Click here” hides the target of the link; it’s not a good call-to-action.
  • Poor for visually scanning the page.
  • Users must make the extra effort to read before or after “Click here” to determine to where the link goes. (Don’t make me think!)
  • “Click here” has no context for when a list of links is provided to the user by the user agent.

Examples

To correct the problem, don’t use phrases like “click here” but use meaningful phrases which make sense out of context.

Before: I like the beaches herehere, and here.
After: I like the beaches in Maui, Sarasota, and Saugatuck.

Before: Click here to see if your bill is ready yet.
After: To see if your bill is ready, check the foo app.

Do you have any other examples?

Supporting articles

  1. Why Your Links Should Never Say “Click Here” (Smashing Magazine)
  2. I Don’t Want to Read More or Click Here (Karen Mardahl)
  3. Don’t say ‘click here’ on link text (goodusability.co.uk)
  4. Links and Hypertext (WebAIM)
  5. Click Here and Other Link Text (Jim Thatcher)

Notes

  • In addition to “click here”, the same can be said for “read more” and other similar link phrases.
  • Except for tool tips available to mouse users, the title attribute adds no value (touch devices, keyboard users, most screen reader users).

About Carousels and ARIA Tabs

Jared Smith (@jared_w_smith) of WebAIM recently launched a clever web page on why carousels are not good practice called Should I Use A Carousel? (which totally went viral on its launch day!) There is a slide deck Keyboard and Interaction Accessibility Techniques (on Slideshare) for which this website was made. I was fortunate enough to see Jared present this at Open Web Camp 5 July 13 at PayPal.

Jared presenting at OWC5

I don’t think that a carousel itself is super terrible. But in my experience, carousels are hardly ever coded with accessibility in mind and hardly ever designed with decent usability. In addition, supporting smaller devices is an issue and coupled with the poor usability data, carousels are overall a bad idea. If you absolutely must implement a carousel, here are some design/interaction tips:

  • Let the user start the carousel animation.
  • Give the user the ability to pause the carousel.
  • Ensure the controls have textual labels.
  • Ensure the control of the currently displayed panel is indicated visually and programmatically.
  • Ensure the controls have ample hit areas (for mobile, fine motor disability).

On the development side, a carousel can be challenging to make screen reader accessible. It seems that the most straight forward approach is to use the ARIA tab model which is pretty straight forward and fun to do! Here’s a summary of what to do in the markup:

  • Each carousel content container has a role of tabpanel.
  • Each control, typical designed as dots, has a role of tab.
  • The container of the controls/tabs has a role of  tablist.
  • Add aria-labelledby to the tabpanels which point to the id of the associated control/tab.
  • To each control/tab, add aria-controls (which points to the id of the associated tabpanel) and aria-selected (boolean) attributes.

Here are some code resources to help make sense of this. This first by Marco may be most relevant:

More:

The Usability Principles, Accessibility Style

Steve Grobschmidt (@AquinasWI) recently blogged a three-part series titled The Usability Principles, Accessibility Style. Using Jakob Nielsen’s 10 Usability Heuristics as a guideline, Steve discusses the principles and then explains how they each relate to accessibility. Great stuff!

The 10 principles discussed are:

  1. Visibility of system status
  2. Match between system and the real world
  3. User control and freedom
  4. Consistency and standards
  5. Error prevention
  6. Recognition rather than recall
  7. Flexibility and efficiency of use
  8. Aesthetic and minimalist design
  9. Help users recognize, diagnose, and recover from errors
  10. Help and documentation

Addendum:
For more related information, see my article Popular Mistakes in Universal Web Design which discusses the seven universal design principles.

Article Headings, Please!

This has become an issue for me of late, and it needs more attention. And that is lack of sub-headings in articles. Not just the page heading and/or article heading, but headings  throughout an article to make it more accessible and usable. Especially so the longer an article is. (And of course, use proper markup! H1, H2, etc.)

Examples, Poor

Among many, I came across the following articles which could really use more headings. The articles are fairly long, and could no doubt be broken up into sections.

Why Headings?

Why are headings so important? First of all, it’s part of accessibility guidelines such as WCAG 2.0; see section 2.4.6 Headings and Labels. The W3C points out that headings create meaning when read out of context. And they help people with limited short-term memory. In addition, headings provide:

  • Better navigation for screenreaders.
  • Default formatting when CSS is not available.
  • More semantic.
  • Scanning more usable and readable document.
  • SEO.

Examples, Good

Here are examples of articles with good use of headings:

Please use headings and sub-headings as it creates more web accessible and usable articles.

Usability (and Accessibility) Tweetup in Ann Arbor, July 18

Ross and I are organizing a Usability (and Accessibility) Tweetup in Ann Arbor on Saturday evening, July 18th. Hope you can join us!
  • What: “Usability Tweetup”
  • When: 7pm, Saturday, July 18, 2009
  • Where: Ann Arbor Brewing Company in downtown Ann Arbor [Google map]
  • Why: To discuss web usability, web accessibility, Twitter; socialize; drink beer