Welcome back to Leads Not Liabilities.
We’ve covered visual and organizational fixes: Alt-Text, Headings, and Colour Contrast. This week, we’re tackling a function that is vital for securing the most motivated customers: Keyboard Navigation.
When a customer needs an emergency service—a burst pipe, a power outage, a failed furnace—they need to book you fast. But if your website forces them to use a mouse or trackpad, you’re creating a massive, frustrating barrier for a large group of people.
This isn’t about specialized software; it’s about making sure your entire website works perfectly when someone can only use the Tab key and the Enter key to get around.
What is Keyboard Navigation?
For most users, navigating a website means clicking links, scrolling with a mouse, and tapping on forms.
But many of your potential customers—including those with mobility limitations, temporary injuries (like a broken wrist), or even just highly efficient power users—rely entirely on the keyboard. They hit the Tab key to move from one clickable item to the next.
The Test: Open your website right now, put your mouse aside, and start pressing the Tab key.
- Does the cursor jump predictably from your menu to your contact button, then to the quote form fields?
- Does the item you are focused on have a clear, visible border or highlight?
If the answer is no to either question, you have a major functional failure that is costing you leads.
🎯 The Leads Side: Securing the Emergency Customer
This is where the lead generation argument gets urgent.
A motivated customer with a disability or a temporary injury is not going to spend time fighting a difficult website. They need a service provider whose form they can fill out and submit quickly. If your website fails the Tab-key test:
- They Abandon the Quote: They get stuck on a navigation menu, can’t jump to the submit button, or simply lose their place, leading to immediate abandonment.
- Your Competitor Wins: They quickly move to the next service provider on Google whose site works with their Tab key. That’s a high-value job lost.
The Unstuck Advantage: When you implement correct keyboard navigation, you remove all friction from the most critical parts of your site—the Request Quote form, the Contact Us button, and the Phone Number link. You become the simple, effective solution.
🛡️ The Liabilities Side: A Mandatory WCAG Feature
The ability to navigate your entire website using only a keyboard is a core requirement of WCAG 2.1 Level AA. It is non-negotiable.
1. The Focus Indicator (The Missing Border)
When you hit the Tab key, the currently selected element (a link, a button, or a form field) must display a clear, visible outline or border. This is called the Focus Indicator.
- Failure: Many sites eliminate this focus indicator because they think the default browser outline is “ugly.” This is a catastrophic failure. The user has no idea where they are on the page.
- Fix: The focus indicator must be visible, prominent, and high-contrast (just like we talked about with colour contrast).
2. Tab Order (The Confusing Path)
The order in which the Tab key moves through the page must be logical—usually top-to-bottom, left-to-right. If the tab jumps wildly (e.g., from the top menu to the footer, then back to the middle form), the customer is instantly lost. This is a technical failure known as incorrect DOM order (Document Object Model).
Your Expert Blueprint for Keyboard Navigation
This fix requires developer attention, but I give your developer the exact blueprint to get it done fast. They should not be searching through years of code; they should be correcting specific CSS and HTML elements.
Here is the instruction I would include in your report:
Developer Action: Keyboard Navigation Audit (High Priority)
1. Fix Focus Indicator (CSS/Accessibility): Ensure all interactive elements (links, buttons, form inputs) have a visible, high-contrast
:focusstate using CSS (e.g., a solid 2px blue or black border). Do not suppress or remove the default focus outline.2. Verify Logical Tab Order (DOM): Audit the main Service Page and the Contact/Quote Form to ensure the Tab key moves sequentially and logically through all elements (Header → Main Content → Form Fields in order → Submit Button → Footer). Correct any illogical tab jumps based on the DOM structure.
This fix removes a major accessibility blocker, satisfies WCAG requirements, and ensures high-urgency customers can contact me without frustration.
Leads Not Liabilities: Action Item
Take five minutes right now. Go to your “Request a Quote” form. Put your mouse away and press the Tab key repeatedly. Does the indicator stay visible? Does the cursor move smoothly through every single field, including the submit button?
If you get lost or the indicator vanishes even once, send the developer that email immediately. That frustration you feel is the moment you lose a high-value lead.
Next week, I’m wrapping up the core fixes with a critical, but often overlooked, issue: Form Labels and Error Messages (The clear communication fix that gets you the right information).