Accessibility & ARIA

My Contact Form Works with a Mouse but Not with a Keyboard — How Can I Fix It?

09/10/2026
My Contact Form Works with a Mouse but Not with a Keyboard — How Can I Fix It?

You open your website, fill in the contact form, and submit it using your mouse.

Everything works.

Then someone tells you they can’t complete the same form using only a keyboard.

You try pressing Tab and discover that the focus indicator disappears. Perhaps the submit button cannot be reached, or the form’s error message isn’t easy to find.

The problem isn’t necessarily the form submission code. It may be an accessibility issue in the way the form is structured or how its controls behave.

1. Test the form without using your mouse

Open the page and use:

  • Tab to move forward.

  • Shift + Tab to move backward.

  • Enter or Space to activate appropriate controls.

Try completing the entire form.

Can you reach every input? Can you select checkboxes? Can you activate the submit button? Can you tell which element currently has focus?

If not, record the exact step where navigation fails.

2. Make sure every field has a proper label

A placeholder such as “Enter your email” is not always an adequate replacement for a persistent, programmatically associated label.

Use HTML like this:

<label for="email">Email address</label>
<input id="email" name="email" type="email">

This associates the label with the input.

The W3C Web Accessibility Initiative’s forms guidance recommends properly identifying form controls and providing useful instructions.

3. Make keyboard focus visible

Visitors need to see which field or button is currently selected.

Don’t remove focus outlines without providing a suitable alternative.

For example:

:focus-visible {
  outline: 3px solid #1769ff;
  outline-offset: 2px;
}

Adjust the styling to suit your design, and check that the outline is visible against the surrounding background.

4. Check custom buttons

A native HTML button is keyboard-operable by default:

<button type="submit">Send message</button>

However, some websites use clickable <div> or <span> elements styled to look like buttons.

These may work with a mouse but fail to behave like proper buttons for keyboard users.

Use native interactive HTML elements wherever possible instead of recreating their behaviour with JavaScript.

5. Make validation errors understandable

Imagine a visitor submits the form with an invalid email address.

A message appears in red, but the visitor cannot tell which field has the problem.

A better form should:

  • Identify the field containing the error.

  • Explain how to correct it.

  • Associate the message with the relevant field.

  • Preserve entered data when possible.

  • Make the error discoverable to assistive technology.

Don’t rely on colour alone to communicate an error.

6. Check what happens after submission

After a successful submission, does the form display a confirmation message?

If validation fails, can the visitor find the first invalid field?

If the page reloads or displays a message at the top, is that change easy to discover?

These details matter because keyboard and screen-reader users may not receive the same visual cues as mouse users.

7. Don’t rely entirely on automated tools

An automated accessibility audit can flag some missing labels, contrast issues, and structural problems. However, it won’t necessarily tell you whether the complete form is easy to use.

Manual testing is essential.

Try the form using only a keyboard, then test with a screen reader if possible.

Accessibility checklist

  • Every field has an associated label.

  • Focus is visible.

  • Focus order is logical.

  • Every control is keyboard-operable.

  • Required fields are identified.

  • Error messages explain how to fix problems.

  • Errors are associated with the relevant fields.

  • Submission feedback is clear.

  • The form works on mobile.

  • Keyboard and screen-reader testing are performed.

Final thoughts

A contact form isn’t truly usable just because it works when you click through it with a mouse.

Test the entire process—from the first input to the final confirmation—and make sure visitors can understand, navigate, and complete every step.

SiteAuditScan can help you identify accessibility issues worth investigating, while manual keyboard testing helps confirm whether the form works for real users.