Card one inner link hit area
card-one-inner-link-hit-area
Card: one inner link; hit-area wraps the card. Do not wrap the whole card in `<a>` (screen readers announce the entire contents; the links landmark becomes unusable). Keep a large click target via CSS hit-area on a single inner anchor. Dual-cite USWDS “card is an action, not a frame.”
Description
A card should have one inner link; the hit-area wraps the card via CSS. Do not wrap the whole card in `<a>` — screen readers announce the entire contents and the links landmark becomes unusable. Dual-cite USWDS “card is an action, not a frame.” Pass when one inner `<a>` plus CSS hit-area makes the card clickable without the card itself being the `<a>`; fail when the whole card is wrapped in `<a>` or multiple competing links break the single inner-anchor pattern.
When to use
Cards act as links or primary navigation targets.
Not when
Non-linked informational cards with no click-through action.
Agent hint
Use one inner anchor plus CSS hit-area; never wrap the whole card in <a>.
One inner `<a>`; CSS hit-area makes the card clickable; the card itself is not the `<a>`.
The whole card is wrapped in `<a>`, or multiple competing links sit in the card without a single inner-anchor pattern.
Citations