Day 7 – Don’t Touch That Mouse!

The Challenge

The Challenge for Day 7 was to unplug the mouse and use only the keyboard.

I’ve unplugged the mouse for about 3 hours. Now, I am a person who likes using the  keyboard and still, not using a mouse at all was a very interesting experience. I know the WCAG guidelines about keyboard navigation, but feeling them in practice really adds value.

A couple of computer mice on desk
Mice, unplugged

Feeling WCAG criteria in action

In this post I wish to mention a few points from WCAG that as I felt them during this experiment. In the brackets in the success criterion number.

  1. Focus Visible (2.4.7) – Well, the first problem is that you start using the “Tab”, and nothing happens on the screen. Very frustrating! Only after many “Tab” key hits you see that screen scrolls down, and still not sure why or where you are focused. This is caused by designers wish to get rid the the ugly focus ring. However, the problem is that they disable it instead of designing it to look better.
  2. Bypass Blocks (2.4.1) – Another thing you notice very quickly, is that even if the focus is visible, it takes many keystrokes to pass by all the top menu navigation and reach the main content. This is the reason that “skip to” links at the top of the page are required. They enable the user to reach areas of the page without having to go over all the main navigation, which typically repeats on every page of a website.
  3. No Keyboard Trap (2.1.2) – Wow, that’s a hard one. Especially when combined with the above two issues. I actually found one on Facebook. I tabbed a lot through most of the page, hardly seeing where the focus is, and then – trap! I got stuck on a link and no matter how many time I hit “Tab” focus didn’t move anywhere.
  4. Focus Order (2.4.3) – This is also really annoying. I found pages where the first few “Tab” strokes throw you to the middle of the page to some new items. Only after that focus goes to the top menu navigation. Well, this is no way to “skip to main content”. As a user I expect to navigate the page in the natural reading order: top left to bottom right (or top right to bottom left, like some sites in Hebrew which I tested).
  5. Elements change on the screen (I’ll update the exact success criterion later, please tweet me if you find it). This is also a problem I noticed on Facebook. While I was navigating my feed, more posts would load and the page would change in a way that my focus would jumps unexpectedly.

Summary

It’s a great experience! I recommend you try it yourselves (and share your thoughts).