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 we discover when we’re working with teams to make their sites or applications more accessible. In recent projects, we’re 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


  • 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. We’ll talk about that in another post.).


  • 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!

2 thoughts on “How to be a keyboard accessibility super hero”

Read comments

  1. Stomme poes says:

    Most of these are doable with little work.

    The bigger problems are widgets and scripts, for example Google widgets.

    I’ve crawled through jQuery plugins to make edits to make things work, but then you can never update/upgrade unless the plugin dev will work with you (the writer of the Rate-it star-rating jQuery plugin is totally awesome, he even checked in VoiceOver after rewriting his plugin!).

    I think once the majority of devs are keyboard-aware, that’s the next big hurdle.

Hi there! We've closed the comments after a week of spirited discussion on this post. If there's something we've missed, please reach out and let us know.