Show Focus Outline

The Show Focus Outline setting ensures that keyboard users can visually see which element is currently focused. This is especially important for users who navigate using the Tab key, as it gives them a visual cue to know where they are on the page.

Some themes or plugins remove focus outlines using CSS, which can make navigation confusing or unusable for people who rely on the keyboard.

What accessibility issue does this fix

This option addresses the issue of invisible focus indicators. Many themes apply outline: none or outline: 0 in their stylesheets, either by accident or for design reasons. This removes the visual cue that shows where the user is focused on the page.

This directly impacts:

• Keyboard-only users
• Users with mobility impairments
• Screen reader users who also rely on visual focus

It helps meet WCAG 2.1 Success Criterion 2.4.7 – Focus Visible (opens in new tab), which requires that any user interface component that receives keyboard focus must have a visible indicator.

How does Show Focus Outline affect accessibility

Without a visible outline, keyboard users have no way to determine where they are in the tab order. This makes navigating menus, forms, and links nearly impossible without a mouse.

When enabled, this setting:

• Adds a visible outline (usually a border or glow) to focused elements
• Ensures that all interactive elements are usable by keyboard
• Greatly improves usability and inclusiveness

This setting does not affect mouse users and does not interfere with your site’s layout or design unless you’re relying on intentionally hidden focus styles.

How to enable Show Focus Outline using Web Accessibility Toolkit

1. Go to Settings > Web Accessibility in your WordPress admin.
2. Open the General tab.
3. Locate the checkbox labeled Show Focus Outline.
4. Tick the checkbox and click Save.

This will enqueue a small CSS snippet on your site that restores the browser’s default focus outlines or adds a visible one if your theme removes it.

How to confirm that Show Focus Outline is working

1. Visit your site and press Tab to begin keyboard navigation.
2. As you tab through links, buttons, and form fields, each focused element should display a visible outline.
3. You can also inspect your site’s styles in DevTools to check that focused elements have a visible outline or border.

If nothing appears, check that your theme isn’t overriding focus styles with high-specificity CSS like *:focus { outline: none !important; }.