Exercise 2: Focus Styles

Visible focus indicators are crucial for keyboard users. In this exercise, you'll learn how to create clear, beautiful focus styles that meet WCAG requirements.

Common Focus Style Issues

Bad Examples

Good Examples

Practice Area

Try tabbing through these elements and notice their focus styles:

Card 1

This card is focusable with a custom focus style.

Card 2

Notice how the focus style makes it clear which card is selected.

Focus Style Requirements

Focus indicators must have a minimum contrast ratio of 3:1 against adjacent colors
Focus areas should be at least 2px thick
Focus styles should be visible in both light and dark modes
Consider using multiple indicators (outline + background change)
Animations can enhance focus visibility but shouldn't be distracting