Interactive Web content functions with both mouse and keyboard

To ensure all functional elements on the Web (e.g. links, buttons, forms, interactive widgets) are accessible, they must operate with both a mouse and a keyboard. Many people cannot use a mouse, and some power users may prefer to use a keyboard for efficiency with repetitive tasks, for instance.

When functional elements lack keyboard operability they can create insurmountable barriers for people who cannot use a mouse and reduced usability for those expert keyboard users. A person who is blind is very unlikely to use a mouse (though it’s not impossible). This seems obvious, yet missing keyboard functionality is a very common barrier. Developers are often mouse users themselves, and it may not even occur to them that some people can’t use a mouse.

An easy way to check for keyboard accessibility is to navigate through a page using only the Tab key. Any functional elements that do not receive focus when navigating with the Tab key are probably going to be inaccessible to many people.

In the Accessibility Maze you would have had a similar experience getting through Level 4. In the game you use the keyboard throughout, which may be new to you if you’re a typical mouse user, but then suddenly the keyboard no longer functions.

When you reached the room with the bubbles, you may have experienced a “now what?!” moment. Your keyboard no longer worked, and there was no tool or device in the level to pop the bubbles. You eventually figured it out, perhaps even before the clues, but that moment would have been much like that which a screen reader user experiences when encountering an interactive element on a web page that only functions with a mouse. Perhaps some confusion, maybe even anger sets in. Screen reader users will have these moments often.