Focus, states, motion and user preferences

Focus must remain locatable

Focus indicates where keyboard activation will take effect. Removing outline without an alternative can leave focus functionally present but visually impossible to locate. A one-second indicator does not solve the situation after disappearing.

In the example, :focus-visible draws an outline when the browser determines that focus needs indication. The rule should work in the themes used and without being cut off by containers, overlays or component boundaries.

Hover does not represent every access path

The hover media feature describes whether the primary input mechanism can conveniently hover. It does not identify every device or prove keyboard access. Showing an action only when the mouse is over a card excludes users unable to produce that state.

The example uses hover only for decorative displacement and keeps the button available. When choosing states, separate presentation enhancements from conditions required to perform the task.

Reduce motion without removing information

Prefers-reduced-motion: reduce reports a preference; it does not automatically rewrite author animations. In the example, removing transition and transformation leaves content and action available in their stable state. A progress indicator must preserve information even if presentation stops animating.

Avoid replacing a large displacement with a faster one without evaluating the effect. The adaptation must also win the cascade: a later rule can reactivate animation.

Forced colors change visual cues

In forced-colors, the browser adapts several colors at paint time and can remove box-shadow. A button whose only boundary is a shadow can lose that cue. The example’s border provides another mechanism and uses a system color in active mode.

These decisions should respect the preference rather than globally disabling adaptation. Color choice can depend on native semantics: adding role="button" to a div does not turn it into a native button for every purpose.

Appearance and functional state

A class named disabled or opacity: .4 can suggest unavailability without preventing any action. On a native button, the disabled attribute defines a functional state that :disabled can select. Presentation should follow that state rather than being its only implementation.

When diagnosing an action that looks blocked but still runs, check attributes and behavior. Styling does not validate business rules or replace the server’s decision about an authorized operation.

Focus hidden by content

A fixed footer can completely cover the focused button even when the indicator is correctly defined. Focus Not Obscured (Minimum) addresses total component obscuration by author-created content, with bounded exceptions. It should not be confused with a universal requirement for full visibility.

The lesson’s case has no exception: reserved space, scrolling and overlap must be reviewed, and the component must be confirmed no longer fully hidden.

Contrast across states

For ordinary active text without exceptions, minimum contrast is 4.5:1. A normal state of 5:1 does not compensate for hover at 4.4:1; averaging both is not the relevant evaluation. Large text, logos and incidental content have different conditions that must not be invented to justify an ordinary action.

Question values are supplied as scenario observations without code calculation. Complete component review should still consider focus, boundaries, information and functionality.

Common pitfalls

Removing outline without replacement; showing actions only on hover; hiding information to reduce motion; relying only on shadows in forced-colors; confusing a disabled class with the attribute; assessing contrast only in the normal state.