Clear focus

Silktide tests that controls on your page - links, buttons, and form fields - change their appearance clearly enough when selected with the keyboard. It is not enough for the change to merely exist; it must be large and high-contrast enough to actually see.

This is a stricter version of Visible focus: that check asks whether any focus indicator exists, while this one measures whether the indicator is prominent enough.

You can try it yourself: load a page and press the Tab key repeatedly. Each control you land on should visibly change, for example gaining a distinct outline or a contrasting background.

Why this matters

People who navigate by keyboard - including many with motor impairments and users of switch devices - depend on seeing where is. A focus indicator that is technically present but faint, thin, or low-contrast is as useless as no indicator at all: the user loses their place on the page and cannot tell which control pressing Enter will activate.

How to fix it

The simplest reliable fix is a solid outline around the focused control, at least 2 pixels thick, in a color that contrasts with both the control and its surroundings.

A two-color indicator guarantees visibility regardless of the background:

/* A transparent outline keeps an indicator in forced-colors mode */
:focus {
  outline: 2px solid transparent;
  /* Light halo + dark ring: one of the two always contrasts */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

This approach comes from WCAG technique C40.

Avoid indicators along a single edge, such as a bottom border: whether they are large enough depends on the length of that edge, which varies for text links.

How Silktide tests this

Simulate a keyboard user tabbing through every focusable element on the page, skipping elements you have excluded from checking, elements hidden from sighted users, and elements with a tabindex of -1.
Compare each element's styles in its focused and unfocused states.
Pass elements that keep the browser's default focus outline, or whose background color changes with a contrast of at least 3:1 between the two states.
Otherwise, measure the outlines, borders, and shadows of both states, and count the area that changes with sufficient contrast. To pass, that area must be at least as large as a 2 pixel thick perimeter around the element, per the 2.4.13 requirement.

Troubleshooting

The focus style needs JavaScript to appear

Focus styles should be defined in alone. If focus is applied by - for example a script adding a class - Silktide may not observe it, and it may not work for assistive technologies without a physical keyboard. Try disabling JavaScript and tabbing through the page to confirm.

Focus styles we cannot measure

Some ways of implementing focus cannot be detected or measured automatically:

Focus drawn with pseudo-elements such as ::before or ::after.
Focus applied via :focus-within on a container.
Focus styles cascaded to child elements, such as a <span> inside a link. Some of these cases are detected, but not all variations.

Elements using these techniques are skipped rather than flagged.

Elements over images or with unpredictable backgrounds

Contrast is calculated against a known background color. When an element sits over an image, or is positioned outside its parent so its background cannot be determined, Silktide skips it rather than guess.

Unexpected elements are focusable

Tags like <div> or <span> become focusable when given a tabindex of 0 or higher, which is how custom controls support keyboard use. If one appears in your results, it is genuinely reachable by keyboard and needs a focus style. See tabindex on MDN.