Focus-visible and accessibility

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Focus-visible and accessibility—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Focus-visible and accessibility in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Focus-visible and accessibility in your own words.

Keyboard users need visible focus rings; mouse users often prefer not seeing outlines on click. Use focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 instead of removing focus entirely.

Never do this

outline-none without a focus-visible: replacement fails WCAG. Pair rings with sufficient contrast against the background.

Dark mode rings

Adjust offset/ring colors in dark surfaces: dark:focus-visible:ring-indigo-400.

Self-check

Why prefer focus-visible over focus for buttons?
What is wrong with outline-none alone?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

What focus ring would pass your a11y review?
Where must you avoid outline-none?

No discussion yet. Be the first to ask a question.