Before making a WordPress card clickable, count its destinations and controls. One destination with no other controls can use one larger link. A primary link plus a separate action needs distinct, non-overlapping controls. A title-only link is also valid if the rest of the card does not look clickable.
Start with one card on the published page, viewed while signed out. Click its title, image, background and any call to action separately, noting what each actually does.
Compare visual cues with actual targets
Inspect the normal, hover and keyboard-focus states. Does the entire border react when only the title works? Does an unlinked image show a link-style hand cursor? Does a secondary action look distinct?
Treat possible mismatches as design questions, not proof of visitor confusion. Inspect both desktop and narrow mobile layouts; touch users cannot rely on hover.
Choose a structure for each card variant
Consider a hypothetical service card with an image, the title “Website maintenance” and a short description. Several existing title or image links to the same page still represent one destination.
Never put a link or button inside another link. If you choose a larger link, replace existing inner title and image links rather than wrapping a new link around them.
One destination, no other controls
Larger-link option: When the whole-card design suggests navigation, one standard browser link around the non-interactive content can make the target match that design. It should create one keyboard stop, with visible focus that clearly identifies the linked region.
Use a real link with a destination URL, not a script that merely makes a non-interactive container respond to clicks. A click-only script does not provide normal keyboard operation or browser link actions.
Title-only alternative: Keep just “Website maintenance” linked and visibly identifiable as a link. Remove misleading whole-card hover effects and hand cursors from non-interactive areas. This can be preferable when the description needs to be easy to select and copy.
A primary destination plus another action
Now add “Request a maintenance quote,” leading to a separate enquiry page. Keep the service link and quote link in distinct, non-overlapping regions within a non-interactive card container.
Navigation needs a link. An in-page operation, such as opening a details panel, needs a button. That button also needs its own region outside the primary link.
Avoid a blanket invisible link overlay. It can intercept the secondary action, obstruct text selection or leave a title-sized focus outline for a card-sized target. Deliberately separate the regions instead of assuming a layering adjustment makes every interaction work.
Write a change brief for the shared template
Find where the card is maintained: a synced block pattern, page content or theme template. Use the editor’s native link controls where they support your chosen structure; otherwise request scoped theme work. Changing a pattern does not automatically repair previously inserted unsynced copies.
Write one brief for the selected variant:
- Choice and reason: Larger single link, title-only link or separate controls; explain how the destinations, actions and visual cues justify it.
- Targets and destinations: Specify which parts are linked, including any image or padding, and give each exact destination URL. State any button’s action.
- Non-interactive regions and secondary actions: Identify the non-interactive areas and any misleading cues to remove. Give each secondary action its own region outside the primary link.
- Names and focus: Specify meaningful visible wording and accessible names (the names announced by assistive technology) that include that wording. Require a visible focus indicator for each control.
- Ownership and scope: Name the editable pattern, page or template, the responsible maintainer and affected page URLs, including unsynced copies needing separate edits.
Wrapping an image, heading and description can produce a long name announced by a screen reader. If the maintainer shortens it, the name must still include the visible service title, and the description must remain available to assistive technology.
Test the result against the brief
Test on staging first, then representative published pages, including long titles and narrow layouts. An editor preview is not enough.
Keep a separate test record with the page URL, device/browser, expected result and actual result. This checklist is a manual aid, not a saved record. Leave failed or unverified checks open; record when a conditional check does not apply.
These are targeted navigation checks, not a complete accessibility audit. Ask the maintainer to handle any verification you cannot perform.
Retest failed checks after repair, then revisit the original signed-out page and representative affected pages. Close the change only when the agreed regions, destinations, button actions and focus behaviour match the brief.
