Designing for Accessibility: When your user is only using a keyboard

In episode 020 of The Crux of It, we go into some next-level nerd territory and talk about keyboard-only accessibility.

Get the text transcript of Episode 020


episode Summary

Recently, we redesigned our own website and in the process of doing that, and in collaborating together on balancing user experience and visual design and thinking about accessibility, we learned quite a bit about keyboard-only accessibility.

It started when our developer initially presented a design solution that we had a negative reaction to in terms of how it looked visually. He told us what we were responding to was an accessibility requirement and once we dug in, we really learned a lot about focus accessibility and what it is.

When you design for accessibility, it really means you're designing for all people. So you want to make sure that the user can navigate through the content, clearly read the content, making sure you have contrast.

You need to ensure that whether someone is using a standard input device like a mouse or keyboard or whether they're using something to assist them like a screen reader, magnification software, speech recognition software- that they can interact with your site. One of the ways that people interact with sites is by not using a mouse at all, by using keyboards only.

First, let's talk about what the typical user may be that is a keyboard only user. You'd be surprised. More people than you think are controlling navigation via the keyboard.

Some users that we can think of are users that may have tremors, they don't have that fine muscle control of their hand, so it'd be very difficult to use the mouse. This is common in the condition like Parkinson's.

You can also think of the elderly population, limited dexterity. When you have arthritis in your hands, your fingers don't move, it'd be very hard to grip a mouse and have that fine control when you're navigating through a site.

So it's much easier to use a keyboard. Alternately to using a mouse when you're moving around and clicking on things, how does the user navigate via the keyboard? They're using the tab key.

So you need to really be aware of how you're designing the site so as to not cause hardship or issues for them to make their way through the site to the information that they need.

Some of the most common issues and things that can go wrong are:

  • Your navigation becomes too lengthy and just impossible to get through.
  • The order of your navigation is poorly thought-out, it doesn't make sense.
  • Or focus indicators: you don't have them or they're poorly executed.

What are focus indicators? They are how the user going knows where they are as they're tabbing through your site.

As point of clarification, what they are tabbing through are the interactive elements of the site. So:

  • the navigation
  • the menu at the top
  • links
  • buttons
  • things like expandable menus
  • accordions
  • input fields
  • anything that they could then hit the enter key and it would take them somewhere

It's in lieu of that mouse click that helps them advance. It's a tab enter to navigate. Sighted users who are doing this are going to be given a visual indicator and that's the focus element. By default, a browser actually shows a focus state and the default focus state is an outline around an object that is keyboard focusable. However, it’s apparently very popular to override it. So, if you're looking on a website and you're tabbing and you're not seeing anything- that’s why.

So we wanted to dig a little deeper. We feel that you can find a balance in both being visually appealing and meeting the needs of accessibility. Where we ultimately landed was doing something pretty similar to what the default browser is and choosing that one because it's familiar to users, but then we also modified it to make it work best for our site.

Some of the things that we did:

  • we enlarged the size of that border
  • we made it have more weight
  • we also made sure that the color that we chose passed contrast (that's another important part of accessibility)
  • we also chose to remain consistent

Consistency is super important and we talk about this all the time. With visual design, you're speaking a language and the user is learning that language when they learn your site. We talk about link language, they can expect that links always look the same or navigable elements look the same. Or you select the color and they're cued into that color. So we didn't want to now introduce five new words into the language but just have a single consistent one that says this is your focus area.

It was really fun for us to explore keyboard only accessibility and we wanted to share that we really enjoyed digging into, learning about, playing around with, coming up with a solution for our site and really look forward to applying what we learned on our own site now to the experiences that we're designing.

Did you enjoy the podcast?

You can subscribe to the Crux of It podcast via iTunes, SoundCloud, Google Play, or Stitcher.

Related Insights