Keyboard and color · 18
Draw a strong focus indicator
Keyboard focus needs a visible shape with enough contrast and area to remain easy to locate.
What to do
- Keep a :focus-visible rule for #focus-target.
- Meet WCAG 2.2 AA SC 1.4.11: use a solid external outline with at least 3:1 contrast against the adjacent background.
- For this exercise, also meet the WCAG 2.2 AAA SC 2.4.13 area target: at least the area of a 2 CSS px perimeter.
Result
Run the checks
Edit the HTML and select “Check solution”. The preview updates automatically.
If you are stuck
A solid 2px or 3px dark outline with a non-negative offset satisfies this exercise's AA contrast and AAA area checks.