How to be a keyboard accessibility super hero
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 our most recent projects we’re seeing anywhere from 20% to 30% of the total issues we find as 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.
Here’s how you can make a difference:
As a developer, 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. Take your clickable spans and divs and get rid of them. That’s a huge win and you hardly had to work for it. That’s you being an accessibility super hero. (Yes, I know. “But, frameworks!” you say. We’ll talk about that in another post.)
As a designer, 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.
As a designer OR a developer (or, if you’re that rare double hero… devigner!) put thought into your source order, and let it dictate the flow of the application or interface. The mere fact that a designer and developer talk to one another is already awesome. You’re already heroes if you’re doing that. 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. The hero-est of all super heroes. That’s what you’ll be. Because source order and linear flow matter a whole lot to a keyboard user.
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!