What Is WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance) and How to Pass It?

Keyboard accessibility is no longer optional. With the release of WCAG 2.2, websites must provide a clear, visible focus indicator so keyboard users can easily identify which interactive element currently has focus.If you’re wondering what is WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance) and how to pass it, this guide explains everything in plain English, including requirements, examples, CSS code, testing methods, common mistakes, and best practices.Whether you’re building a WordPress website, React application, Shopify store, or custom web application, following this criterion helps improve usability while reducing accessibility compliance risks.

What Is WCAG 2.2?

WCAG stands for Web Content Accessibility Guidelines.

It is an international standard published by the World Wide Web Consortium (W3C) through the Web Accessibility Initiative (WAI).

WCAG helps developers create websites that are usable by people with disabilities, including users with:

• Vision impairments
• Motor disabilities
• Cognitive disabilities
• Hearing impairments

WCAG 2.2 introduced several new success criteria, including:

• 2.4.11 Focus Appearance
• 2.4.12 Focus Not Obscured
• 2.5.7 Dragging Movements
• 3.2.6 Consistent Help

Among these, Focus Appearance is one of the most important updates for keyboard accessibility.

What Is Success Criterion 2.4.11 (Focus Appearance)?

Success Criterion 2.4.11 Focus Appearance requires that when an interactive component receives keyboard focus, its focus indicator must be:

• Clearly visible
• Large enough
• High enough contrast
• Easy to distinguish from surrounding content

This criterion ensures keyboard users never lose track of where they are on the page.

Why Focus Appearance Matters

Many users navigate websites without using a mouse.

Examples include:

• People with motor disabilities
• Screen reader users
• Users with temporary injuries
• Power users who rely on the keyboard
• People using switch devices

Without a visible focus indicator, users may not know:

• Which button is selected
• Which link will activate
• Which form field is active
• Where keyboard navigation currently is

Poor focus visibility leads to confusion, navigation errors, and accessibility barriers.

WCAG 2.2 Focus Appearance Requirements

To pass Success Criterion 2.4.11, the focus indicator must meet several technical requirements.

1. Visible Focus Indicator

When an element receives keyboard focus, users should instantly recognize it.

Good examples include:

• Outline
• Border
• Glow
• Shadow
• Background highlight

Bad example:

Removing focus entirely.

:focus{

outline:none;

}

This immediately fails accessibility.

2. Minimum Focus Area

The visible focus indicator must have sufficient size.

WCAG requires the indicator to cover an area at least equivalent to:

• A 2 CSS pixel thick perimeter around the focused element.

Tiny 1-pixel changes often fail because users cannot easily see them.

3. Contrast Ratio

The focus indicator needs at least:

3:1 contrast ratio

against adjacent colors.

For example:

Good

• Blue outline on white
• Orange outline on dark background
• Black outline on gray

Poor

• Light gray outline on white
• Pale yellow outline on beige

4. Indicator Must Be Distinguishable

Users should clearly see:

• Which component has focus
• The shape of the focused element
• The focus location

Focus Appearance Example

Poor example:

A tiny gray outline around a button.

Good example:

button:focus-visible{

outline:3px solid #005fcc;

outline-offset:3px;

}

This creates:

• Thick outline
• High contrast
• Easy visibility

Difference Between :focus and :focus-visible

Developers often confuse these.

:focus

Applies whenever an element gains focus.

Including:

• Mouse click
• Keyboard
• JavaScript

:focus-visible

Appears only when browsers determine keyboard users need a visible indicator.

Recommended for modern accessibility.

Example:

button:focus-visible{

outline:3px solid #005fcc;

outline-offset:3px;

}

Common WCAG 2.4.11 Failures

Many websites unintentionally violate this criterion.

Examples include:

Removing outlines

outline:none;

Very common failure.

Low-contrast borders

Gray on gray

White on white

Transparent outlines

Tiny focus rings

One-pixel border with almost no visibility.

Hidden focus

Using overflow settings that clip outlines.

Focus behind sticky headers

Keyboard users cannot see the active item.

CSS animations hiding focus

Focus appears briefly then disappears.

How to Pass WCAG 2.4.11

Follow these best practices.

Use High-Contrast Outline

Example:

:focus-visible{

outline:3px solid #0B63F6;

outline-offset:2px;

}

Avoid Removing Browser Focus

Instead of:

outline:none;

Customize it with a better style.

Increase Outline Thickness

Use:

• 2px
• 3px
• 4px

depending on your design.

Test Every Interactive Element

Check:

• Buttons
• Links
• Inputs
• Textareas
• Select menus
• Radio buttons
• Checkboxes
• Navigation
• Tabs
• Accordions

Test Dark and Light Themes

Focus indicators should remain visible across all color schemes.

WordPress Tips

If you use WordPress:

Avoid themes that disable browser outlines.

Popular builders like:

• Elementor
• Divi
• Beaver Builder
• WPBakery

sometimes replace default focus styling.

Always verify:

• Menu navigation
• Contact forms
• Search box
• WooCommerce checkout
• Product filters

Testing Focus Appearance

Manual Keyboard Test

Press:

Tab

Continue pressing Tab across the website.

Ask yourself:

• Can I always see focus?
• Is the focus obvious?
• Does it disappear?
• Does it meet contrast requirements?

Browser DevTools

Inspect CSS.

Look for:

outline:none;

or

outline:0;

These are warning signs.

Accessibility Testing Tools

Useful tools include:

• WAVE
• axe DevTools
• Accessibility Insights
• Lighthouse
• ARC Toolkit

These tools help identify missing focus indicators, but manual testing is still essential.

Real-World Example

Suppose you own an online clothing store.

Customers navigate product pages using the keyboard.

Without visible focus:

• They cannot identify the active “Add to Cart” button.
• They may activate the wrong link.
• Checkout becomes frustrating.

Adding a high-contrast 3px focus outline significantly improves usability and helps meet WCAG 2.2 requirements.

Best Practices

Follow these accessibility recommendations:

• Never remove keyboard focus.
• Use :focus-visible where supported.
• Maintain at least a 3:1 contrast ratio.
• Ensure the focus indicator is large enough to notice.
• Test with only a keyboard.
• Verify every interactive element.
• Include accessibility testing in every release cycle.
• Train designers and developers on keyboard accessibility.

Frequently Asked Questions