How to Test Your Website Using Only a Keyboard

Not everyone uses a mouse or a touch screen. People with motor disabilities may use a keyboard, a switch device or voice control. Screen reader users navigate largely with the keyboard. Some people simply find the keyboard faster. If any part of your website requires a mouse, those visitors hit a wall.

The good news is that keyboard testing requires no special tools or expertise. Put the mouse aside, and in about fifteen minutes your website will show you where people get stuck.

The keys you will use #

• Tab moves forward to the next link, button or form field.
• Shift and Tab together move backward.
• Enter follows links and activates buttons.
• Space activates buttons, checks checkboxes and scrolls the page.
• Arrow keys move within menus, radio button groups, sliders and tabs.
• Escape closes pop-ups and menus.

A note for Mac users: Safari does not move through every link with Tab by default. Turn on the option to press Tab to highlight each item on a webpage in Safari's settings, or test in another browser. macOS also has a keyboard navigation setting in System Settings that affects some controls.

The test, step by step #

Choose your most important pages first: the homepage, a typical content page, your contact form and any donation, registration or checkout flow.

1. Start at the top #

Load the page, click once in the address bar if needed, then press Tab. The first stop is ideally a "Skip to main content" link, which lets keyboard users bypass long navigation. Press Enter on it and confirm focus jumps to the main content.

2. Watch for the focus indicator #

At every stop, you should clearly see which element is focused, usually with an outline or highlight. If focus disappears, even for a single link, note it. An invisible focus indicator is one of the most common and most disruptive problems.

3. Check the order #

Focus should move in a logical order that matches the visual layout: top to bottom, left to right in English. Jumping randomly around the page is confusing and disorienting.

4. Open the menus #

Try every navigation menu and dropdown. Can you open submenus with the keyboard? Can you reach every item inside them? Can you close them again with Escape?

5. Use every link and button #

Make sure each one can be reached and activated. Watch for clickable elements, such as cards, icons or custom buttons, that the Tab key skips entirely.

6. Fill out a form #

Complete a form using only the keyboard:

• Can you reach every field?
• Do checkboxes and radio buttons work with Space and the arrow keys?
• Do date pickers and dropdowns work?
• If you submit with an error, can you find and understand the error message and get back to the field?

7. Trigger pop-ups #

Open any modal windows, newsletter pop-ups or cookie banners. Focus should move into the pop-up, stay inside while it is open, close with Escape or a reachable close button, and return to a sensible place afterward. If you cannot escape a pop-up, that is a keyboard trap, a serious barrier.

8. Check that focus is not hidden #

Sticky headers, chat buttons and cookie banners can cover the focused element as you tab down the page. If you lose sight of focus behind something, note it.

9. Try media and interactive widgets #

Carousels, video players, accordions and tabs should all be operable with the keyboard, including pause controls for anything that moves.

Record what you find #

Keep a simple list for each problem: the page, the element, what went wrong and how severe it is. Prioritize anything that blocks a core task, such as being unable to submit a contact form or complete a donation.

Retest after changes #

A site that passes today can fail next month. New plugins, redesigned menus, chat widgets and pop-ups often introduce keyboard problems. Repeat this test after any significant change and add it to your regular website reviews.

Common causes and fixes #

Share these with whoever builds or maintains your site:

• Removed focus outlines. Designers sometimes hide them for looks. Restore a clear, high-contrast focus style instead; our guide to color contrast covers visibility.
• Clickable divs and spans. Use real buttons and links, which work with keyboards automatically.
• Unmanaged focus in pop-ups. Move focus into a modal when it opens and back when it closes.
• Overuse of tabindex. Rearranging focus order artificially usually causes more problems than it solves.

Cookie banners are a frequent offender; our guide to cookie banners and consent touches on designing them accessibly. Keyboard access is one of the most important items on any website accessibility checklist, and it is one you can test yourself today.