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 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?
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:
- 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.
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.
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.
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
- 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.
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.
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.
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.
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.
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.
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:
- It’s easier to get buy-in for focus indicators when they exist as part of a cohesive design.
- It’s easier to implement focus at the same time as other states, like the hover state.
- 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.