Skip to content
tally learning

Visible Focus

12 minute read

Last updated:

Summary

Section titled “Summary”

People who use a mouse depend on seeing the mouse cursor to tell them when an interactive element is in focus. In the same way, sighted keyboard navigators need to see the keyboard focus indicator.

A visible focus indicator tells people, with visual cues, where they are on the page. It should highlight all the interactive elements on the site as people tab from one interactive element to another. Without this indicator, sighted keyboard navigators may become confused. They may not understand where they are on a page or be able to complete tasks.

Overview

Section titled “Overview”

The cursor is always visible when a user navigates content with a mouse. It is easy to move it straight to any location across all types of content and see where you are on the page. It takes one click to interact with an element, and then you can immediately click a different spot. There is no need to consider spatial limitations.

People who navigate with a keyboard use the Tab key to move sequentially from one interactive element to another. They can’t skip elements or jump directly to another element. The Tab key moves the focus one step forward. Shift+Tab moves the focus one step back. While navigating with a keyboard, these individuals must know where they are, just like people who use a mouse. If the focus indicator is visible, sighted keyboard navigators can see the currently focused element and know where they are on the page.

See Using the Keyboard to learn more about keyboard navigation.

Who is Helped

Section titled “Who is Helped”

Visible focus primarily supports people with motor disabilities. These individuals are sighted keyboard navigators who can’t use a mouse. They use keyboards or alternative input devices, like mouth sticks or laser pointers. What these devices have in common is that they rely on the keyboard focus to navigate digital content.

Other groups that benefit from having a visible focus include:

  • Individuals with low or limited vision who rely on good contrast to see content on a web page.
  • Individuals with attention, memory, or executive-function limitations may lose track of where they are on a page.
  • Sighted users who prefer to use the keyboard instead of a mouse or tap pad.
  • Sighted users who prefer to use a mouse, but it is not available for some reason (situational disability).

Guidelines

Section titled “Guidelines”

Requirements

Section titled “Requirements”

The Web Content Accessibility Guidelines (WCAG) Success Criteria 2.4.7 Focus visible (AA) requires that keyboard-operable interfaces have a visible focus indicator.

The requirement is fairly simple - the focus indicator must be present, as it tells sighted keyboard navigators where they are on a page. To comply with this criterion, you need only rely on the default focus settings that browsers and operating systems have built-in. However, it’s best to replace these default settings with something better. The key is to ensure you don’t turn off the default focus in your code.

The WCAG criterion includes two additional requirements where some explanation might be handy. The visible focus indicator must:

  1. Be visible in at least one mode of operation.

    Products (such as applications) with more than one mode of operation must have at least one mode that offers visible focus. For example, if the app’s default mode does not include a visible focus indicator, there must be another mode that does.

  2. Remain visible without time limitations.

    Once an interactive element receives focus, the focus indicator must remain visible until the user tabs away from the element. (A disappearing focus rarely happens, but it is worth mentioning the possibility.)

The visible focus indicator can come from any of these sources:

  • Operating system default focus indicator for applications.
  • Browser default focus indicator for websites.
  • Custom, author-generated focus indicators defined in code.

Default Focus Indicators

Section titled “Default Focus Indicators”

Operating system default focus indicators

Operating systems like Windows and macOS have built-in focus indicators. The default focus indicator on Microsoft Windows is a black outline around the focused element. MacOS shows focus by drawing a ring around an item or highlighting it.

On Windows, the default focus is visible automatically when navigating the computer and desktop applications with the keyboard. In the example below, a black outline shows that the Edge browser is selected.

The screenshot shows Microsoft’s Settings panel with a list of the available applications. The visible focus indicator is a black outline around the Edge icon.
Figure 1: Microsoft Settings Panel Default Focus Indicator

On Mac, you can make keyboard navigation of the computer available by turning on the “Keyboard Navigation” option. This option lets you use your keyboard like a mouse. In the example below, the blue highlight on the left column of the System Settings panel shows the “Keyboard” option with focus.

The screenshot shows the Settings panel with the “Keyboard” option selected. The visible focus indicator is a blue background behind the focused “keyboard” option.
Figure 2: MacBook Pro Settings Panel Default Focus Indicator

Browser default focus indicators

If a website does not define a custom focus indicator, browsers will use their built-in styles unless they are disabled in style sheets. Default focus indicators look slightly different in each browser. The browser adds an outline of varying color and thickness around the interactive element when it has focus.

When we rely on the browser’s focus, the added outline shows where we are when tabbing through the page. The following figure shows the default focus for a few well-known browsers.

Default link focus indicators are shown for four browsers on both a white and light blue background. Firefox has a thin, light blue line, Chrome and Edge have a thin black line, and Safari has a thicker but very light blue line.
Figure 3: Browser Default Focus Indicators

Not all of these indicators have good contrast on a white background: they can easily “swallow” the focus indicator when the colors are similar. It is also difficult to see the focus indicator if it is next to a button that has a similar color. Despite these drawbacks, the default focus is better than no focus and should never be disabled.

Some designers may disable the default focus because they find its presence “ugly” or think it doesn’t fit their design. However, it is important to understand that the focus indicator is a necessary tool for some users. Instead of turning it off, you can change its appearance to work well with the design.

A frequent method of turning off the visible focus happens through CSS (Cascading Style Sheets). This example shows one way of using styles to disable the default focus. Please note that we only show this example for informational purposes; you should not use it.

Avoid: *:focus {outline: none !important;}

Screenshot of the Browser DevTools Styles pane with the styles for “focus” and “focus-visible” attributes displayed. The following text and code example fully describe the image.
Figure 4: Browser DevTools Styles Pane with Forced Focus

This screenshot shows the Browser DevTools Styles pane with “focus” and “focus-visible” selected to force these two states to appear. The results show how a website’s styles can disable the browser’s default focus indicator. Even worse, this website also has a custom focus style that is disabled. The code example below replicates the code in the image.

  • The first style listed is the browser’s default keyboard focus.
  • The second style is the website’s custom focus style for links.
  • The third style turns both of these focus indicators off.

The first two styles in the image have lines through them to indicate they are disabled. The code example below is the same as that in the image.

CSS Outline Example
:focus-visible {outline: -webkit-focus-ring-color auto 1px;}
a:focus {outline: dotted thin;}


a {outline: 0 !important;}

The most important aspect of this WCAG criterion is understanding that you should never disable the focus like this. It harms the website’s accessibility status and prevents sighted keyboard navigators from seeing the default focus. Even if you do nothing to improve the focus indicator’s appearance, you should, at a minimum, avoid turning it off.

Custom Focus Indicators

Section titled “Custom Focus Indicators”

You can customize focus indicators in the style sheet. This functionality allows you to create focus indicators that contrast well with all parts of the web page, regardless of the background color. This way, you can avoid the existing contrast issues inherent in the default focus indicator. Most web pages have more than one background color, so defining multiple focus indicator styles is often necessary. For example, a dark banner area will need a light-colored focus indicator, while other parts of the page with a white background will need a darker focus indicator.

There are multiple creative solutions to build custom focus indicators that are visible, stand out from adjacent colors, and fit in with the website’s look. A careful review, planning, and creativity can make the focus indicator an integral part of the design or even an outstanding design element. For more information on focus indicator color choices and appearance, see:

Some common visible focus indicator implementations include the following examples.

A name input field has a blue border when focused, in addition to the vertical bar placed at the beginning of the field.
Figure 5: Input Field with Blue Border and Vertical Bar

A blinking vertical bar is the default focus indicator for input fields. You can add additional highlighting to focused form fields, such as changing the border color when the field receives focus. You should not remove the vertical bar. The blinking bar is a well-established symbol that tells people they are in an editable text field.

A menu with a light gray background has a heavy blue bar under the selected menu item.
Figure 6: Colorful Bar Below a Menu Item

Menus often add a colorful bar to indicate the selected menu item. Use a horizontal bar for horizontal menus and a vertical bar for vertical menus.

A blue button with white text on a white background, shown in its unfocused and focused states. The focused button inverts its color so that its text and border are blue and its background is white.
Figure 7: Inverting Colors

Inverting colors is a common method of indicating a selected button. However, you should avoid this method if a site’s design contains both solid and outlined buttons.

A blue button on a black background shown in its unfocused and focused states. The focused button has a wide yellow outline.
Figure 8: Adding a Contrasting Outline

Adding a contrasting outline is one of the most common ways to implement a visible focus indicator. Choosing a color with good contrast can be tricky, especially if the site has multiple background colors.

A black button on a blue background shown in its unfocused and focused states. The focused button has a white outline, and the white outline has a black outline.
Figure 9: Adding Both Black and White Outlines

There are many other possible designs for focus indicators, but adding two external outlines - one black and one white - is a “universal” focus indicator that always works.

  • Using both a dark and light outline ensures the indicator has good contrast on both dark and light backgrounds.
  • Using external focus indicators means that people do not need to rely on seeing a color change to notice the indicator, as the button’s size also changes.
Section titled “Related Success Criteria”

As this article shows, while having a visible focus indicator is mandatory, it may not be enough to ensure that people can always see it.

Most web pages change color more than once, so the default focus indicator may or may not be visible as it moves over different parts of the page. Even when you provide a custom focus indicator, some people may have difficulty seeing it depending on the indicator’s color and the background color. For these reasons, we need other strategies and criteria to ensure the focus indicator is always perceptible.

How to Test

Section titled “How to Test”

Manual Test

Section titled “Manual Test”

Start by ensuring that the visible focus indicator exists. You can review this manually using the keyboard.

  1. Start the test by moving the mouse cursor to the website’s address bar and clicking at the end of the URL. Make sure that the full URL is not highlighted.
  2. Use the Tab key on your keyboard to move forward.
    • Hint: Hold the Shift key down while pressing Tab to move backward.
    • See Using the Keyboard for detailed information on keyboard navigation.
  3. When you start tabbing, a focus indicator should appear and move from one element to another every time you press the Tab key. You should be able to “tab” to every link, button, and form field on the page.
  4. Check if the focus indicator always remains visible - it should not disappear.

Tools to Highlight Focusable Elements

Section titled “Tools to Highlight Focusable Elements”

Sometimes, the page is not fully accessible, and you can’t see the visible focus for all elements. Sometimes, you can’t see the visible focus for any element. How do you know with certainty what elements are focusable when you can’t see the focus indicator?

Single-purpose Bookmarklets are available to highlight every single interactive element that should receive focus. They force a visible indicator to appear, usually by adding a strong, colored outline around the active element. You might need a tool like this to verify that all focusable elements actually received focus when you manually tabbed through the page. These are two of many “force-focus” bookmarklets available:

You are done with your inspection once you verify that every interactive element has a visible focus indicator when you tab through the page.

Section titled “Related Test Criteria”

It is important to remember that for a fully compliant focus indicator, you still must check color contrast to pass the requirement for non-text contrast. There is no specific requirement for the look of a visible focus indicator; it can have different shapes, forms, and colors, but there are best practices regarding its size and the contrast between its focused and unfocused states. As discussed previously, you can read Focus Indicator Contrast and Focus Indicator Appearance (Ta11y) to learn more about these details.

References

Section titled “References”