Web Layouts For Keyboards

Since the birth of the web, website design has been driven by its visual aesthetic. As the web moves forward, design trends ebb and flow like the tide.  With each passing trend, it influences what comes next. In recent years, content strategy has somewhat impacted design. As an industry, we’ve taken things we’ve learned from the graphic design and publishing industries, and applied it to the web. What we haven’t done enough, is to add value, to create capabilities that make the web unique. One such area is navigation by keyboard.

Think about the applications on your computer. Whether you’re using Mac, Windows, or Linux, you can use the keyboard to navigate it’s menus and it’s data. So far, the web industry, has failed in this respect. We need to start thinking about designing for keyboard navigation. By default, links and forms fields can be navigated to by pressing the TAB key to move forward, and SHIFT+TAB to go backward. Pressing the ENTER key will go to the focused link or submit a form. There’s so much left that we could do. For example if we want to navigate from the main section to the sidebar, the user shouldn’t have to tab through a long main section just to get to the sidebar. Moving between landmarks should be easy.

As designers and developers, we use keyboard shortcuts all the time in the desktop applications we use. They create efficiencies for us. It’s much faster in most cases than using a mouse. Vim is an editor that is specifically designed to not need a mouse. Developer love it because they can keep their hands on the keyboard. Switching back and forth between keyboard and mouse greatly slows them down. Yet we ignore the possibility of adding keyboard shortcuts to our websites. I do find it a little odd that we haven’t created keyboard navigation in our websites. Are we not users of our own websites? Why wouldn’t we want keyboard navigation in our own websites – even if only built it for ourselves. Maybe we need a place to start.  Perhaps what we need, are some ideas for keyboard navigation conventions. Here are some ideas:

• CTRL+0 (zero) = to bring up a help box.
• CTRL+1 = Site search
• ALT+Left = Previous Landmark
• ALT+Right = Next Landmark