Concepts

Targets and focus

How big a control must be, how to keep keyboard focus visible and never hidden by sticky UI, and how modal dialogs manage focus. The WCAG minimums, the larger sizes we choose, and how the library applies them.

A control people cannot hit, a focus ring they cannot see, and a dialog that lets focus escape are three of the most common ways an interface stops working for someone. The standards say what is required. This page says what they require, what they do not, and where our defaults go further.

Definition and vocabulary

Evidence

The contract

How the library implements it

/* An app whose sticky header is taller than the default tells the page so. */
:root {
  --ca-sticky-top: 72px;
  --ca-sticky-bottom: 64px;
}

Anti-patterns

Checklist

• Every pointer target is at least 24 by 24 CSS px, or has an exception you can name.
• On touch, primary controls reach 44 px.
• Focus is visible on every control, in light, dark and high-contrast.
• Tab through the page: focus never ends up entirely under a sticky bar.
• Controls that identify a field or state measure 3:1 against their background.
• At 200% text no label is clipped.
• Open each dialog: focus moves in, Tab stays inside and Escape closes.

Prompt for your AI

Make every control reachable and visible. Pointer targets are at least 24 by 24 CSS px (WCAG 2.5.8) and primary touch controls 44 px; draw small controls small but give them a 44 px hit area. Use @codeatlasdev/ui controls: the coarse-pointer sizing is global, so write no override and no cursor: pointer.

Never remove the focus outline without replacing it; use :focus-visible with --ca-focus-ring. If a header or bar is sticky or fixed, set --ca-sticky-top or --ca-sticky-bottom so scroll-padding keeps focus clear of it. Any border or fill that identifies a control or state must reach 3:1 contrast.

Use Dialog, Sheet or MobilePane for modals so focus moves in, stays inside and Escape closes. Use min-height and rem padding on controls so text at 200% does not clip. Treat 44 px as our default and 24 px as the standard's minimum, and do not say the standard requires 44.