Focus styles don't have to be beautiful

The companion article to this one argues that focus styles just need to exist, and that a two-pixel outline is a perfectly respectable place to stop. I stand by that. This article is about how I then didn’t stop, for no defensible reason beyond wanting to.

Check out the live project

This site uses organic blob shapes throughout, which I’d committed to early and enthusiastically, before thinking about what focus would look like on them. I wouldn’t be able to use the rectangular default outline, and border-radius: 50% wouldn’t fix it, either. So the focus styles sat in the backlog for a while with a mental note attached: probably reuse the blob SVG as an outline, or do something with the original path’s stroke. Workable, uninspiring. Then I walked past a branch of a certain drugstore chain from Hamburg, looked at their logo, and took it. To be fair, it’s just shapes. A loose, hand-drawn ring, sitting slightly off-center around whatever has focus, plus a small transition as it moves between elements. The keyboard user gets a scribble that follows them around the page.

Now, the honest part. I don’t know if it works. It looks distinct to me, and it clearly marks where you are, to me, the person who built it and knows where focus is going before pressing Tab. Real answers would need testing with actual keyboard users, which I didn’t do, because this is a side project and the testing budget was the same as the rest of the budget. So I can tell you it’s satisfying, that tabbing through the blobs is genuinely fun (to me, at least). Whether it’s clear is a claim I’ll leave to whichever keyboard power user eventually arrives to body slam me. Though if I’m honest, they were never quite the target audience of a portfolio full of blobs.

There’s a small point under the self-indulgence, though. Focus styles are usually the last thing designed, if they’re designed at all: they tend to look like something the browser did to the page rather than something the page intended. But focus is a state, like hover, and nobody backlogs hover. Once you treat it as part of the design instead of a compliance checkbox, it can carry the same personality as everything else. It just also has a job, which is where my confidence ends and testing should have begun.

So: focus styles don’t have to be beautiful. Visible and consistent is the whole requirement, and the two-pixel outline standard expectation remains.

But maybe… they’re allowed to be beautiful. Though I should probably get someone to verify mine are actually doing their job.