← All analysers · Multi-model analysers

VisibilityFocusConflictAnalyzer

Catches focusable elements hidden by CSS — keyboard reaches them, sight does not.

What it detects

An element with `tabindex` or a focusable role is reachable by keyboard. If CSS hides it (`display: none`, `visibility: hidden`, zero size, off-screen clip), the keyboard user lands on something they can't see. This analyser cross-references the DOMModel's focusable elements against the CSSModel's computed visibility.

WCAG criteria

  • 2.4.7Focus Visible
  • 2.4.11Focus Not Obscured

Example

.save:focus { display: none; }
/* The element disappears the moment it receives focus. */

Paradise reports: Element `.save` becomes focusable then immediately hides on focus — keyboard users land on a vanished element.

Source

analyzers/VisibilityFocusConflictAnalyzer.ts

More