v145 · Web APIs · focusVisible Demo

focusVisible Demo

Click the buttons below to programmatically focus the target elements with { focusVisible: true } or { focusVisible: false } and observe whether the focus ring appears.

The CSS :focus-visible rule on each target button shows the outline. The focusVisible option controls whether programmatic focus triggers :focus-visible. The ring appears when focusVisible: true and is suppressed when focusVisible: false.

focus ring comparison

focusVisible: false

:focus-visible: not focused

focusVisible: true

:focus-visible: not focused

browser support

focusVisible optionChecking…
:focus-visible CSSChecking…

code

// Focus without ring (e.g. skip-link target, scroll-into-view)
element.focus({ focusVisible: false });

// Focus with ring (e.g. keyboard shortcut, dialog open)
element.focus({ focusVisible: true });

// CSS: style the ring however you like
button:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
button:focus:not(:focus-visible) {
  outline: none;
}

see also