WCAG 2.4.7 — Focus Visible — keyboard focus indicator not visible

Who Is Affected

Users who navigate with keyboards instead of a mouse, including people with motor disabilities, blind users using screen readers, users with tremors or limited dexterity, and anyone whose mouse has stopped working.

What This Means

When someone presses Tab to move through your website, there should be a clear visual indicator showing which link, button, or form field is currently selected. This is called the "focus indicator" — usually a colored outline or border around the active element.

Many websites accidentally remove these indicators with CSS rules like outline: none or outline: 0, making keyboard navigation impossible. Without visible focus, users can't tell where they are on the page or what will happen if they press Enter.

Fix: CMS / Theme

This is typically caused by CSS that removes the browser's default focus outline. The fix involves restoring or replacing focus indicators site-wide.

Check for the Problem

1. Press Tab repeatedly on your homepage to navigate through links and buttons.
2. If you can't see which element is focused, you have this issue.
3. Check your theme's CSS files for rules containing outline: none, outline: 0, or :focus { outline: none }.

Fix the CSS

In Joomla:

1. Go to Extensions → Templates → Your Template → Edit Files
2. Open your main CSS file (usually template.css or user.css)
3. Find and remove or modify any rules that set outline: none on :focus states
4. Add this CSS to ensure all interactive elements have visible focus:

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

In WordPress:

1. Go to Appearance → Theme Editor or use your child theme's style.css
2. Follow the same steps as Joomla to find and fix outline removal
3. Add the focus indicator CSS above

Alternative for both platforms: If your theme has a customizer color option for focus states, use that instead of custom CSS.

Fix: Content Editor

Content editors typically can't fix this issue directly since it requires CSS changes. However, you can test for the problem:

1. Use Tab to navigate through any forms, buttons, or links you've added to pages
2. Report missing focus indicators to your web developer or IT team
3. When requesting custom buttons or interactive elements, specify that they need visible focus states

Standard Reference

WCAG 2.1 Success Criterion 2.4.7 — Focus Visible, Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

• W3C Understanding SC 2.4.7
• WCAG Technique G149 — Focus indicator
• WCAG Technique G165 — Default focus indicator
• WCAG Technique C15 — CSS to change focus presentation
• WCAG Failure F78 — Removing visible focus indicator