Five AI tools, one keyboard, and the fix

On Thursday I spent an hour doing something I tell every product team to do, and almost never see anyone do. I opened five of the biggest AI tools in the world and tried to navigate them using only a keyboard.

What I found

• ChatGPT took 18 tab presses to reach the left panel navigation. It does have a skip to content link, the only one of the five that does. If skip nav is working correctly you should never need to count tabs at all. 18 presses tells me something in there isn’t quite right.
• Grok took 27 tab presses. No skip navigation anywhere. Most of the elements in the left panel have no visible focus state. You are tabbing through invisible buttons with no idea where you are on the page.
• Claude also took 27 tab presses to get to the left panel and has no skip nav either. To be fair, once you get in, the focus states are clear, the collapsed sidebar works well, and moving through your chat history works the way it should. Best keyboard experience of the five, and it wasn’t close.
• Microsoft Copilot took 28 tab presses. No skip navigation. Similar focus state problems to Gemini.
• Google Gemini took 29 tab presses just to reach the new chat button. No skip navigation.

Four out of five have zero skip navigation. The one that does might not have it working correctly.

None of this is advanced. WCAG 2.4.1 says you need a way to skip past repeated navigation. WCAG 2.4.7 says people need to see where focus is. These are the basics.

Right now a keyboard user can type a message and send it. Everything else requires a mouse.

Then I hit it myself

What I didn’t mention on Thursday is that I was already building a side project. An AI tool. With a left sidebar.

I tested it and hit the exact same problem at 2am.

I fixed it. Here’s what I learned.

Every AI chat product puts focus in the message box when the page loads. That’s the right call. The trouble starts when you press Tab from there. You move through the chat area, and then you’re up in the browser. The left panel sits before the message box in the page code, so you never reach it until you tab all the way around through the browser. New chat. History. Settings. All of it. Either a very long trip or no way in at all.

This keeps happening because the order things sit in the code (the DOM) and the order you see them on screen don’t have to match, and most developers don’t realize it. They put the sidebar first in the code because it shows up on the left. Makes sense. Then focus starts in the middle of the page and the sidebar never gets a turn.

The fix

Put your main panel first in the code. Put the sidebar second. Then use CSS to keep the sidebar on the left where people expect it.

<div class="app">
  <main class="main-panel">...</main>  <!-- first in DOM -->
  <nav class="sidebar">...</nav>        <!-- second in DOM -->
</div>

.app { display: flex; flex-direction: row; }
.sidebar { order: 0; }    /* visually left */
.main-panel { order: 1; } /* visually right */

My first try at 2am was flex-direction: row-reverse. It fixed the tab order, and also flipped parts of the layout I didn’t want flipped. The order property gives you the same tab order and lets you put things exactly where you want them.

Now when focus starts in the message box, Tab moves through the content and then into the sidebar before it ever reaches the browser. In my tool it goes:

1. URL field (where the skip link lands)
2. Audit button
3. Auth settings
4. Results
5. Sidebar history
6. Settings

Nothing looks different to mouse users. Keyboard users can finally reach the whole product.

Why I’m sharing it

I’m not posting this to pile on anyone. These are hard problems, and the teams building these tools are good. I have had the focus conversation with engineering teams more times than I can count. Hard problems still need fixing.

If this saves one team a 2am debugging session, it was worth writing up.

If your product has a left sidebar and keyboard users can’t reach it, this is probably why.

That side project became AccessSpark.

---

The findings first ran on LinkedIn on March 26, 2026, and the fix on March 31. Results reflect those tools that week. They change often, so yours may differ today.