Visible focus

When an interactive element has keyboard focus, there should be a visible focus state. For those navigating by keyboard, this indicates their current position within the interface—just as a cursor indicates current placement of the mouse.

Note:

Some screen readers offer their own version of a visible focus state. This is not the same as the visible focus state that appears on interactive elements, as screen readers access all content, not just interactive elements.

Because people perceive color differently, the focus state cannot be represented by color alone and must pass a graphical element contrast ratio of 3:1. Esri’s Calcite Design System uses both color and a thick border-stroke in their focus states.

Note:

Focus state and active state are not the same and should not be presented the same visually. Active state indicates a previous selection, whereas focus state indicates the current location of keyboard navigation.

Related criteria

The Web Content Accessibility Guidelines tied to this topic are as follows:

• 2.4.7 Focus Visible

• 2.4.11 Focus Not Obscured (Minimum)

• 1.4.1 Use of Color

• 1.4.3 Contrast (Minimum)