Can you see where you are? Focus order and Visibility

Have you ever tried to fill out a form on a website using only your keyboard? Maybe your mouse died, or you're working on a laptop with a finicky trackpad. You hit Tab to move from field to field, and suddenly you're jumping all over the page, or worse - you have no idea which field you're actually in.

This is the daily reality for many keyboard-only users, including people who use screen readers, people with motor disabilities who rely on keyboard navigation, and power users who simply prefer keyboard shortcuts for efficiency.

The Standards

Two related WCAG standards address this critical navigation issue:

• 2.4.3 Focus Order - If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
• 2.4.7 Focus Visible - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Put simply: users need to be able to move through your page in a logical order, AND they need to see where they are.

Why Focus Order Matters

The tab order on your page should follow a logical reading sequence - typically top to bottom, left to right in English. When someone presses Tab, they should move to the next logical interactive element: from the first form field to the second, from one link to the next in a navigation menu.

Problems arise when:

• CSS positioning breaks the visual order - Your menu might look right-aligned, but if it's early in your HTML, keyboard users will tab into it before reaching the main content
• Modal dialogs don't trap focus - When a popup appears, focus should move into it and stay there until it's closed
• Skip links are missing - Keyboard users should have a way to jump past repetitive navigation
• Tab order jumps around unpredictably - Custom JavaScript widgets can create confusing navigation patterns

Making Focus Visible

Many designers remove the default browser focus indicator (that blue or dotted outline) because they think it's ugly. This is a major accessibility mistake. When someone presses Tab, they need immediate visual feedback showing which element is now active.

Common focus visibility issues:

• Removing focus outlines entirely with CSS like outline: none without providing an alternative
• Low contrast focus indicators that blend into the background
• Focus indicators that work on some elements but not others - especially custom components
• Focus trapped behind other content - a focused element might be technically on the page but hidden behind a fixed header

Best Practices

For Focus Order:

• Keep your HTML source order logical - CSS should enhance, not reorder
• Use semantic HTML - <nav>, <main>, <form> elements help establish natural flow
• Provide skip links at the top of your page to jump to main content
• When opening modals or dialogs, move focus into them and trap it there until dismissed
• Test with just your keyboard - can you reach every interactive element?

For Focus Visibility:

• Never use outline: none without providing a replacement focus indicator
• If you must customize the focus style, ensure it has sufficient contrast (3:1 minimum)
• Make sure focus indicators are at least 2px thick and fully surround the element
• Test in both light and dark modes
• Consider using :focus-visible in CSS to show focus for keyboard users while hiding it for mouse clicks

Testing Focus

The easiest way to test focus is to unplug your mouse and try using your site:

• Press Tab repeatedly - can you see where you are?
• Can you reach every link, button, and form field?
• Does the tab order make sense?
• Can you operate dropdown menus, modal dialogs, and custom widgets?
• Try Shift+Tab to go backwards - does that work logically?

Browser developer tools can also help - many now have accessibility inspectors that show the focus order visually.

A Note on Modern Frameworks

Modern JavaScript frameworks and component libraries can sometimes interfere with natural focus order. When building custom components or using things like React, Vue, or Angular, pay extra attention to:

• ARIA roles and attributes
• Managing focus programmatically when content changes
• Ensuring keyboard event handlers match mouse event handlers
• Testing with actual keyboard users, not just with automated tools

Focus management isn't glamorous, but it's fundamental to making your site usable for everyone. Take a few minutes to tab through your site today - you might be surprised by what you discover!