Let’s get focused.

I often see developers misusing CSS :focus styles because they either don’t find them useful or don’t like the way they look. I agree that the browser default focus styles aren’t the prettiest, but they don’t need to be. A focus style is a style used to clearly show that an element is focused. It should not be subtle. It should not be ‘clean’.

The Good

Take a look at the Uk Government’s website, and hit tab. An example of how gov.uk uses focus states

Their links are set in a shade of blue, while their focus state introduce black text on a yellow-banner background. Perfectly legible.

The Bad

The Ugly Beautiful

[work in progress]