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

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

guidelines heading usability wcag2

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.

event twitter usability

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
cognitive design usability

7 tips for designing for older users

Although the article from webcredible is titled “7 tips for designing for older users“, the strategies are great for plain old usability and accessibility. Here is a summary with some comments.

  1. Make obvious what’s clickable and what’s not. (Please don’t mess with the underlines!)
  2. Use radio buttons rather than dropdown menus. (Unless you have over, say, 8 options.)
  3. Stay in one window.
  4. Implement the shallowest possible information hierarchy. (And forget 3 or 4-level cascading menus; they are also difficult to navigation with our without a mouse.)
  5. Include a site map and link to it from every page. (Also good for SEO.)
  6. Keep your language simple.
  7. Appear trustworthy.
articles heading usability wcag

WCAG 2 and Usability articles lack subheadings

Below are two articles on web accessibility. Unfortunately, both articles are lacking subheadings, which would make them much more scannable and usable, and therefore better accessible (see Understanding WCAG 2.0 Section Headings).

Organisation in the Spotlight – W3C: Global Standards Giant Gears Up For Battle

With the long-awaited appearance of version 2 of the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) now expected in December, the spotlight is set to fall once more on the workings of this key international standards body.

Accessibility in web design provides a high degree of usability

While the focus of this section is largely on design for blind users who access the web page via a screen-reader, if you make pages accessible in the ways suggested you will improve clarity for all users.