Focus, Hover and Disabled States People Can See

A control that only changes on hover looks fine with a mouse and invisible with a keyboard. A focus ring is not a decoration. It is how keyboard users know where they are.

Focus you can see

.btn:focus-visible {
  outline: 3px solid #034bff;
  outline-offset: 2px;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn:active {
  transform: translateY(1px);
}

:focus-visible shows the ring for keyboard focus in modern browsers, and typically not for a pointer click. That is the usual compromise: visible when needed, quiet when not.

/* avoid this */
.btn:focus { outline: none; }

Removing outlines without a replacement fails real people. If the default outline clashes with your design, replace it. Do not delete it.

Hover is optional; focus is not

Phones often have no hover. Do not hide essential information behind :hover alone. Tooltips that only appear on hover need a focus or tap path too.

Disabled means not available

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover {
  filter: none;
}

Disabled buttons should not look clickable. Prefer the native disabled attribute on <button>. aria-disabled is for cases where you must keep the control focusable to explain why it is blocked — then you also need the explanation in text.

Common mistakes

• outline: none globally. Instant accessibility debt.
• Hover colour that fails contrast. Check both resting and hover states.
• Disabled links that still navigate. Use a button, or remove the href and explain why.

Skip links

A “Skip to content” link as the first focusable control helps keyboard users bypass the header.

<a class="skip-link" href="#main">Skip to content</a>
...
<main id="main">...</main>

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip-link:focus {
  left: 1rem;
  z-index: 100;
  background: #ffffff;
  color: #080b0e;
  padding: 0.5rem 0.75rem;
}

Here :focus (not only :focus-visible) is fine — the point is to appear when focused.

Visible disabled vs read-only

disabled removes the control from the form submission and usually from tab order. readonly keeps it focusable but not editable. Pick the one that matches the product rule. Styling both the same way confuses people.

What happens if you skip this

Keyboard users bounce. Audits fail. You will hear about it after launch, when changing the CSS is urgent and expensive.

Try it

Tab through your header and form. If any control disappears into the background when focused, fix that rule before shipping a new colour palette.

Would you accept a TV remote with no highlight on the selected button?