How to Optimize a CTA Button in the Agent Experience Era

What is a CTA button, and who is it designed for?

A call to action is the phrase that moves a user toward a goal. "Buy now", "Try it free", "Get a quote", "Add to basket" are all CTAs. That definition has not changed. What changed is that the word "user" now covers two different entities.

The first user is a person. They scan the screen, respond to colour and position, hesitate, get convinced, click. The second user is an AI agent. It does not look at the page's pixels but mostly at the HTML structure and the accessibility tree. Colour does not move it, urgency copy does not fool it, but an ambiguous label makes it stop or press the wrong button.

Web traffic from AI agents grew 7,851% in a single year (HUMAN Security, 2026). McKinsey projects that agent-mediated commerce could reach $3 to $5 trillion globally by 2030. At that scale, the button being pressed is no longer just a design element. It is a machine interface.

The argument of this article fits in one sentence: a good CTA button convinces a person and tells an agent exactly what will happen, leaving no ambiguity. A button that cannot do both loses a fast-growing share of your traffic.

The old truth every conversion practitioner should keep in mind still holds: the easiest button to click on any website is the back button. The agent equivalent is this: for an agent, the easiest decision is to move to your competitor's site the moment yours gets stuck.

How does an agent see a button?

Nothing else in this article lands until this part does.

A person recognises a button visually: a filled, rounded box that stands apart from the page. An agent mostly recognises it from three sources.

The accessibility tree. The structure the browser builds for screen readers. If an element is marked up as button or a href, the agent knows it is clickable. If a div has a click handler bound to it and is painted to look like a button, to an agent it is a box, not a button.

The accessible name. The text inside the button, or its aria-label. An agent pressing a button labelled "Submit" does not know what will happen; on "Submit the free quote form" it does. A button carrying only an icon and no text is nameless to an agent.

Context and DOM order. The agent reads which heading the button sits under, which price it sits beside, which form it closes. Source order decides, not visual placement.

Some agents also use a screenshot, and for those visual separation and contrast still carry meaning. But the channel every agent shares and trusts is the HTML structure. That is why accessibility is no longer only a compliance matter but a direct Agent Experience layer. A button that is good for a screen reader is good for an agent.

What creates friction for an agent at the CTA:

• Fake buttons built from a div or a span
• Labels that are only an icon, only an arrow, or only "Continue" or "OK"
• Buttons that appear only on hover, because agents do not hover
• A cookie wall, pop-up or full-screen modal covering the button
• Feedback that reports the result of a click only through animation or colour, never in text
• Labels that change from page to page for the same action: "Add to basket", "Buy", "Add"

None of these is fatal for a person. For an agent, each one is a failed task.

How do you write CTA copy that persuades and stays machine readable?

Most of our 2018 rules still stand: write it short, state the benefit, use a verb, be clear. The agent era does not soften those rules, it hardens them. A person can guess at a vague label from context; an agent does not guess. It either stops or gets it wrong.

Verb, object and outcome: use all three

"Submit" is only a verb. "Submit the form" is verb and object. "Get a free quote" is verb, object and outcome. The most valuable label for an agent is the one that states exactly what happens on click. It is the same for a person; the difference is that an agent treats it as a requirement rather than as persuasion.

Same action, same word

An agent learns your language as it moves through your site. If the product page says "Add to basket", the category page says "Add", and the campaign page says "Buy", learning gets harder and the error rate rises. Use one label for one action across the whole site. That belongs in your design system as a rule.

Urgency stops working when it is not real

"Last 3 days" and "Limited stock" can move a hesitant person. They do not move an agent. An agent reads urgency copy as data: if it can verify it, it counts it; if it cannot, it ignores it. Fake urgency is doubly harmful. A person who notices loses trust, and an agent may flag your page as an unreliable source. Use only urgency that is real and backed by structured data.

Dark patterns stop an agent

Shaming buttons like "No, I don't want a discount", pre-ticked boxes, subscription flows that are hard to leave. People get annoyed but usually push through. An agent acts on someone's behalf, so at an ambiguous or manipulative step it stops and asks the person. Every stop moves the conversion one step further away. An honest CTA is no longer only an ethical choice but a technical requirement.

First person: test it, but do not forget the agent

"View my dashboard" can read as warm to a person. To an agent, whose "my" is unclear. Measure first-person copy with an A/B test, and if your agent traffic is high, consider adding a neutral accessible name through aria-label. The visible text targets the person, the accessible name targets the agent.

Do colour, contrast and design still matter?

Yes, but the order of importance changed.

For a person, colour and separation still decide the first second. There is no universally best colour; what matters is how far the button stands apart from the page. Pick a single tone inside your brand palette reserved for the primary action, and never use it on secondary buttons.

The contrast rule is fixed: at WCAG 2.2 AA, at least 4.5:1 between the text and the button background, at least 3:1 for large text, and at least 3:1 between the button itself and the page. Measure it with a checker, not by eye.

The agent era adds two more reasons to follow those rules.

For agents that use a visual model, separation is a signal. Agents working from a screenshot read the most prominent element as the primary action, exactly as a person would. If a page carries five buttons of equal weight, the agent hesitates as much as a person does.

Contrast and accessibility indicate the quality of the accessibility tree. A site that cares about WCAG usually cares about semantic HTML too. That is where the real value sits for agents.

Touch target size, hover, focus and pressed states, a visible focus ring: all still apply. The focus ring matters most, because what is mandatory for a person navigating by keyboard is also the map for an agent navigating the DOM.

One caution: build the button's visual identity in CSS only, and leave the text itself alone. All-caps done with CSS text-transform keeps the accessible name intact; typing the text in capitals makes some agents and screen readers treat it as an abbreviation.

How should CTA placement work in the agent era?

For people the placement rules are largely unchanged: put the CTA where the persuasion completes, break the page into persuasion blocks, and close each block with a CTA that matches that block's promise. Use the thumb zone on mobile, one CTA per screen height is enough on long pages, and never place two buttons of equal weight on one screen.

For an agent, placement means something else. An agent does not scroll, does not scan in an F pattern, and has no concept of the fold. Three things matter to it.

DOM order. In the source, the CTA should follow the content it belongs to. A button moved elsewhere visually with CSS but sitting at the end of the document in code has no context for an agent.

Unobstructed access. Cookie walls, full-screen pop-ups, age gates, chat bubbles. If these stand in front of the CTA, the agent has to solve them first, and many agents stop right there. Make the mandatory ones closable with the keyboard in a single step, and do not show the optional ones to agent traffic.

One primary action. If a screen carries more than one button of equal weight, a person hesitates and an agent either picks at random or asks the person. Keep one primary CTA per screen and make the others clearly secondary.

A sticky bottom bar works for people; for agents, make sure it does not cover content and sits in a sensible place in the DOM.

Beyond the button: structured actions and WebMCP

So far we have covered making an existing button readable to an agent. The real shift is this: in the agent era, the strongest form of a CTA is not a visible button but an action a machine can call.

Schema.org potentialAction

Inside the JSON-LD on your page, potentialAction declares which action the page supports: BuyAction, ReserveAction, OrderAction, SubscribeAction, DownloadAction. It is the machine-language equivalent of the button. Reading the page, an agent learns that a purchase is possible here and what the target address is, without interpreting anything visually. Schema alone is not enough, because most agents also read the visible HTML; the two must be designed together.

WebMCP: the button becomes a tool

WebMCP, developed jointly by Google and Microsoft, advancing as a draft at the W3C and shipping experimentally in Chrome 146, lets you expose your site's functionality to agents directly as tools through navigator.modelContext. Instead of an "Add to basket" button, a tool named add_to_cart with defined parameters and a description of what it does. The agent does not hunt for a button, it calls the tool. Around 89% token efficiency is claimed against screenshot-based automation; in practice it means fewer mistakes on your site and faster completion.

Agentic commerce protocols

Google's AP2 protocol and the ACP developed by OpenAI and Stripe envisage the "Buy" button moving entirely into a protocol layer. The agent completes the payment directly, within the mandate the user granted. In that scenario the CTA is your product flow being open to the protocol, and the payment step asking for human approval at the right point.

Is the button still necessary?

Yes. People keep arriving, and some agents still drive the browser the way a person does. The right approach is layered: a visible, semantic button, structured action data beneath it, and a tool definition wherever possible. All three layers must describe the same action, under the same name, with the same outcome.

Designing the approval point

On actions involving money, contracts or personal data, an agent must not decide alone. The flow behind the CTA has to define clearly where the agent stops and what it asks the person. A "Confirm payment" step must be machine readable for the agent and understandable at a glance for the person. Supervised autonomy starts at the button.

How do you test a CTA button?

The old rule holds: one variable at a time. Change the copy, the colour and the position together and you will not know which change produced the result. Decide the target metric in advance, and make it the final conversion rather than the click. Do not end a test before you have a large enough sample.

The agent era adds two new test layers.

Agent task simulation. Run defined tasks on your site with real agents: "Add this product to the basket and reach checkout", "Fill in the enterprise quote form." Record which button the agent stopped at, which label it misread, which modal caught it. Netlify's open-source AXIS framework scores this kind of test from 0 to 100; what Lighthouse is to web performance, AXIS is to Agent Experience.

Agent log analysis. Separate agent-driven sessions in your server logs. Which button was pressed, at which step did the session end, which error came back? What a heatmap is to a human A/B test, the log is to an agent.

Accessibility auditing. Use tools such as Lighthouse and axe to confirm your buttons are semantic, carry an accessible name and can take focus. A button that fails that audit should not even enter an agent test.

Test them separately, read them together. If a change that lifts human conversion lowers the agent completion rate, make a deliberate decision between the two metrics. Most of the time a solution serves both: a visible icon with hidden but accessible text.

An agent-ready CTA checklist, with examples

Run every button through this list before publishing.

• Is the button a real button or a href?
• Does its accessible name state exactly what happens on click?
• Does the same action carry the same label across the whole site?
• Is there any label that is only an icon or only "Continue"?
• Is the button visible without hover and reachable by keyboard?
• Is a cookie wall, pop-up or modal in front of it? Do the mandatory ones close in one step?
• Is contrast at least 4.5:1 and is the touch target big enough?
• Is there exactly one primary CTA on the screen?
• Is the result of the click reported in text?
• Is urgency copy real and backed by structured data?
• Does the page carry a potentialAction schema describing the same action as the button?
• On actions involving money or contracts, is a human approval point defined?
• Are agent task simulation and log analysis in the test plan?

Weak	Strong	Why
Submit	Get a free quote	Verb, object and outcome together
Continue	Go to checkout	The agent knows where it lands
OK	Confirm the appointment	The outcome is explicit
An arrow only	See the next product	There is an accessible name
No thanks, I don't want this	Close	No shaming, no ambiguity
Only 3 left, buy now	Add to basket, 3 in stock	Urgency as data, not as pressure
Buy / Add / Add to basket, on different pages	Add to basket, everywhere	Consistency

The most common agent-friendly CTA phrases: Add to basket, Try it free, Get a quote, Book a demo, Make an appointment, Sign up, Download free, Go to checkout. They are short, clear and written in the imperative. A person knows what happens the moment they read it, and an agent the moment it parses it.

Closing

In 2018, optimising a CTA button was a question of persuasion. In 2026 it is a question of persuasion and of interface. A button that convinces a person but cannot be read by an agent is missing the fastest-growing part of your traffic. A button an agent can read but that convinces nobody moves no one at all. A button that does both does not look very different from the old one: short, clear, built on a verb, visually distinct, accessible. The difference sits underneath: semantic HTML, consistent labels, structured actions, an honest message.

If you want to measure how ready your buttons are for agents, look at our Agent Experience service and our agent-readiness scan. On the measurement side, our article on AI-driven A/B testing covers the other half of the picture.