Towards A Cooler Focus Caret

The focus caret is that dotted outline you see around HTML elements when they have the focus. In some Mac browsers you see a standardized glowing blue border instead, but most browsers show a dotted outline. It’s not usually pretty, but it is completely necessary to give an indication of which element has the focus.

(Some developers hate them so much that they try to suppress them, with JavaScript abominations like onfocus="this.blur()". But I’m gonna take it as read that you, my dear reader, would sooner chew off your own leg than do something as awful as that.)

Here’s an example of what the caret might look like (this screenshot was taken with Mac/Firefox):

A list of three links, with one having a dark-blue dotted border around it.

Focus carets serve a vital accessibility function for people who navigate with the keyboard, and so, far from trying to suppress them, what we as developers should really be doing is making them more obvious. And it turns out that there are some CSS properties we can use to do just that, and also make more attractive in the bargain — what I’m talking about is outline.

The outline property is similar to border, having sub-properties for outline-width, outline-style and outline-color and the same shorthand syntax, but it draws a border on top of the layout, not within it — so it doesn’t affect the box’s dimensions or cause any displacement, and it can, if large enough, overlap other elements or itself.

This on its own makes it a useful development tool, because you can draw test borders on elements without affecting the space they take up.

But what it’s really useful for is as a focus caret, and in fact what we find is that the browser’s built-in focus caret is an outline style, typically amounting to this:

a:focus
{
    outline:1px dotted 
}

A dotted border that inherits the element’s focus color. And I recommend you leave that essentially as it is — it’s what people expect, and it makes visual sense.

But you can supplement it with two additional properties that improve the caret by giving it more space, and making look a little cooler; these are what this post is all about:

  • outline-offset moves the border away from the bounding box, creating space between the element and its outline; and
  • -moz-outline-radius gives it lovely rounded corners!

So as a global rule, we could do something like this:

a:focus
{
    outline:1px dotted;
    outline-offset:2px;
    -moz-outline-radius:5px;
}

And I’ve used those very styles for links in the new blog design — so the effect is literally all around you! Try tabbing around the page and you should see what I mean — Firefox is the best browser to see it in, because although the offset is cross-browser, the radius is Firefox only.

Then with a litle trial-and-error I adopted the following conventions:

  • By default, elements have 5px radius and 2px offset:
    A link with an orange dotted border around it, where the border is slightly offset from the text and has rounded corners.
  • For very small text, decrease the offset to 1px:
    A link with a gray dotted border around it, offset from the link slightly less than the previous example.
  • For elements with clearly defined borders already, such as the links in the main navigation bar, clear the offset so that the outline perfectly hugs the element:
    A link from the navigation bar, which is a dark blue rectangle with white text, and a white dotted border pefectly hugging its edges.
    For a tightly-hugging outline you may also prefer to lose the rounded corners — on the navigation bar links I kept them because I thought they looked kinda cool! But on the categories tabs I changed them so that only the top corners are rounded, while the bottom corners are square, to match the tab itself:
    A tab from the categories navigation, which is a dark blue rectangle with rounded corners at the top, and a white dotted border pefectly hugging its edges.
    Hugging the tab’s existing border so tightly like that does make the outline less obvious — and that’s something you have to watch out for — but since there’s a background rollover going on there as well, I think it’s clear enough overall.

And there you have it! None of this works in IE of course (though the core outline properties work in IE8), but I’m guessing you guessed that already! It doesn’t really matter though, since we haven’t lost anything — the default outline isn’t affected and carries on as normal — so this is textbook progressive enhancement.

But I think what this demonstrates more than anything is that accessibility features don’t have to be dull or pefunctory — they can display just as much flair as any other part of the design (whether or not rounded corners are your thing!). And giving this attention to such features makes them more useful, and less of a bug-bear to those who’d otherwise prefer not to have them at all.

Thumbnail credit: ihtatho

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Knowles

    Hi Thx for sharing those styling properties with us. I wasn’t aware of those options.

    I’ve recently been looking into the options and discovered that safari webkit has a property -webkit-focus-ring-color which apparently can also be styled. Giving us designers the option to chose another color that the standard blue glow.

    For the sake of clarity: this is the color that surrounds a UI element, such as a text field, or submit button that has the focus. http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-UserInterface

    I have tried implementing it but without success. I guess my syntax is incorrect because i can’t seem to get it to work.
    Has anyone managed to get it working??

  • Wardrop

    A good article, and one which a lot of people can find useful. On that note, I don’t like how Firefox makes the rounded corners solid, as in not dotted like the rest of the outline. Also, before reading this article, the new outline effect did throw me off a little. It’s so rare to see these change that when they do change (like on sitepoint), they can make one a little cautious. Personally, it made me think there was some background javascript service doing something when I selected links (like one of those link “previous” JavaScript libraries).

  • jsumners

    Don’t forget about Webkit. You can include the -webkit-border-radius property to round the borders in Safari, Chrome, and any other Webkit based browser.

  • http://www.brothercake.com/ brothercake

    @Knowles: -webkit-focus-ring-color is a property value, not a property, so you’d use it like outline-color: -webkit-focus-ring-color; and then the outline you specify will have that blue color. But as far as I know you can’t change that color on elements where it’s used – it’s an OS level property, and up to users to define in System Preferences (if you go and change the “Appearance” from Blue to Graphite, then the ring changes to a glowing gray color).

    @Wardrop: that’s fascinating, I hadn’t even considered that. I still shudder when I remember “top tips” – those double-yellow borders to ad-sponsored content that MS were considering for IE7. Thankfully they relented on that. But we still have those annoying site preview things, they do my head in too.

    As you say, it’s a shame that the corners aren’t properly dotted, but I imagine that’s a consequece of anti-aliasing.

    @jsumners: I did try Chrome and Safari with that property syntax, but none of them applied rounded corners. Which versions are you looking at where it works?

  • jsumners

    Oops, I wasn’t thinking. Looks like Webkit doesn’t have the radius property for an outline.

  • irama

    Great article! I’ve been thinking about focus carets myself recently. As you point out, some designers don’t like them at all. But it’s worth noting that they are most important for keyboard (or alternate input device) users.

    To that end I put together a jQuery plugin so you can detect keyboard focus and style it prominently while leaving mouse focus less dramatically highlighted: http://irama.org/web/dhtml/key-focus/

    Let me know what you think?

  • http://www.brothercake.com/ brothercake

    You were probably thinking of -webkit-border-radius

  • Sunny Singh

    I disabled outline in my CSS and simply provide the same focus styles as I have for hover. This way if you use tab, you will see the same effect as if you were using your mouse.

    I use it all the time on my site and never leave it out – http://www.myunv.com

  • http://www.brothercake.com/ brothercake

    That’s a good starting point, but you absolutely should not disable outline styles – by which I mean, don’t remove anything that’s already there, even if you don’t add anything new.

    But I think it’s a good idea to make focus styles far more obvious than hover styles – after all, when you hover with the mouse you know where your mouse is. But when you’re tabbing with the keyboard you don’t necessarily know where the focus is to the same extent, and may be relying on clear focus indication for something that stands-out enough to find.