What it is: when someone navigates with the Tab key, the browser shows an outline around the active link or button. Many designers remove it because it looks ugly, which makes the site impossible to use with a keyboard. The right solution is to style it, not to remove it. The :focus-visible pseudo-class shows the outline only when it is useful, like keyboard navigation, and hides it on mouse clicks.

The wrong way

/* Never do this */
*:focus {
    outline: none;
}

The right way

:focus-visible {
    outline: 3px solid orangered;
    outline-offset: 3px;
    border-radius: 2px;
}

Hide the outline on mouse click only

:focus:not( :focus-visible ) {
    outline: none;
}

Different focus style per component

.lotgrafix-button:focus-visible {
    outline: 3px solid #fff;
    box-shadow: 0 0 0 6px orangered;
}

input:focus-visible,
textarea:focus-visible {
    outline: 2px solid orangered;
    border-color: orangered;
}

Skip to content link

Lets keyboard users jump past the menu. It stays hidden until it receives focus.

<a class="lotgrafix-skip" href="#content">Skip to content</a>

.lotgrafix-skip {
    position: absolute;
    left: 16px;
    top: -100px;
    background: #000;
    color: #fff;
    padding: 10px 16px;
    z-index: 100000;
}

.lotgrafix-skip:focus-visible {
    top: 16px;
}

High contrast and forced colors

@media ( prefers-contrast: more ) {
    :focus-visible {
        outline-width: 4px;
    }
}

@media ( forced-colors: active ) {
    :focus-visible {
        outline: 3px solid CanvasText;
    }
}

Minimum touch target size

button,
.lotgrafix-icon-link {
    min-width: 44px;
    min-height: 44px;
}

Quick checklist

• Every link, button and form field shows a clear focus style.
• The focus color has enough contrast against the background.
• You can reach every interactive element using only the Tab key.