Field note 45/ Web Design
Can Customers Use Your Website Without a Mouse?
Check whether customers can navigate your website without a mouse. Find focus, menu, dialog and form barriers, then turn them into clear fixes.
A visitor opens a service page, finds the right offer and reaches the booking button. With a mouse, the next step looks simple. With a keyboard, the same button might be skipped, lose its outline or open a window the visitor cannot close.
You can look for those barriers without reading the site's code. Choose one customer task and work through it using a keyboard. The goal is to find exactly where someone gets stuck, then give the person maintaining the site enough detail to fix it.
Keyboard access matters to people who cannot use a mouse, including some people with mobility or vision impairments. W3C's keyboard guidance explains why website functionality needs a keyboard-operated route. A quick check will not establish that the whole site is accessible, but it can uncover a broken path to an important service.
Start with one real customer task
Pick a task with a clear beginning and end: find a service and reach its inquiry form, choose a location, or open and close an appointment window. Start on the page a customer would actually use, which may be a service page rather than the homepage.
Use a test environment for submissions where possible. Agree on any live form test with the team first, use clearly labeled synthetic details, and avoid creating a real booking or payment. For an initial check, you can inspect navigation and controls without completing a transaction.
Record the browser, operating system and page address. If Tab skips links everywhere, check the browser's keyboard-navigation settings before deciding that the site is broken. Some Mac configurations need those settings enabled.
Learn the small set of keys you need
Tab usually moves forward between interactive controls, and Shift+Tab moves back. Enter activates links; standard buttons normally respond to Enter and Space. Arrow keys commonly move between choices in radio groups and between tabs in a tab list.
Do not expect Tab to stop on every paragraph or every option inside a complex control. W3C's keyboard-interface guidance distinguishes movement between components from movement inside them. For an unfamiliar date picker or other widget, check its instructions and the relevant interaction pattern.
Keep track of the focused control
Keyboard focus identifies the element that will receive your next keyboard action. As you move, you should be able to identify it visually: perhaps through an outline, underline or other clear change. A hover effect that appears only when a mouse is over the control does not show a keyboard user where they are.
Pause on the main inquiry button, navigation links and form fields. Does the indication remain visible? Can you distinguish it against both light and dark backgrounds? W3C's Focus Visible explanation describes this requirement.
Also watch what happens near sticky headers, cookie notices and floating chat panels. These layers can cover the focused control. WCAG 2.2's Focus Not Obscured minimum criterion addresses controls entirely hidden by site-created content. Keeping the whole control visible is a better design target than barely meeting that minimum.
Follow the order, not just the outline
Move from the main navigation toward the action you chose. The sequence should make sense for the task. Unexpected jumps between unrelated parts of the page, or focus landing inside a visually closed panel, are useful problems to record.
A sensible sequence does not have to match the visual layout in one rigid way. W3C's Focus Order guidance allows different orders when they preserve meaning and operation. The practical question is whether a visitor can understand where they went and continue.
If every page starts with a long navigation menu, look for a way to bypass it. A working “Skip to content” link can provide that shortcut. W3C describes this purpose in its Bypass Blocks guidance. Activate the link and check where the next Tab takes you; a visual scroll alone is not enough evidence that the keyboard journey improved.
Try the controls you would normally click
Open the service menu, expand a question, change a selection and reach the main action. If information appears only on hover, check whether there is a keyboard route to it. Pay particular attention to custom controls that look like familiar buttons.
For the development team, native HTML is a useful starting point. MDN documents that the HTML button element supports keyboard activation. A custom-looking design can still use a native button. Styling a generic container to resemble one does not, by itself, give it the same behavior.
Check that you can leave what you opened
A modal window needs its own test. Open it from the keyboard, check that focus moves inside, move through its controls, then close it without reaching for the mouse. After closing, focus should normally return to the opener or another logical next step.
It is expected for Tab to stay within an open modal. That is different from being stuck with no keyboard exit. W3C's modal-dialog pattern describes contained focus, Escape to close and focus restoration. Its separate No Keyboard Trap guidance explains the need to leave a component using the keyboard.
Include one form error
In an agreed safe test, leave a required field empty and try to continue. Can you find the message, understand what needs correcting and return to the relevant field? A red border alone gives too little explanation.
W3C's form-notification tutorial recommends clear feedback that identifies errors and helps people fix them. A sighted keyboard check can reveal part of this experience. Whether a screen reader announces the error appropriately requires separate testing.
Turn the result into a repairable issue
Write down the page, starting state, exact keys pressed, expected result and actual result. For example: “On the service page, Tab reaches Request a quote. Enter opens the dialog, but focus remains behind it and the close button cannot be reached.” That is a hypothetical report, not a finding about a particular client website.
Include a short recording if useful, plus the browser and operating system. Prioritize barriers that stop the chosen customer task, assign an owner, and repeat the same steps after the change.
Finally, keep the scope honest. W3C's Easy Checks warns that a page can pass a preliminary review and still have significant accessibility barriers. Keyboard checks belong alongside screen-reader, zoom, contrast, content and other evaluation work. They are a practical place to start, with a concrete outcome: a customer can take the next step without needing a mouse.