Focus Outline in WordPress: Why You Must Never Hide It

The outline browsers draw around a focused button or link is not decoration - it is the basic location indicator for keyboard users. CSS that disables it (outline: none) effectively makes the cursor invisible.

Why this matters

The historical reset *:focus { outline: none; } was popular to remove browsers' default blue ring. The cost: every keyboard interaction breaks. A user pressing Tab to move between links and buttons has no idea where they are at any given moment. Blind users combining keyboard and screen reader, motor-impaired users on trackballs, power users who navigate by keyboard - all are locked out.

This is an explicit international accessibility guidelines Level AA requirement, 2.4.7 Focus Visible. Since Safari 15.4 and Chrome 86, :focus-visible is widely supported - a pseudo-class that activates only when focus arrived via keyboard, not from a mouse click. It solves the cosmetic complaint about a ring after clicking a button.

How to detect

Open the site and press Tab repeatedly. If you cannot see a frame or highlight on the current link/button, there is a problem. Search the CSS:

grep -rn "outline:\s*none\|outline:\s*0" wp-content/themes/ wp-content/plugins/

Look for outline: none or outline: 0 on :focus. Tooling: axe DevTools reports "Element does not have visible focus indicator."

How to fix

1. If you found outline: none in the theme's style.css - do not delete it. Add the following rule alongside:

   :focus { outline: none; }
   :focus-visible {
       outline: 2px solid #0066cc;
       outline-offset: 2px;
       border-radius: 2px;
   }

   This means "remove outline on mouse click, but show a clear ring when arriving via keyboard."
2. Use a high-contrast colour - at least 3:1 against the background. Check with the WebAIM Contrast Checker.
3. Add outline-offset: 2px - a small gap from the element makes the focus ring more obvious.
4. Watch for aggressive plugin resets - some plugins set focus styles globally. Place your CSS after they load (child theme or a late-loading hook).
5. In the block editor, the CSS also applies to the admin side if enqueued via admin_enqueue_scripts.
6. Verify on all element types: nav links, CTA buttons, form fields, mobile hamburger menu.

Common mistakes

• Using :focus alone without :focus-visible: mouse clicks now also draw the ring, which feels odd. Use both.
• An outline colour that disappears against the background: outline: 1px solid #ddd on grey - invisible. Check contrast.
• Replacing outline with box-shadow without testing: :focus { box-shadow: 0 0 0 2px blue; } works but not in every browser. If used, keep outline-offset: 0 as fallback.
• Styling only button: keyboard users also reach a, input, select, summary. Style all of them.

Verifying the fix

Open the site and Tab through the home page. Every Tab stop should reveal a clear ring. Test internal pages, forms and menus too. Run axe DevTools - the Focus Visible category should pass. RankPlus turns green.