Focus Indicators and Keyboard Navigation
Apply ring utilities for visible focus styles, use focus-visible to avoid showing focus on click, and ensure all interactive elements are keyboard reachable.
Why Keyboard Navigation Matters
Not all users navigate with a mouse. Users with motor disabilities rely on keyboards, switch controls, or voice navigation. Power users prefer keyboard shortcuts for efficiency. Screen reader users navigate primarily with the keyboard. WCAG 2.4.3 Focus Order requires all functionality to be operable via keyboard, and WCAG 2.4.7 requires that keyboard-focused elements have a visible focus indicator. Tailwind provides utilities to implement both requirements.
Default Focus Styles and Their Problems
Browsers provide default focus indicators (typically a blue outline), but many designers remove them globally with outline: none or outline: 0 because they appear on mouse clicks too. This is an accessibility disaster — removing the outline means keyboard users have no visual cue showing which element has focus. Tailwind's modern approach distinguishes between mouse focus and keyboard focus using the focus-visible pseudo-class.
/* NEVER do this globally */
* {
outline: none; /* destroys keyboard accessibility */
}
/* WRONG approach in Tailwind */
<button class='focus:outline-none'>...</button>
/* Removes focus for keyboard users too */
/* BETTER: suppress only for mouse users */
<button class='focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'>
This button shows ring for keyboard users only
</button>All lessons in this course
- Color Contrast and Readable Text
- Focus Indicators and Keyboard Navigation
- ARIA Attributes and Screen Readers
- Accessible Form Components