Separate artwork from the offer

A promotional image often starts as a single design file containing photography, headline, price, deadline and a small line of conditions. Exporting that whole file as the only message makes the words difficult to resize, restyle, select and translate. WCAG 2.2 success criterion 1.4.5 says that when the technology can present the visual effect, text should convey information instead of an image of text, with limited exceptions for customizable or essential presentation. For a normal web promotion, the shop can generally keep the photo or illustration as art and place the offer in actual page text. First list every fact a customer needs to decide whether to act: what product or service is included, what benefit is offered, who qualifies, when it applies and where the full terms are available. The list may be short, but it must be accurate. A decorative slogan is a different editorial decision from the price or condition that governs an order.

Understand what the exception actually covers

A brand logotype can be an image because its particular appearance is part of the identity. A photograph of a shop sign may naturally contain words as part of a larger scene. Neither example means that a campaign’s discount, eligibility and deadline can be hidden in pixels merely because a designer likes the typeface. The W3C explanation distinguishes images made primarily to present readable text from pictures that happen to contain text within significant visual content. It also notes that visibly presenting the same information as real text can satisfy the criterion in relevant cases. For an essential image of text, the text alternative still needs to convey its message; an alt attribute reading ‘sale banner’ does not tell the customer the offer. Treat the exception as a question to resolve against the actual asset and message, not a blanket approval for poster-shaped web pages. A merchant can preserve a campaign’s visual identity while keeping transaction facts in flexible text.

Build one source of truth for the claim

Before publishing, give the copy owner a structured brief containing the exact product scope, price or benefit, time window, exclusions and destination URL. The page headline, supporting paragraph, button and destination should all use the same approved terms. If a banner says ‘from’ a price, the landing page needs to explain which option starts there and what can change the total. If the offer is conditional, place the condition where the customer encounters the claim, in legible text, rather than relying on a tiny footnote baked into artwork. Do not treat image alt text as the only alternative when sighted customers who enlarge or restyle text also need the information. For bilingual pages, write the English and Traditional Chinese versions independently against the same confirmed facts. Use the same decision-critical conditions in both, while allowing natural phrasing. Store the offer end date as an editorial control so a stale banner does not survive after the terms expire.

Make the live copy work at real sizes

Put the image in a flexible container and render the headline, details and action as real HTML text in the page layout. The text may sit beside the image or over a suitable background, provided contrast and reflow stay usable. Do not set a fixed text box that clips when customers enlarge fonts or switch to Chinese, where line breaks and character density differ. Test at a narrow phone viewport, with browser zoom and with custom font or color settings. Check that the call to action remains associated with the claim when the layout stacks vertically. If the image is decorative because the visible text already conveys everything needed, give it an appropriate empty alternative rather than repeating a long offer in the screen-reader flow. If the image conveys a separate product detail, write alternative text for that detail. The choice depends on the image’s actual function on this page, not on a universal rule that all banners need identical alt copy.

Rehearse a conditional seasonal offer

Consider a fictional seasonal offer on selected repair services. The first design shows a large discount phrase in the picture and a small date at the bottom. Before release, the editor checks the approved list of qualifying services and the actual campaign interval. The page is rebuilt with a photograph as the banner image, a live headline explaining the benefit, a visible sentence about eligible services and dates, and a link to the complete conditions. The button leads to the matching booking or enquiry step. If the business cannot yet verify the final price for a particular repair, the copy says that an assessment determines the quote; it does not invent a fixed saving. On the Chinese page, the qualification and time window remain just as prominent as in English. When the campaign ends, the live copy and link are reviewed together with the image. This is a process example, not a report of any actual Astera campaign or its performance.

Review the final publication as a customer

Inspect the published composition, not just the design file. Compare every visible claim and condition with the approved brief, then open the destination to check that its scope and dates match. Turn images off or use a screen reader to verify that the offer and action still make sense. Enlarge text and change display settings to see whether the key words remain readable. Read the English and Chinese pages independently; do not assume a translated line carries the same restriction. Check that the image’s alternative text serves its actual purpose and does not invent a discount or repeat the full paragraph without need. Finally, inspect any social preview or email crop: those formats may use the picture, but the web landing page must still carry the complete usable message. A successful review yields a clear offer and a correct path to act, while leaving customers free to adjust the text to their needs.

Control versions across channels

A campaign commonly appears in a homepage hero, a category tile, an email and a social preview. Those assets may be cropped or cached differently, so a merchant should identify the web landing page as the place where complete current terms can be read and linked. The short formats still need truthful claims; they should not show a discount that the landing page has withdrawn. Keep a small approval record of the exact offer wording, eligible items, start and end times, and the person who can change them. Before activation and at expiry, review the live page and the related links. If a promotion is paused early, remove or update the claim across placements, not just the main banner. This is particularly important when English and Chinese images or templates are produced by different staff. One approved fact set keeps the message aligned without forcing the two languages into awkward literal translation.

When deciding whether an image contains essential information, ask a colleague to cover the picture and read only the page text. Can they identify the offer, its principal limitations and the next action? Then cover the live text and inspect the picture: does it make any extra claim, price or deadline that the copy fails to explain? If so, reconcile them before release. Repeat with the page zoomed and in both languages. A design review at a large desktop size will miss a tiny condition that disappears on a phone. If the art includes words merely as part of an incidental photographed scene, document that judgment and still check whether those words accidentally look like an offer. The goal is a single coherent message that remains usable when images fail to load, text settings change or a customer reads the page with assistive technology.

Before you proceed

  • Offer, eligibility and dates appear as readable page text.
  • The landing page supports every banner claim.
  • Both locales and enlarged layouts preserve the conditions.

Sources & further reading