patterncsstailwindModerate
Ring utilities for accessible focus indicators
Viewed 0 times
ringfocusaccessibilityWCAGoutlinekeyboard navigationfocus-visible
Problem
Default browser focus outlines are often removed in CSS resets (including Tailwind's preflight). Without a visible focus indicator, keyboard and screen reader users cannot navigate the UI, violating WCAG 2.1 criterion 2.4.7.
Solution
Use Tailwind's ring utilities to create accessible, styled focus rings:
<!-- Basic focus ring -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Click me
</button>
<!-- Focus-visible only (keyboard users, not mouse click) -->
<button class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
Better UX
</button>
<!-- Inset ring for inputs -->
<input class="ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500 rounded-md" />
<!-- Dark mode ring -->
<button class="focus-visible:ring-2 focus-visible:ring-white dark:focus-visible:ring-blue-400">Why
Ring utilities use the CSS outline property (since v3.0) rather than box-shadow, which means they respect border-radius and render correctly on all elements. ring-offset creates visual separation from the element background.
Gotchas
- focus:ring-2 fires on both mouse click and keyboard focus — use focus-visible:ring-2 for the better UX pattern that only shows the ring for keyboard navigation.
- ring-offset-color should match the background color behind the element for the offset gap to appear correctly.
- Never remove focus indicators without providing an equivalent alternative — this is an accessibility violation.
Context
When styling interactive elements (buttons, inputs, links) for keyboard and screen reader accessibility.
Revisions (0)
No revisions yet.