It’s possible to navigate and use a website without a mouse, using only a keyboard. You can use the tab key to move between focusable elements, like a link in a menu, a button to open a modal or an input field in a form for example.
Who uses keyboard only?
The most obvious group is people with a motor impairment, with rheumatism or Parkinson’s disease. But also hardcore developers or people who temporarily cannot use a mouse because of injuries. It’s a diverse group of people.
When you, as a developer, decide on how the keyboard focus should behave, make sure you don’t create a keyboard trap. What is a keyboard trap?
Quoting the Eagles:
“You can check-out anytime you like, but you can never leave.“
According to the Web Content Accessibility Guidelines: 2.1.2 No Keyboard Trap
“If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.”
With a keyboard trap, you can enter but not leave a component with a keyboard only. This happens for example when the focus is moved back to the first focusable element in a component when the user reaches the last one.
If the focus needs to stay in a component, like a modal, always provide users with a way to leave. For example: add a close button and also the option to use the escape key to close a modal.
That’s why it is important to always keyboard test your component and don’t assume it will probably be ok.
Do you want to learn more about this? In our course Web Accessibility the basics, you will learn how to use a website with a keyboard only. The course Accessible code addresses focus management and keyboard testing.
