Just In Time 4 Tech justintime4tech.fyi ← all guides

The Field Manual

Make your forms keyboard-accessible

A form your visitor can't navigate by keyboard is a closed shop with the lights on — and forms are where people actually try to do something. The fix is among the easiest in web work: a twenty-minute test with your mouse put away, and a handful of small changes. Here's the doing.

Just In Time 4 Tech · The Field Manual — the doing, not just the why

Of all the doors that get stuck on a website, forms are the most common — and the most consequential, because a form is usually where someone is trying to do something: contact you, sign up, buy. A form a keyboard user can't navigate isn't a minor flaw. It's a closed shop with the lights on. The good news: forms are also one of the easiest things to fix, and you can test and repair most of it in well under an hour, no rebuild required.

Here's the whole idea before the steps: some people navigate entirely by keyboard — Tab to move forward, Shift+Tab to move back, Enter or Space to activate. People with motor disabilities, many older users, screen-reader users, and plenty of power-users besides. If your form works by keyboard alone, it works for nearly everyone. So that's exactly what we'll test and fix.

Before you start: what you need

You only need these

  • The form you want to fix, open in a browser — a contact form, signup, checkout, anything.
  • Your keyboard, and the discipline not to touch the mouse. That's the whole test rig.
  • Access to edit the page, or someone who can — the fixes are small HTML changes.
  • About twenty quiet minutes. Most forms have two or three stuck doors, not twenty.

If you can fill in and submit your form without ever touching the mouse, so can the people who have no choice. That one test is most of accessibility.

The fix, in five steps

Work through these in order. The first is pure diagnosis — you change nothing until you've felt where it sticks.

Diagnose first

Tab through it, touching nothing else

Click once at the top of the page, then put the mouse away. Press Tab repeatedly. Watch the highlight move. Can you reach every field, checkbox, and the submit button, in an order that makes sense? Note every place the highlight vanishes, skips something, or gets stuck. Those are your doors to open.

The big one

Give every field a real, attached label

This is the single most important fix. Each input needs a visible label programmatically tied to it — in HTML, a <label for="..."> matched to the input's id. Placeholder text alone doesn't count: it vanishes when typing and screen readers may ignore it. A field a screen reader can't name is a field its user can't fill.

Make focus visible

Make sure you can see where you are

As you tab, there should be a clear outline on whatever's selected. If a previous designer removed it (outline: none is a common culprit), put a visible focus style back. A keyboard user who can't see where they are is typing blind. A simple, high-contrast outline is all it takes.

Errors & help

Make errors reachable, not just red

If a field is wrong, don't signal it with color alone — say what's wrong in words, tied to the field, so a screen reader announces it. "Please enter a valid email" beside the field beats a silent red border. An error nobody can perceive is an error nobody can fix.

Confirm

Submit it — with the keyboard only

Tab to the submit button and press Enter or Space. Did it submit? Did focus move somewhere sensible afterward — a success message you can actually find? Run the whole form once more, start to finish, mouse untouched. If you can complete it, you've opened the door.

If you find more than you expected: that's normal, and it's not a crisis. Most forms were built mouse-first by habit, not malice — the barriers are accidental. Fix the labels first; that alone resolves the majority of real problems. You don't have to do all five in one sitting. Every door you open is a person who can now get in who couldn't before.

The one habit that prevents all of this

Once you've done this once, you'll carry a reflex worth more than any checklist: before you call a form done, tab through it. Thirty seconds, no mouse. It catches nearly everything, and it turns accessibility from a thing you audit later into a thing you simply build. The keyboard test is the cheapest quality check in web work, and it happens to be the kindest.

And notice what you're really doing here — not adding a special feature for a special few, but removing barriers that never needed to be there. The form was always supposed to let people in. You're just making sure it does.

▲ The why This is the doing of "Your site should let everyone in" That guide argues accessibility is non-extraction. This is how you open one of the most-stuck doors: forms. Read it →

When you're ready

Want forms that let everyone complete them?

Clean builds with accessibility baked in from the first line — real labels, visible focus, reachable errors, keyboard-navigable everything — so no visitor hits a closed door at the moment they're trying to reach you. Tested by keyboard, the way this whole hub is built.

See privacy & hardening services →