Focus & Keyboard Accessibility

Focus & Keyboard Accessibility

Keyboard users Tab through your site. They NEED a visible focus ring, never delete it!

The focus ring problem

New devs do this, and it hurts keyboard users:

:focus { outline: none; }   /* BAD: now there's no way to see focus */

Instead, keep or restyle the ring:

a:focus-visible {
  outline: 3px solid #2196F3;
  outline-offset: 2px;
}

:focus vs :focus-visible

• :focus: always when focused (even mouse click on buttons, often annoying).
• :focus-visible: ONLY when focus is keyboard-driven. Modern best practice!

/* Fine for text fields: both mouse and keyboard focus */
input:focus {
  border-color: #2196F3;
}

/* Keyboard only: prefer focus-visible for links/buttons */
button:focus-visible {
  outline: 3px solid #e91e63;
}

Tab order & tabindex

In HTML: tabindex="0" makes an element focusable. Keep natural tab order; CSS can't fix bad HTML order.

Other keyboard essentials

• Always keep :focus-visible styles on interactive elements.
• Use :hover and :focus together so keyboard users match mouse users:

a:hover, a:focus-visible {
  color: hotpink;
}

TL;DR

• Never outline: none without a replacement.
• :focus-visible ONLY styles keyboard focus, use it.
• Add outline-offset for breathing room.
• Pair hover styles with :focus-visible.