Dave DaviesFrontend Developer, Zengenti · Frontend Developer at Zengenti

What's a Keyboard Trap? (and why it matters on your online store)

17 Oct 2025 · 1 min

Watch on YouTube

1:06

A keyboard trap happens when you tab into a form field but can't tab back out, forcing you to use Escape instead. On an e-commerce site's discount modal, this blocks keyboard-only users from completing the form. Any interactive element must let users tab out to keep navigation accessible.

Chapters

Today I want to show you a keyboard trap that I found on this website. When you first load up the page, it gives you this nice modal that offers 10% off your first order. But if I tab into the email address field, I can't tab back out again, which means I'm now stuck. Even if I've added a valid email address, it doesn't let me get out again. Now, as a keyboard user, that now puts me at a disadvantage because I can't fill out this 10% off my first order. I can get out of the modal by pushing Escape, but it just adds another level of frustration when you're trying to buy something. So if you're looking on your own website, You want to make sure that if you can tab into any field on your page, then you need to be able to tab back out again.