In which we design for people who use keyboards, and other non-pointing devices to navigate websites.

This article originally appeared in the fortnightly Inclusive by Design newsletter, a 5-minute piece of thoughtful and actionable advice on accessible and inclusive practices that I ran between June 2019 and May 2020.

One letter at a time

746 words about professional — 07:00 · 5th Nov 2019

Many years ago, back in Finland, I used to work with people with permanent mental and physical disabilities.

By supporting and helping people live independent lives I got to know some of them quite closely.

One of my favourite people was a young man named Daniel.

He was born with cerebral palsy and communicates using Blissymbols.

Blissymbols is an ideographic communication system of several hundred symbols. Each symbol represents a concept and they can be combined to create new concepts.

For Daniel, Blissymbols was his way of being able to talk to people.

About 1 in 440 people have cerebral palsy, a name used to group a number of movement and coordination impairments that appear in early childhood.

At 17 million people worldwide, that’s the equivalent of the entire population of the Netherlands.

Daniel needs help to do most daily activities, such as eating, dressing and going to the bathroom.

Browsing the web, letter by letter

To use a computer, he has a large red clicking device attached to the back of his wheelchair behind his neck, which allows him to browse the web and create digital art.

We got to know one another because I was teaching him design and coding.

To navigate the web Daniel would call up a virtual keyboard which then cycled through each letter in the alphabet.

A, pause, B, pause, C, pause, D, pause, E, pause, F, pause, G, pause, H, pause, and so on.

Once he selected a character, the software would start the cycle all over again.

A, pause, B, pause, C, pause, D, pause, E, pause, you get the idea.

Letter by letter he would type out the web address he wanted to visit.

Daniel would often finish typing the address only to have the browser return its default error page instead of the website he was after.

Most websites back then, and still to this day, - don’t redirect from the www subdomain or - don’t set the canonical name to their non-www URL.

He would then have to start over from the beginning, typing out each www before the address.

Daniel has more patience in a day then I will have in a lifetime.

It’s important to remember that Daniel is part of a large and diverse group of people who - don’t use a pointing device like a mouse but instead, use different devices for different reasons.

Frankie is a dead skeleton sat in a wheelchair in front of their computer whilst a rat is eating their toe bones. Illustration by Carlos Eriksson.
Daniel shouldn’t have to be this patient.

Take action

When designing for people who use keyboards, the first advice shouldn’t surprise you—at least not anymore:

  • Don’t make www required in the web address, instead automatically redirect people to your canonical domain name
  • Don’t remove focus states, instead make it clear which link or interactive element people are on
  • Don’t make dynamic content that requires mouse movement, instead design for keyboard-only use
  • Don’t have short time out windows, instead give people clear ways to restart your timer
  • Don’t tire users with lots of typing, scrolling or tabbing, instead provide shortcuts, such as a ‘skip to content’ link
  • Don’t spread content all over a page, instead make sure that focus order matches the visual layout

There’s an easy way of testing your focus states right away, browse to your website and use the Tab key and Shift + Tab to navigate through links and interactive elements.

Can you tell where you are?

Can you navigate to another page using only your keyboard?

If you can’t browse your website this way then Daniel wouldn’t be able to either.

Let me know how it went.


Know someone who would benefit from this article? Share it with them.

You’ve just read One letter at a time.

In which, 5 years ago, I wrote 746 words about professional and I covered topics, such as: accessibility , inclusive design , and superdupercritical .