Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

Designing effective Focus Indicators doesn't have to be difficult if you follow these design tips.
Get a handle on accessible design!  Follow these tips for designing effective Focus Indicators, to ensure every element of your site’s design is accessible.

What Are Focus Indicators?

Have you ever noticed the blue outlines that sometimes show up around buttons or form fields when you’re filling out a form? What about when you click on a menu item? Have you ever tried to make those outlines disappear?

alt: Two examples of a form field: one with the default focus style, and one with an overridden focus style

Here’s a hint: by default, browsers use the :focus css pseudo class to give outlines to form fields and other elements when the elements are selected. Here’s another hint: if you decide to get rid of the blue outlines, make sure to replace them with something else! There’s a whole subset of users who rely on these outlines to tell them where they are on the page.

These outlines are called focus indicators. They’re  visual markers which show (indicate) which element on a web page is focused. Only one element on a page can be focused at a time, and it should be obvious. Most all focusable elements are interactive – form fields, links, buttons, tooltips, etc. A rule of thumb: if you can interact with an element with the mouse, you should also be able to use the keyboard to perform the same actions. And if you’re using a keyboard, anything you interact with should have visible focus.

Who Needs Focus Indicators, Anyway?

Who doesn’t navigate websites with a mouse, you ask? As it turns out, a lot of people use the keyboard as their primary means of using the web, including:

People who use screen readers. Screen reader users are often blind, but not always! People with low vision or cognitive disabilities (like dyslexia) also use screen readers to help them understand content on the web. Screen readers are almost entirely controlled using the keyboard.

People with limited mobility. For example, people who don’t have enough fine motor control in their hands to use a mouse. They may use something like a mouth stick to operate a standard keyboard, or a switch, which simulates a keyboard.

Power users. A power user could be someone like a web developer, who spends all day writing code. Or an administrator who does a lot of data entry. I personally like to be able to tab through a web form while I’m filling it out rather than clicking on each field.

It should also be noted that “focus visible” is a requirement for a site to be considered accessible under the Web Content Accessibility Guidelines (WCAG). WCAG is the most commonly agreed upon accessibility standard, and an increasing number of countries have laws which require that public-facing websites meet the WCAG standard.

What’s Focusable on a Web Page?

A number of different elements on a web page can (and should!) be focusable. All of them need to have a focus indicator of some sort to make them look different from the surrounding elements. Here are a few of the many things that should be focusable on any website:

  • Links
  • Buttons
  • Form Fields / Controls (text fields, select boxes, radio buttons, etc.)
  • Menu items
  • Things triggered by hover, like tooltips
  • Widgets, like a calendar picker

Again, if you can interact with an element with a mouse, you should be able to use the keyboard to interact with it, too.

What Focus Indicators Look Like

Showing an outline around an element helps everyone who is a) using a keyboard to navigate and b) can also see the screen. Want to see how it works? Reload this page, and then hit the Tab key a few times. You should see yellow outlines around some of the items in the header, like the logo and the social media icons. Every time you hit Tab, the outline moves to the next element in the focus order (which is usually the order in which each element appears in the code). You can hit Enter or Return to activate the link. You can navigate most of the web with the keyboard using the Tab, arrow, and Enter/Return keys.

The most common browsers (Firefox, Chrome, Internet Explorer and Safari) all have default focus indicators for most (if not all) elements built into the browser. If you don’t define focus anywhere at all, you will at least be able to rely on the native browser indicators. However, focus indicators look different across browsers. If you want your website to have a consistent look and feel across multiple browsers, it would be worth investing the time to define focus styles.

Here are some default focus indicators on the three main browsers used on a PC:


Link focus is a dotted outline, and is the same color as the link.

firefox links

Form field outlines are blue instead of black, and are only 1 pixel wide.

form fields for firefox

Buttons have a blue outline and a smaller dotted outline around the button label.

button widget


Link focus is a light blue outline. The color is the same regardless of the color of the link.

chrome links

Form fields use the same blue outline.

chrome form fields

And so do buttons.

chrome button widget

Internet Explorer

Link focus is a simple dark grey dotted outline, which doesn’t change color based on the link.

IE links

Form fields are slightly more black than the standard dark, dark grey.

ie form fields

Buttons have a dotted outline around the text, and nothing else.

ie button widget

Default Indicators are Not So Great

Overall, each browser has its strengths and weaknesses in terms of focus indicators. Internet Explorer could stand to be more obvious, Chrome could vary its indications a bit more across element types, and Firefox could do more for form fields. It should be noted that some browsers (particularly Firefox) do not have focus indication at all for some elements, like checkboxes and radio buttons. As a result, it’s a good idea to make sure you define focus styles, since you usually can’t be sure which browser your users will be using.

If you decide not to mess with the default focus indicators, the site will usually still be technically accessible. That being said, a technically accessible site is often not as usable as most users expect. In addition to being inconsistent across browser, the default focus indicators are locked into one style and color, which may or may not go well with the style of your site. Truly usable focus indicators will have sufficient contrast with the background. For example, if there’s a lot of blue on your site, a user using Chrome might have a hard to seeing what’s focused because Chrome’s default focus color is also blue.

Designing Effective Focus Indicators

There are a few keys for well-designed focus indicators. Some of them have already been mentioned above. For easy consumption, here’s a list:

  • Good contrast
  • Complementary shape and size to the element
  • Color scheme is complementary, but also stands out
  • Doesn’t need to be the same for all elements
  • Animations help users track focus movement
  • Should degrade gracefully (be visible on older browsers)
  • Should be the same across browsers

Tips for Designing

  • Make a list of all focusable elements. How many variations of each do you have? If there are primary and secondary buttons that use different colors, will the same focus indicator work for both of them?
  • Think about your color scheme. Are you using a callout / highlight color? Would that color work well for focus? If not, is there a different color that would?
  • In a lot of cases, a good focus state might be the same as the hover state. If your hover state is obvious, consider using that as a focus indication as well.
  • It’s generally a good idea to replace the native browser focus style for all elements with a custom style so that focus indicators are consistent across browsers.

Some Examples

The University of Michigan accessibility website uses inverted colors for its links. Hover is almost the same as focus – focus also includes a light blue outline that looks very close to the native browser focus for Chrome.

design widget example

Webaim uses both a nice hover color and a nice focus pattern for their main menu. Again, the hover and focus are almost exactly the same, except that the focus includes an outline. Note the amount of padding between the text and the outline, which makes the focused text both more obvious and easier to read. Both the focus and hover styles also include a slight text shadow, so that the user doesn’t have to rely on color alone to know that it’s in focus.

webaim example

If you tab through Webaim’s site, you’ll also notice that the focus indicator is animated – as you tab from one element to another, the focus indicator quickly floats to the next element. This is a nice touch that can help users more easily figure out where the next focused element is.

The University of Washington website uses a different color for hover in the menu, and adds an additional underline when the menu item is focused. The menu does not use native browser focus at all, and looks the same across browsers. An even better pattern would include more contrast between an item on hover and the normal style, so that users who have trouble distinguishing colors or contrast can identify links more easily.

UOFW bar example

The United Nations web accessibility guidelines website uses a simple but effective style for buttons. On hover, buttons use a grey background. On focus, a semi-thick dotted line appears around the button. Either way, the button is easy to locate.

UN a11y guidelines

The WordPress Twenty Sixteen theme uses a basic difference in color for a hover state, and adds a thin dotted border when the link is focused. The style does not rely on the native browser styles for focus, and looks the same across browsers.

WP category

How / When to Tackle Focus Indicators

Regardless of when you start, the first thing you’ll want to do is make a list of all of the focusable elements you’ve used or will be using on the site. How many color or style variations of each do you have? Is your site using any custom widgets or controls? Does your site (or system) use multiple color schemes?

There are two spaces you might be in when designing focus indicators:

  • Designing new patterns
  • Improving an existing application

The best time to tackle designing focus indicators is before the element patterns have been implemented – for example, when starting from scratch on a new site, or when doing a style refresh for an existing site. While you can make a push to change focus indicators on the fly, it’s often easier to design for focus when designing the element patterns themselves, for multiple reasons:

  1. It’s easier to get buy-in for focus indicators when they exist as part of a cohesive design.
  2. It’s easier to implement focus at the same time as other states, like the hover state.
  3. It’s easier to design focus when designing other states (like hover and active) because you have time to give more thought to how focus fits in with the rest of the design.

My advice: include focus indicators early, and evaluate them often. The hardest way to include focus in an application is to need to do it on a short deadline. Your site’s users will thank you for including focus indicators from the start, too.

Caitlin Geier is a UX designer on Deque’s product team.  As a UX designer, Caitlin’s work with  accessible design flourished once she began working for Deque. She is passionate about understanding the users she’s designing for, and she continually strives to incorporate accessibility elements into her work in order to ensure that all users can benefit from inclusive design. 

update selasa

Comments 8 responses

  1. Thanks for the post Caitlin.

    Lol! It’s funny I’m just realizing the use of focus indicators. Thought they were fancy stuff geeks put on their website to make it more geeky.

    I even noticed it on this comment form. 🙂

  2. I would caution that there is increased risk to a site by overriding all the browser defaults for focus indication. Namely, you cannot anticipate user or assistive technology customizations. As a simple example, a user with Windows High Contrast enabled may find that all your custom focus indicators disappear. Since you’ve disabled the defaults, your attempt to make things more visible and consistent results in a completely inaccessible site for that individual.
    We have had some designers at IBM follow a similar tactic that you advocate, but it takes a very experienced designer to adequately test the resulting design for accessibility.
    A more scalable solution is to advocate for user agents to provide defaults that meet basic contrast minimums and offer the ability for users to easily personalize the browser focus indicator styling.

  3. No ability to preview my comment. i obviously wanted to quote the following in that tag:
    “It’s generally a good idea to replace the native browser focus style for all elements with a custom style so that focus indicators are consistent across browsers.”

  4. I wish someone–like this blog post!–would give us some good CSS to actually use. I’ve read a dozen pages saying you should do focus indicators and giving examples of sites that do, but no one is showing what the CSS looks like.

  5. That is a very good point, Mike, thank you! I agree that overriding the defaults can be dangerous in a lot of ways, particularly if the designers and the developers in charge of the implementation don’t understand the full implications of overriding the default focus styles. However, I’ve found that many designers (and developers!) prefer to turn off the focus styling due to the perceived ugliness and inconsistency of the default styles – and then they don’t bother to replace them with anything at all. I would rather designers make an attempt to include them in a way that gives them control over the design than to turn them off altogether.

  6. Thanks for sharing 🙂 For those occasions where the focus indicator is requested to be turned off (it’s always been the client who requests this in my experience), would a possible compromise be to show a focus state for a short period of time (e.g. 2 seconds) via CSS animations?

  7. This was a great article- thank you! I was curious if anyone has had experience/ best practices to share on what the default focus state should be on a page? For ex., we’re working on a site that has a navbar at the top of the page, which is then a list of menu categories people can click on. Throughout the app we default usually to the first item in the navbar but on this main page, the first item in the navbar is a logo (not an actionable element). The second item in the navbar is a cancel order button.

    We’re considering skipping the nav and just moving users to the main menu categories, but am worried about being able to access the items at the top of the navbar like cancel order, dietary preferences, view bag etc.

    Any thoughts would be welcome. Thanks!

  8. Thanks for your question Diana. My colleagues Denis and Aaron helped compile this reply.
    From Denis:
    I believe I hear two different questions here: 1) something about the ideal focus indicator, and 2) something about best practices for skipping main navigation. Hopefully, I won’t be too far off!

    To answer the first part about the default focus indicator I’d say the ideal one is one that is clearly visible, leverages the browser’s basic look and feel, and doesn’t prevent the end users from being able to perceive it. That usually means not doing anything special to it, except making sure that your CSS doesn’t have any instances of outline being set to none or zero… and then of course, testing for keyboard access yourself, so you can validate that it is indeed clearly visible on each tab stop.

    Then, the second part, about best practices for skipping navigation… As long as you’re being consistent in how you implement it form one page to another, it would be fine. If you have additional items at the top of any specific page (that seems fair), just skip over them all the same and bring your end users to the exact same landing point in your page’s template – the beginning of your main content, some specific point in the interface, whatever. Don’t overthink as to whether some people might miss items sitting at the top, just because they’re being skipped. Sighted keyboard users who use the skip feature will see what they skipped anyway and they can also go back. Non-sighted keyboard users will never use the skip feature without also exploring what is available before they do. So one way or another, at some point or another, they would also discover these items as well.

    Hope this helps shed some light. Happy New Year! 🙂

    From Aaron:
    I wrote a UX design oriented post on Focus here:

    I agree with Denis’ assessment with regards to navigation. I might also recommend they consider using a Skip Link with various links in it that may point a keyboard only user to the critical parts of the application they wish to allow that quick access to (they can check out how we do skip links in various areas on

    As for when to use default vs when not to, that’s a somewhat philosophical question. The default focus (ring, typically) should pass color contrast 4.5:1 ratio (or 3:1 if the ring is 2px or greater…Denis may want to gut check that info going out, I believe it’s slated for 2.2), and properly encapsulate the element without being clipped or clipping. However, you can do all kinds of treatments to focus an element. The real question is how first class is the element and does it need a treatment that is distinct from the default. That’s the kind of question that whoever controls their design system or a senior UX would be able to answer as it’s not just being technically compliant but also fitting with the desires of their paradigm and visual treatment. I touch on this in the article I have posted above.

Leave a Reply

Your email address will not be published. Required fields are marked *