Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

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?

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:

Firefox

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

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

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

Chrome

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

Form fields use the same blue outline.

And so do buttons.

Internet Explorer

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

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

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

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
  • 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.
Scroll to Top