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

What Are Focus Indicators?

Have you ever noticed the blue outlines that sometimes show up around buttons or form fields? 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 they’re 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 that 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 for accessible design: 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.

Why Focus Matters

The key purpose of focus is to give a user guidance.

For users who can see, having a focus that is clearly visible and recognizable is important. It’s a pattern just like any other element you design and should adhere to your standards of consistency. Your focus shows users what is “clickable,” and it helps to identify what an element is.

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 that 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.

Creating an Accessible Default Focus

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

Designing for Focus

  • 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.

Let’s look at the default CSS focus for our pattern library, Cauldron:

Leave a comment

Your email address will not be published.