Accessible Promo Banners: Keep Text Out of the Image

Promotion days are a sales peak for German retail. For Black Friday and Cyber Monday 2025, the German Retail Federation expected sales of 5.8 billion euros (HDE, forecast 2025). In 2026, Black Friday falls on November 27 and Cyber Monday on November 30. In the weeks before, many shops swap home page banners, category teasers and newsletter header images for promotional artwork. That artwork is often produced under time pressure in an image editor, and the text ends up inside the graphic because it is quick and looks good on the designer's screen.

For people who depend on the banner, the experience is different. At the end of 2025, a good 7.8 million people with severe disabilities lived in Germany (Destatis). For 4 percent of them, blindness or visual impairment was the most severe disability, and a good third of people with severe disabilities were 75 or older (Destatis). On top of that come many people without an officially recognized disability who shop with reading glasses, a screen magnifier or enlarged text. Worldwide, according to the World Health Organization, at least 2.2 billion people have a near or distance vision impairment (WHO).

For online shops, this is not a side issue. The WebAIM Million 2026 automatically evaluates the home pages of the top one million websites (WebAIM Million 2026). Home pages in the Shopping category averaged 71.0 detected errors there, 26.6 percent more than the average of all home pages (WebAIM Million 2026). On such pages, the promo banner is often the largest element above the fold and the first thing a visitor notices. If it carries its message only as an image, that message does not reach part of the customer base.

The German Accessibility Strengthening Act (BFSG) applies, among other things, to e-commerce services provided to consumers after June 28, 2025 (BFSG, Section 1(3)). The accompanying ordinance requires websites, including services offered on mobile devices, to be designed in a consistent and appropriate way that is perceivable, operable, understandable and robust (BFSGV, Section 12 No. 3). What that means in detail is set out in the European standard EN 301 549. Its clause 9.1.4.5 requires a web page to satisfy WCAG Success Criterion 1.4.5 (ETSI EN 301 549 V3.2.1).

A promo banner on the home page is part of the shop and therefore part of the service. Anyone who offers or provides a service in breach of the accessibility requirements commits an administrative offense, which can be fined up to 100,000 euros (BFSG, Section 37). Microenterprises that offer or provide services are exempt (BFSG, Section 3(3)). How market surveillance proceeds and which other risks exist is covered in our article on BFSG enforcement; which businesses count as microenterprises is explained in the article on the microenterprise exemption.

How people with low vision use websites was surveyed by WebAIM, with 248 valid responses (WebAIM Low Vision Survey 2018). According to WebAIM, the sample was not controlled and may not represent all users with low vision (WebAIM Low Vision Survey 2018), but it shows the range. 17.9 percent of respondents enlarge content to 400 percent or larger (WebAIM Low Vision Survey 2018), and 51.4 percent use some type of high contrast mode (WebAIM Low Vision Survey 2018). Strong magnification and custom colors are part of everyday browsing for a sizable share of this group.

For an image of text, both paths are dead ends. Under strong magnification, crisp lettering turns into a staircase of pixels, and even a high-resolution graphic eventually hits its pixel limit. A high contrast mode or forced colors change text and background in HTML, but not the pixels of a graphic. The explanation of 1.4.4 notes that contrast and color combinations are harder to change for images of text, which some users need (W3C, Understanding 1.4.4). How shops can support contrast modes properly is shown in our article on forced colors and high contrast mode.

A second stumbling block sits in the page head. According to the Web Almanac 2024, 23 percent of mobile pages restrict zooming through the viewport meta tag, either with user-scalable=no or with a maximum scale of 1 (HTTP Archive Web Almanac 2024). Users can configure their browsers to override this setting, but not every default does so (HTTP Archive Web Almanac 2024). A banner with text in the image, on a page that blocks pinch zoom, leaves hardly any way to read the discount. Checking the viewport meta tag therefore belongs to any banner rebuild.

Not every image of text can be replaced before a promotion starts. In that case it needs at least alternative text, because Success Criterion 1.1.1 requires a text alternative that serves the equivalent purpose for all non-text content (W3C, WCAG 2.2). For images of text, the rule is clear: the alternative text contains the same text that appears in the image (W3C WAI, Images Tutorial). Design effects such as shadows or the typeface are not described, because they do not matter for the message.

Most promo banners are linked and are therefore functional images. For them, the alternative text describes the action or destination, not the picture (W3C WAI, Images Tutorial). If it is missing, screen readers typically announce the file name, the image URL or the link destination (W3C WAI, Images Tutorial). “-20% for Black Week, View deals” then becomes “banner_bw_final.jpg” or a long URL with campaign parameters. What good alternative text looks like for other image types is shown in our article on accessible images and alt text.

How common missing alternative text is shows up in the WebAIM Million 2026. A home page contained 66.6 images on average, and 16.2 percent of all images were missing alternative text (WebAIM Million 2026). 45 percent of the images missing alternative text were linked, and one out of every four linked images was missing alternative text (WebAIM Million 2026). On 53.1 percent of home pages, the evaluation tool found at least one image without alternative text (WebAIM Million 2026). Another 10.8 percent of images with alternative text had questionable values such as “image”, a file name or a repeat of the adjacent text (WebAIM Million 2026).

For screen reader users, missing or improper image descriptions are a well-known obstacle. In WebAIM's tenth screen reader survey, with 1,539 valid responses, they rank sixth out of twelve problem areas (WebAIM Screen Reader Survey 2024). According to WebAIM, the order and indicated difficulty of the list have remained largely unchanged over the last 14 years (WebAIM Screen Reader Survey 2024). At the top, by a notable margin, is CAPTCHA (WebAIM Screen Reader Survey 2024), described in the survey as images presenting text used to verify that you are a human user (WebAIM Screen Reader Survey 2024).

Technically, the rebuild is manageable. The photo becomes the background with an empty alt attribute (alt=""), because it only sets the mood and carries no information of its own. Heading, subline and link sit on top as real text. In the following example, the text sits in a box with an opaque background, and the photo fills the area behind it.

The grid assignment places photo and text in the same cell without absolute positioning. If the text grows through zoom or custom spacing, the cell grows with it instead of text spilling out of the banner or being cut off. Font sizes are set in rem and therefore follow the browser's base setting. The link carries meaningful text, so the screen reader announces “View deals, link” rather than a file name. For an accessible design system, it pays to build this component properly once and reuse it for every promotion.

In day-to-day work, the solution belongs in the template, not in each individual promotion. The content team then maintains heading, subline, link target and background image as separate fields, and the image is exported without text. That saves work along the way: a price change or a second language is a text edit, not a new graphic export. For artwork supplied from outside, for example by manufacturers, an example from the W3C explanation fits: an event poster containing text is uploaded, and because the content management system does not allow an HTML recreation, the same text is posted as regular text next to the poster (W3C, Understanding 1.4.5).

The following steps only need a browser, a screen reader and a contrast tool. They can be run quickly for every banner template and cover the criteria discussed in this article. The relevant success criterion is given in parentheses.

This check does not replace a full audit, but it finds typical banner defects before a promotion goes live. Which testing tools complement such a manual check, and where their limits lie, is described in our article on accessibility testing tools. If you also use countdown bars and voucher pop-ups for Black Week, you will find the matching checks in the article on accessible Christmas promotions. If several banners run as a carousel, the rules for moving content from our article on accessible sliders apply as well.