Focus indicators are essential for keyboard and assistive technology users, yet many websites remove them with `outline: none`. This guide explains what focus is, who benefits from visible focus styles, and how to design good focus indicators using CSS. It covers the `:focus` vs `:focus-visible` pseudo-classes, contrast requirements per WCAG 2.1, proper use of `tabindex`, and how to test keyboard accessibility across browsers and platforms. The post argues that focus styles should never be removed and recommends designing custom, on-brand focus outlines rather than relying solely on browser defaults.
Table of contents
What is focus? #heading-1Good focus indicators #heading-2Special cases #heading-3Focus styles as keyboard accessibility #heading-4Summing up #heading-51 Impression