Skip to contentSkip to content

Mechanics module · WCAG 2.4.11 · Level AAA

Visible focus

Provides a strong, always visible focus ring on all focusable elements — with AAA contrast.

What it does

Function in one sentence — and in three sentences

Many modern CSS resets remove the browser's default focus ("outline: none"). If the theme doesn't provide a replacement, keyboard users won't be able to see their current position on the page — a Knockout criterion during WCAG audits.

The module applies a 3px thick outline ring with AAA contrast (at least 7:1 against the background) to all interactive elements, regardless of the theme.

This is how the plugin implements it.

Technical measures

  • 3px outline + 2px offset — visually clear, without disrupting the layout.
  • Contrast calculation per element: automatically selects dark outline on light background, light outline on dark background.
  • `:focus-visible` instead of `:focus` — Mouse clicks do not show a ring (modern behavior), keyboard focus always does.
  • Custom elements: `tabindex="0"` on divs / spans also get the ring.
  • Border radius adjustment: Outline follows the rounded shape (no sharp-edged frame around round buttons).
In the plugin backend

You can find these settings in the module tab.

  • Ring thickness (1–5 px, default 3)
  • Ring color: Auto / fixed HEX color / CSS variable
  • Offset (0–6 px, Default 2)
  • Animation on appearance: off / soft (respects `prefers-reduced-motion`)
  • Exception selectors (CSS): Elements without an override ring

Path in Admin: WP-Admin → Accessibility → Modules → Visible Focus

When do you need the module?

Use case

A mandatory module for every page. WCAG 2.4.11 is at level AAA, but even 2.4.7 (focus visible) at level AA requires it.

This is particularly critical with themes that use aggressive CSS resets or with custom-built buttons via `

`.

Related modules

That fits together thematically.

  • Keyboard navigation

    WCAG 2.1.1

    Make sure that every interactive element is accessible without a mouse — Tab, Enter, arrow keys, Esc.

  • Tabindex Manager

    WCAG 2.4.3

    Repairs the tab order, eliminates positive `tabindex` values, and fixes faulty jumps.

  • WCAG 2.4.1

    Sets semantic landmark roles and visible skip links for keyboard users and screen readers.

Activate the module for your site?

In the initial 15-minute consultation, we will clarify whether the module is relevant for your theme and content type — and what the setup looks like.

15-minute initial consultation
View all modules

Easy language