Be Kind to Keyboard Users, Use a Tab Index

There are many ways to navigate a website these days, especially on mobile where you can swipe, pinch, and touch. But what about the people on Desktops that use keyboards? Let's be nice to them. One trait of seasoned computer users that I've seen is that they start to use their mouse less often and rely more heavily on keyboard shortcuts.

When it comes to reading websites, you can scroll with your arrow keys, but what about jumping to relevant sections on a web page? You could use the PgUp and PgDown keys on your keyboard, however many people now use laptops, and those keys are buried in a Control/Function-key combination, so I doubt they get much use (I don't have data on this, it's merely from my own experience).

Using PgUp/PgDown keys or arrow keys doesn't fit the natural reading experience intended on a web page. Instead, the web developer or designer should focus on allowing the user to jump to a section of interesting content on the page. This is where the tabindex HTML attribute comes in.

Let's say you have a number of headings (h1, h2, h3) in your web page that a user is going to read. You add a tabindex=N into their tags, where N > 0. When the user presses the Tab key, the browser will jump to tabindex=1, another keypress will jump to tabindex=2 and so on. Pressing Shift-Tab will reverse the direction.

<!DOCTYPE html>
<html>
<body>
  <a href="">Company Logo - I get called last</a>

  <h1 tabindex=1>Page Title - I get called 1st</h1>

  <h2 tabindex=2>Most Relevant Section - I get called 2nd</h2>
  <h2 tabindex=3>2nd Most Relevant Section - I get called 3rd</h2>
  <h2 tabindex=4>Least Relevant Section - I get called 4th</h2>
</body>
</html>

This HTML attribute has been around for a very long time, and yet I've never seen it used. Not using this attribute also has an effect on the reading experience for users. In this regard, when the user presses the Tab key, the browser will jump to the first anchor (<a>) on the page, and proceed to the next. Since most pages are constructed with a navbar, this takes the user to the company logo or the first menu item. This may be the intended experience, but it's doubtful.

Nowadays many pages use CSS to completely restructure web pages (using float: right, for example), making the first anchor on the page anyone's guess. This is why you can press the Tab key and have it take you to anywhere on the page, jumping around without no context. That's a terrible experience for the user.

On this website, I want users to be taken from the top to the bottom, going from left (content, new and historical) to the right (links and metadata). If I started floating CSS divs around, I'd start using tabindex to force the user's experience to fit my original model. Thinking about how the user navigates your page is just one part of the overall design of a website.

Try it out and let me know how it goes. Maybe you'll make some of your more advanced users happier when they read your website.