Visual tab interaction

Recently I asked my students to design and build a user interface that’s a pleasure to use for real people with real disabilities. They designed an interface that worked either for Larissa who is blind, for Marie who is Deaf, or for Marijn who is motor disabled. My students had two sessions with Marie and Larissa. In the first one they met each other, and they were able to ask questions about how they use the web. They observed how they use their computer and talked about the hurdles they faced. In the second session they tested the interfaces my students designed. Unfortunately I did not manage to organise such a session with Marijn.

Instead I did a session with my students where I tried to answer their questions as well as I could. I do know Marijn personally, so I assumed I could answer quite a few questions. Of course this turned out to be not true at all.


One of the things I got wrong was the assumption that Marijn would use his tab key a lot to navigate websites. When I met Marijn a while ago we did discuss how he uses his computer, and since he told me that he prefers to use his keyboard I assumed that he used his tab key a lot.

So all my students designed their interfaces for Marijn to work pleasurably when you tab through them. They designed very clear focus states, they thought about tab order and skip links that make sense, and they experimented with things like :focus-within. And many interfaces were enhanced with pretty focus-transitions.

The first thing we noticed when Marijn tested the prototypes was that he doesn’t use the tab key at all. He uses the arrow keys to scroll, and he uses the large track pad of his Macbook Pro to click on links and buttons.

Very interesting to see again that indeed assumptions are still the mother of all fuckups. And very interesting to see that using a keyboard is more than just using the tab key.

Visual keyboard interaction

Later I did discuss this with Marijn. I told him I assumed he would use him tab key a lot. And he told me he does use his tab key in applications he uses a lot. And he would love to use it on the web as well, but he doesn’t: on most websites the tab key is broken, and this has been the fact for years now. With a bit of luck you may see the default browser focus styles when you tab through the interactive items on a page, but more often than not these are disabled and there is no visible clue at all of where the focus is. Just try it for a few hours. It’s impossible.

What to do with this knowledge? Should we simply give up? Should we accept the fact that we basically destroyed tab key functionality by actively ignoring it for so long, for whatever reason. That’s an option. We could observe how people like Marijn navigate through web interfaces and then come up with innovative ideas to enhance the experience.

I think that’s a good idea. There’s much more to keyboard navigation than just tabbing.

But I also think it’s a good idea to keep designing interfaces for visual tab key interaction. Because tabbing through an interface with well designed focus states really feels good. Try it.

Join the discussion

On topic? Friendly? Excellent!