James' story
Navigating the web with a keyboard only, and the invisible walls most teams build by accident.
Barriers encountered
No visible focus indicators
The barrier
James is shopping for headphones online. He tabs through the page, but nothing happens visually. He knows he's moving through elements (the screen reader confirms it) but he can't see where he is. Is he on the search bar? The first product? The shopping cart? He has to guess and press Enter to find out. He accidentally adds the wrong item to his cart twice.
Jeikin catches it
Jeikin detects that interactive elements have outline: none or outline: 0 without a replacement focus style. Keyboard users cannot see where they are on the page.
The fix
Add visible focus indicators to all interactive elements. Use outline with offset for clear visibility that doesn't overlap content.
outline: 2px solid #2563eb; outline-offset: 2px;After the fix
James tabs through the page and sees a clear blue ring around each element as he moves. He navigates to Products, browses headphones, adds the right pair to his cart, and checks out. No guessing.
Keyboard trap in a modal dialog
The barrier
A cookie consent popup appears. James reads it, decides to accept, and presses Tab to find the button. But Tab cycles between two links inside the popup endlessly. He can't reach the Accept button, and he can't close the popup. Pressing Escape does nothing. He's trapped. The entire website is blocked behind a dialog he can't dismiss.
Jeikin catches it
Jeikin flags the modal as a keyboard trap: focus cannot leave the dialog using standard keyboard navigation, and there is no mechanism to dismiss it.
The fix
Add a visible close button, bind the Escape key to dismiss the dialog, and manage focus so Tab cycles through all interactive elements including the close and accept buttons.
After the fix
The cookie dialog has a close button with a visible focus ring, Escape dismisses it, and Tab reaches every button. James accepts cookies in one keystroke and moves on.
No skip navigation link
The barrier
Every time James opens a new page, he has to Tab through the entire navigation: logo, Home, Products, About, Contact, Search, Cart, Account. That's **15 Tab presses** per page load. On a site with many categories, he ends up pressing Tab over 40 times just to start reading. His wrists ache more on days when he browses sites like this.
Jeikin catches it
Jeikin flags that the page has no mechanism to bypass blocks of repeated content. Keyboard users must navigate through the entire header on every page load.
The fix
Add a "Skip to main content" link as the first focusable element on the page. It's visually hidden until focused, then appears prominently.
<a href="#main-content" class="skip-link">Skip to main content</a>After the fix
James presses Tab once and sees "Skip to main content" appear at the top. He presses Enter, lands directly on the product listings, and starts shopping. His wrists thank the developer who added one line of HTML.
What changed for James
- Focus indicators visible on every interactive element. James always knows where he is.
- Cookie dialog is dismissible with Escape and has a reachable close button. No more traps.
- Skip link lets James bypass navigation with a **single Tab press**. Less strain, faster browsing.
WCAG criteria addressed
Catch barriers like these automatically
Jeikin finds accessibility issues and explains them in plain language, so your team can fix what matters.
npx jeikin initStart for freeBy signing up, you agree to our Terms of Service and Privacy Policy.