Focus styles people can see

Focus styles people can see

outline: none has locked more keyboard users out of the web than any other two words of CSS.

The ring is the cursor

A keyboard user without a visible focus indicator is a mouse user without a pointer. Every interactive element in this theme carries a 2.4px ring that passes 3:1 against its background.

WCAG 2.2 raised the bar

Focus must now also stay unobscured — sticky headers and cookie banners may not hide the focused element. We test with the header pinned and the page scrolled, not just at the top.

Design the ring, do not delete it

If the default outline clashes with your brand, style it — thicker, offset, in your palette. Deleting it because it is “ugly” hands the bill to your users.

Leave a Reply

Your email address will not be published. Required fields are marked *