The Keyboard-First Design Mindset
Approximately 10% of users rely on keyboard navigation — not just screen reader users, but people with motor disabilities, power users, and anyone with a broken trackpad. If your design doesn’t work with a keyboard, it’s broken for millions of people.
Focus Indicators: The Most Overlooked Design Element
The default browser focus ring is often removed by CSS resets. This is an accessibility disaster. WCAG 2.4.7 requires visible focus indicators. Modern approaches use custom focus styles that match your brand while remaining clearly visible — a 3px solid outline with offset works in most cases.
Focus Traps and Modal Dialogs
When a modal opens, keyboard focus must move inside it and stay there until the modal is dismissed. This “focus trap” pattern prevents users from accidentally interacting with content behind the overlay. AI can help identify components that need focus management.
Tab Order and Logical Flow
The visual layout should match the DOM order, which determines tab order. AI layout analysis tools can flag when visual and DOM order diverge, which is a common source of confusing keyboard experiences.
Hands-On Exercise
Design a modal dialog component that includes: a visible focus indicator for all interactive elements, a focus trap that keeps Tab cycling within the modal, Escape key to close, and return-to-trigger focus on close. Test it with keyboard only — no mouse allowed.
Vibe Coding People — Learn by building with AI