Usability should include accessibility

Merriam-Webster defines "usable" as "capable of being used." Oxford dictionary defines "usability" as "the degree to which something is able or fit to be used." These definitions do not specify who should be able to use that thing, but the implication is that the thing should be able to be used by everyone. Why then, is usability a different field than accessibility? Accessibility should be at the very root of usability.

Accessibility should be at the root of usability. Usability should mean usability for ALL.

I did a quick scan online to find out if anyone had audited any eCommerce sites for usability and found this study by Baynard Institute, on the Top 100 E-Commerce Checkouts. The study is described as "A usability benchmark of 100 e-commerce sites ranked by checkout usability performance."

One would assume that the top players on this list have a decent experience. However, when I checked the top 3 for accessibility compliance, the results were dismal. The top 3 usability winners had the following results of accessibility manual and automated tests:

Accessibility test results:

Crate and Barrel -- Most "usable" checkout experience in Baynard's study

(1) 12 WAVE errors, including missing language, broken ARIA reference, multiple form labels, and spacer images with no alt text (the WAVE toolbar is a tool used to test for code-related accessibility issues on websites).

(2) Manually detected errors:

  • No skip navigation link.
  • Icons without live text (Canadian flag).
  • Focus order is not intuitive — items in the content area get focus before the left navigation items get focus.
  • The navigation menu flyout doesn’t work on keyboard focus the way it does on hover.
  • Awkwardly-coded content blocks with alt attributes read for images when different text is overlaid on top of the images.
  • Color selection carousel doesn’t work properly with the keyboard.
  • Clicking on the Sofa Options select menu actually adds the item to my cart, without the addition being announced!
  • Sliced up comp with embedded text with the same redundant link text on each image slice.

Symantec -- Second place for usability in Baynard's study

(1) 20 WAVE errors including image map with no alt text, empty headings, empty links.

(2) Manually detected errors:

  • No Skip navigation link.
  • Keyboard users must tab through hidden sub navigation links.
  • Focus order is not intuitive; utility links are skipped.
  • Moving video content that I cannot stop.
  • Moving carousel that I cannot stop. Cannot focus on carousel items because they keep moving.
  • The navigation menu flyout doesn’t work on keyboard focus the way it does on hover.
  • Buy Online button launches a popup window with no warning.
  • Find a Symantec partner form doesn’t have form labels associated with fields so it is impossible to fill out.

Autozone -- Third place for usability in Baynard's study

(1) 18 WAVE errors including missing alt text, missing form labels, and empty links.

(2) Manually detected errors:

  • Focus order is not intuitive.
  • Only the first image in the carousel has its alt attribute read.
  • Keyboard trap in carousel. Can’t get out of it once you tab into it.
  • No label for email signup form field. No error message if there is an issue with this field.
  • Decorative icons have descriptive alt text (e.g. Triangle icon).
  • Headings are not descriptive (e.g. 3 for price of 1).
  • Select a store overlay difficult to navigate with keyboard. I gave up.

 In Summary

These sites have been recognized for their high degree of usability when they are not accessible at all. It would not be possible for a screen reader user or a keyboard only user to complete a purchase on these sites.

Usability needs to include all groups accessing the web in a variety of ways. User experience should start with the most basic access to content. An experience should not win accolades if it is not accessible.

Leave a Reply

Your email address will not be published. Required fields are marked *