---
title: "Focus outline removed without replacement (ui/outline-none)"
description: "Keyboard users can't see where focus is."
url: http://localhost:4173/rules/ui/outline-none
updated: 2026-11-11
---

# Focus outline removed without replacement

> `ui/outline-none` is a vetd rule. It flags: Focus outline removed without replacement. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `ui/outline-none` |
| Severity | warning |
| Group | Interface craft: accessibility, motion and mobile |
| Tags | accessibility |

## Why it matters

Keyboard users can't see where focus is.

## How to fix it

Pair outline-none with a focus-visible style, e.g. focus-visible:ring-2.

## Credit

Based on work by:

- [W3C Web Accessibility Initiative](https://www.w3.org/WAI/): WCAG 2.4.7 requires a visible keyboard focus indicator.
- [Vercel](https://vercel.com): The Web Interface Guidelines say to use :focus-visible instead of removing focus styling.

## References

- [Understanding Success Criterion 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html), W3C
- [:focus-visible CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible), MDN Web Docs
- [Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines), Vercel (vercel-labs)

## See it

Demos in the vetd Lab:

- [Show a visible focus ring](http://localhost:4173/lab/web-guidelines/visible-focus)
- [Draw focus rings with outline](http://localhost:4173/lab/sam-selikoff/outline-focus-rings)

## Related rules

- [`ui/click-on-non-interactive`](http://localhost:4173/rules/ui/click-on-non-interactive.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "ui/outline-none" }`. CLI: `npx vetd explain ui/outline-none`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`ui/icon-button-label`](http://localhost:4173/rules/ui/icon-button-label.md) · Next: [`ui/transition-all`](http://localhost:4173/rules/ui/transition-all.md)