How Do You Design Accessible Focus States on Webflow Sites in 2026?

Why Did Removing the Focus Outline Quietly Break a Client's Site?

A client once asked me to get rid of that blue box that appeared around buttons when you clicked them. It looked, in his words, broken. So early in my career I added the one line of CSS that kills it everywhere. A few months later, a keyboard user emailed to say they could not tell where they were on the site at all. I had made it unusable for them with a single line.

That blue box is the focus state, and it is not a bug. It is how people who navigate with a keyboard, a switch, or a screen reader know where they are on the page. Removing it for looks is one of the most common and most damaging mistakes I see on Webflow sites, and it is completely avoidable.

In this article I will explain what focus states are, what WCAG 2.2 now requires, and how I design focus styles that look intentional and still work for everyone. The goal is a focus state that fits your brand instead of one you feel tempted to delete.

What Are Focus States and Why Do They Matter in 2026?

A focus state is the visible marker that shows which element is currently selected when someone navigates with a keyboard. Press Tab and the focus moves from link to link, and a focus ring shows where you are. Without it, keyboard and assistive technology users are lost, clicking blind on a page they cannot track.

This matters more every year. The World Health Organization estimates that about 1.3 billion people, roughly 16 percent of the world, live with a significant disability. Many of them rely on keyboard navigation. When you remove focus states, you are not cleaning up a design. You are locking real people out of the site.

There is also a legal edge now. The European Accessibility Act took effect on June 28, 2025, pushing many businesses that sell into the EU to meet accessibility standards. Accessibility has moved from a nice-to-have to a requirement, and focus states are one of the most basic boxes you have to check.

What Does WCAG 2.2 Actually Require for Focus?

WCAG 2.2, published in late 2023, made focus rules stricter. It requires that focus indicators are visible and not hidden behind sticky headers, and it sets expectations for how clear the indicator must be. The focus indicator also needs a contrast ratio of at least 3 to 1 against the background so it is easy to see.

Two newer rules matter most. Focus Not Obscured says the focused element cannot be fully hidden by other content like a sticky bar, which is a common Webflow problem. Focus Appearance sets a standard for how large and contrasted the indicator should be. Together they mean a faint, thin outline is no longer good enough.

I treat these as the floor, not the ceiling. Meeting WCAG 2.2 keeps you compliant, but a genuinely good focus state goes a little beyond the minimum so it is obvious even to someone glancing quickly. The standard tells you what is required. Good design tells you what is kind.

How Do You Design a Focus State That Looks Good and Works?

Start with a clear ring that uses a brand color with enough contrast, give it a couple of pixels of thickness, and add a small offset so it sits just outside the element. The result should read as a deliberate part of your design, not a default browser artifact you forgot to style.

On a recent SaaS build, I used a two-pixel ring in the brand's accent color with a two-pixel offset, and it looked so clean the client stopped asking to remove it. The trick is to style focus on purpose. When the focus ring matches your buttons and inputs, which I cover in my guide on Webflow form input design, it stops feeling like an accident and starts feeling like craft.

Should You Use outline or box-shadow for Focus Rings in Webflow?

Use CSS outline as your default, because it does not affect layout and it follows the shape of the element. Reach for box-shadow only when you need a rounded glow that hugs a rounded corner more tightly. Both work in Webflow through a small custom code embed or the style panel.

Outline used to ignore border radius, which pushed many designers toward box-shadow, but modern browsers now follow rounded corners with outline too. So in 2026 I start with outline and outline-offset for almost everything. I only switch to box-shadow when a specific rounded button needs a softer ring, and even then I make sure the contrast still clears 3 to 1.

What Is :focus-visible and Why Does It Change Everything?

The focus-visible pseudo-class shows a focus ring only when the browser thinks the user needs it, mainly for keyboard navigation, and hides it for ordinary mouse clicks. This solves the exact complaint my client had. Keyboard users get a clear ring, while mouse users never see the box that bothered him.

This is the single most useful tool for this problem. Before focus-visible, you had to choose between accessibility and the clean look clients wanted. Now you can have both. I style focus-visible with a strong, obvious ring and leave plain focus alone, so the right people see the right thing at the right time.

But Won't a Visible Focus Ring Ruin My Design?

No, and this is the fear that drives most people to delete it. A well-designed focus ring is a small, branded detail that most of your visitors will never even see, because focus-visible hides it for mouse users. The people who do see it are the ones who genuinely need it.

I have never had a focus ring hurt a design once it was styled with intent. What hurts a design is the default browser ring nobody chose, or worse, no ring at all. When you treat focus as a real state worth designing, like hover, it becomes part of the polish. My piece on designing CTA buttons that get clicked takes the same view that every interactive state deserves attention.

How Do You Test Focus States on a Webflow Site?

Put your mouse away and press Tab through the whole page. Watch whether the focus ring is always visible, never hidden behind a sticky header, and easy to follow in a logical order. If you lose track of where you are even once, a real keyboard user will lose track far more often.

I back up the manual pass with tools like Lighthouse and axe DevTools, which flag missing or low-contrast focus indicators automatically. But the tools cannot replace the keyboard walk. I do the Tab test on every site before handoff, because it catches the obscured menus and skipped elements that automated checks quietly miss.

How to Fix Your Focus States This Week

Here is the order I would follow. First, remove any code that kills the outline globally. Second, style focus-visible with a branded ring of at least two pixels and 3 to 1 contrast. Third, add outline-offset so it sits cleanly outside the element. Fourth, Tab through every page and fix anything hidden or out of order.

For the connected design work, my guide on Webflow form input design shows how focus fits into a full form, my piece on CTA button design covers styling every interactive state, and my notes on APCA color contrast help you pick a ring color that actually passes. Read them together and your interactive states will feel cohesive.

Accessible focus states are one of the cheapest ways to make a Webflow site more professional and more inclusive at the same time. It takes an afternoon and protects real people. If you want help getting your focus states right across a site, I am happy to walk through it. Let's chat.