How to be a keyboard accessibility super hero

Three simple things you can do to improve keyboard accessibility in your web page or application. Think links and buttons, focus and source order.

You too can be a keyboard accessibility super hero if you do these three simple things really well. The best part is, you don’t even have to work that hard to do them and they make you look brilliant!

Zero keyboard access is one of the most common issues I discover when I’m working with teams to make their sites or applications more accessible. In recent projects, I’m finding anywhere from 20% to 30% of the total issues are keyboard related (yes, I did actually check the stats on this). The bottom line is that keyboard access is a requirement for so many different people with and without disabilities to use the web. It doesn’t matter if you’re using a physical keyboard, or some kind of keyboard emulation (think voice recognition software) or an onscreen keyboard. It all boils down to the fact that keyboard accessibility is a must have.

Make keyboard access a non-issue

Developers

• When an interface component is clickable, make it a link or a button. You get all kinds of accessibility for free that way. There’s no extra work because links and buttons are keyboard accessible by default.
• Get rid of clickable spans and divs. That’s a huge win and you hardly had to work for it. In fact, that’s you being an accessibility super hero (“But, frameworks!” you say. Yes, I know. I’ll talk about that in another post.).

Designers

• Design specific focus states for the keyboard user so they can see the active component on the screen. The cool part is, you’re already designing thoughtful hover states, so take that same level of care into designing your focus states too.
• Here’s a hint: when you make something happen with a hover, make it also happen with a focus. More often than not, you’ll be right. Another huge win that you hardly had to work for, and—yes—you look like a super hero.

Designers & developers

Here are few tips for designers OR developers (or, if you’re that rare double hero… devigner!) to make keyboard access a little easier.

• Think about your source order, and let it dictate the flow of the application or interface.
• Talk to each other (or yourself if you’re both): The mere fact that a designer and developer talk to one another is already awesome.

You’re already heroes if you’re doing these things. But if you can collaborate and actually work together on determining what an optimal source and keyboard flow is… well, can I just say, prepare yourself for the graphic novel, video game, and big screen movie franchise opportunities.

Source order and linear flow matter a whole lot to a keyboard user. You’ll be the hero-est of all super heroes. That’s what you’ll be.

That’s it. Seriously. If you do those three things you get most of the way there. You didn’t have to work that hard, you made new friends, and you saved the day like any good hero would. Go. Be a keyboard accessibility super hero!