Kurz und einfach erklärt
Viele Shops zeigen zur Black Week große Werbe-Bilder. Oft steht der Rabatt als Text im Bild. Das ist für viele Menschen ein Problem.
Text im Bild wird beim Vergrößern unscharf. Man kann seine Farbe nicht ändern. Ein Vorlese-Programm kann ihn nicht lesen. Es liest dann oft nur den Namen der Datei vor.
Die Regeln für gute Webseiten sagen: Text soll echter Text sein. Ausnahmen gibt es nur wenige, zum Beispiel ein Logo.
Besser ist das so: Das Foto liegt hinten. Der Text liegt als echter Text davor. Hinter dem Text ist eine dunkle Fläche. Dann kann man ihn gut lesen.
Vor dem Start der Aktion lohnt ein Test. Man markiert den Text, macht die Seite größer und lässt sie sich vorlesen.
Zur Black Week bekommt die Startseite vieler Onlineshops ein neues Gesicht: ein breites Aktionsbanner, ein Foto, darauf in großen Buchstaben „-20 % zur Black Week“. Meist ist dieser Text Teil der Grafik. Er wurde im Bildprogramm gesetzt und als JPG exportiert. Für Menschen, die mit Vergrößerung, Screenreader oder eigenen Farben einkaufen, ist das eine Barriere: Der Text verpixelt beim Zoomen, lässt sich nicht umfärben und ohne Alternativtext nicht vorlesen. Das Erfolgskriterium 1.4.5 der WCAG 2.2 verlangt deshalb Text statt Bildern von Text, sofern die eingesetzte Technik die gewünschte Darstellung erreichen kann (W3C, WCAG 2.2). Dieser Beitrag zeigt, was das Kriterium für Aktionsbanner bedeutet, welche Ausnahmen es gibt, wie ein Banner als HTML-Text aufgebaut wird und welche Prüfschritte vor dem Aktionsstart sinnvoll sind.
Das Wichtigste in Kürze
- WCAG 1.4.5 auf Stufe AA verlangt echten Text statt Bild von Text, sobald HTML und CSS die Gestaltung erreichen können; ausgenommen sind nur anpassbare Bilder und wesentliche Darstellungen wie Logos (W3C, WCAG 2.2).
- Ein Alternativtext erfüllt 1.1.1, aber nicht 1.4.5, weil er nicht angezeigt wird; auf 53,1 Prozent der meistbesuchten Startseiten fehlt mindestens einem Bild der Alternativtext (WebAIM Million 2026).
- Bannertext über einem Foto braucht an der kontrastärmsten Stelle mindestens 4,5:1, große Schrift 3:1; eine deckende Textfläche hält den Wert unabhängig vom Motiv (W3C, WCAG 2.2).
- Als HTML gebaut, wächst Bannertext bei 200 Prozent Zoom mit, bricht bei 320 CSS-Pixeln Breite um und wird vorgelesen; das Hintergrundfoto bekommt ein leeres alt-Attribut (W3C, WCAG 2.2).
- Black Friday fällt 2026 auf den 27. November: Vorher jede Bannervorlage prüfen, also Text markieren, auf 200 Prozent zoomen, Screenreader starten, Kontrast messen und die Ansicht auf dem Smartphone kontrollieren.
Warum Aktionsbanner im Herbst zählen
Aktionstage sind für den Handel ein Umsatzschwerpunkt. Für Black Friday und Cyber Monday 2025 rechnete der Handelsverband Deutschland mit einem Umsatz von 5,8 Milliarden Euro (HDE, Prognose 2025). Im Jahr 2026 fällt Black Friday auf den 27. November, der Cyber Monday auf den 30. November. In den Wochen davor tauschen viele Shops Startseitenbanner, Kategorieteaser und Newsletter-Kopfbilder gegen Aktionsmotive aus. Diese Motive entstehen oft unter Zeitdruck im Bildprogramm, und der Text wandert mit in die Grafik, weil das schnell geht und auf dem Bildschirm der Gestalterin gut aussieht.
Wer auf das Banner angewiesen ist, erlebt es anders. In Deutschland lebten zum Jahresende 2025 gut 7,8 Millionen Menschen mit schwerer Behinderung (Destatis). Bei 4 Prozent von ihnen war Blindheit oder eine Sehbehinderung die schwerste Behinderung, und gut ein Drittel der schwerbehinderten Menschen war 75 Jahre oder älter (Destatis). Dazu kommen viele Menschen ohne amtlich festgestellte Behinderung, die mit Lesebrille, Bildschirmlupe oder vergrößerter Schrift einkaufen. Weltweit haben nach Angaben der Weltgesundheitsorganisation mindestens 2,2 Milliarden Menschen eine Seheinschränkung in der Nähe oder Ferne (WHO).
Für Onlineshops ist das kein Randthema. Die WebAIM Million 2026 wertet die Startseiten der eine Million meistbesuchten Websites automatisch aus (WebAIM Million 2026). Startseiten der Kategorie Shopping kamen dort im Schnitt auf 71,0 erkannte Fehler, 26,6 Prozent mehr als der Durchschnitt aller Startseiten (WebAIM Million 2026). Das Aktionsbanner ist auf solchen Seiten oft das größte Element im sichtbaren Bereich und das erste, das ein Besucher wahrnimmt. Transportiert es seine Botschaft nur als Bild, kommt sie bei einem Teil der Kundschaft nicht an.
Was WCAG 1.4.5 verlangt
Das Erfolgskriterium 1.4.5 „Bilder von Text“ gehört zur Konformitätsstufe AA. Es verlangt: Wenn die eingesetzten Technologien die gewünschte visuelle Darstellung erreichen können, wird Text verwendet, um Informationen zu vermitteln, und kein Bild von Text (W3C, WCAG 2.2). Ein Bild von Text ist nach der Begriffsbestimmung Text, der in einer nicht textlichen Form dargestellt wird, etwa als Bild, um eine bestimmte visuelle Wirkung zu erzielen (W3C, Understanding 1.4.5). Das Ziel fasst das W3C in einem Satz zusammen: Nutzer können anpassen, wie Text dargestellt wird (W3C, Understanding 1.4.5).
Zwei Ausnahmen nennt das Kriterium. Die erste betrifft anpassbare Bilder: Ein Bild von Text ist zulässig, wenn Nutzer es visuell an ihre Anforderungen anpassen können. Die zweite betrifft wesentliche Darstellungen: Ein Bild von Text ist zulässig, wenn eine bestimmte Darstellung für die vermittelte Information unverzichtbar ist. Text in einem Logo oder Markennamen gilt ausdrücklich als wesentlich (W3C, Understanding 1.4.5). Als weitere Beispiele nennt das W3C die Abbildung einer Schriftfamilie und die Wiedergabe eines historischen Briefs, bei dem gerade die Originalform die Information über seine Entstehungszeit trägt (W3C, Understanding 1.4.5).
Für ein Aktionsbanner greift in der Regel keine der beiden Ausnahmen. Ein Rabatttext lässt sich mit HTML und CSS in nahezu jeder Schrift, Farbe und Größe setzen, Webfonts eingeschlossen. Die Absicht des Kriteriums beschreibt das W3C so: Wenn Autoren denselben visuellen Effekt mit Text erreichen können, sollen sie die Information als Text darstellen statt als Bild (W3C, Understanding 1.4.5). Die Erläuterung erwähnt zwar auch Schriften, die nicht verbreitet sind oder nicht weitergegeben werden dürfen (W3C, Understanding 1.4.5). Ob für die Kampagnenschrift eine Weblizenz vorliegt, lässt sich aber beim Schriftanbieter klären, und für Unterzeile und Schaltfläche genügt ohnehin eine gut lesbare Webschrift.
Eine Klarstellung in der Erläuterung ist für die Praxis besonders nützlich. Das Kriterium zielt auf Fälle, in denen Bilder von Text anstelle von Text verwendet werden. Werden Bild und gleichwertiger Text beide angezeigt, ist 1.4.5 erfüllt (W3C, Understanding 1.4.5). Ein Alternativtext reicht dafür nicht, denn er wird nicht angezeigt, sondern nur von Hilfstechnik ausgegeben. Wer ein gestaltetes Motiv behalten will, setzt denselben Text zusätzlich sichtbar daneben oder darunter.
Stufe AAA: noch strenger
Was das BFSG damit zu tun hat
Das Barrierefreiheitsstärkungsgesetz gilt unter anderem für Dienstleistungen im elektronischen Geschäftsverkehr, die nach dem 28. Juni 2025 für Verbraucher erbracht werden (BFSG, § 1 Abs. 3). Die zugehörige Verordnung verlangt, dass Webseiten einschließlich der auf Mobilgeräten angebotenen Dienstleistungen auf konsistente und angemessene Weise wahrnehmbar, bedienbar, verständlich und robust gestaltet werden (BFSGV, § 12 Nr. 3). Was das im Einzelnen heißt, beschreibt die europäische Norm EN 301 549. Ihr Abschnitt 9.1.4.5 verlangt, dass eine Webseite das WCAG-Erfolgskriterium 1.4.5 erfüllt (ETSI EN 301 549 V3.2.1).
Ein Aktionsbanner auf der Startseite ist Teil des Shops und damit Teil der Dienstleistung. Wer eine Dienstleistung entgegen den Barrierefreiheitsanforderungen anbietet oder erbringt, handelt ordnungswidrig; die Geldbuße kann bis zu 100.000 Euro betragen (BFSG, § 37). Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen (BFSG, § 3 Abs. 3). Wie die Marktüberwachung vorgeht und welche Risiken daneben bestehen, beschreibt unser Beitrag zur Durchsetzung des BFSG; welche Betriebe als Kleinstunternehmen gelten, erklärt der Beitrag zur Ausnahme für Kleinstunternehmen.
Vier Kriterien, ein Banner
Ein Banner mit eingebranntem Text verfehlt selten nur ein Kriterium. Meist hängen vier zusammen, und jedes betrifft eine andere Gruppe von Nutzerinnen und Nutzern. Die folgende Übersicht stellt sie laut WCAG 2.2 nebeneinander, jeweils mit dem Befund, den eine Prüfung an einem Bildbanner typischerweise findet.
| Kriterium | Stufe | Anforderung | Typischer Befund am Bildbanner |
|---|---|---|---|
| 1.1.1 Nicht-Text-Inhalt | A | Textalternative mit gleichem Zweck, bei Bedienelementen ein Name, der den Zweck nennt | Kein alt-Attribut, der Screenreader liest Dateiname oder Linkziel vor |
| 1.4.3 Kontrast (Minimum) | AA | 4,5:1 für Text und Bilder von Text, 3:1 für große Schrift | Weiße Schrift auf hellem Bildbereich, der Kontrast schwankt mit dem Motiv |
| 1.4.4 Textgröße ändern | AA | Text bis 200 Prozent vergrößerbar, ohne Inhalt oder Funktion zu verlieren | Bilder von Text sind ausgenommen, verpixeln aber beim Zoomen und wachsen beim reinen Textzoom nicht mit |
| 1.4.5 Bilder von Text | AA | Text statt Bild von Text, wo die Technik die Gestaltung erreichen kann | Rabatt und Laufzeit stehen nur in der Grafik, obwohl HTML und CSS sie darstellen könnten |
Auffällig ist die Zeile zu 1.4.4. Das Kriterium nimmt Bilder von Text ausdrücklich aus: Text muss sich bis 200 Prozent vergrößern lassen, Bilder von Text und Untertitel ausgenommen (W3C, WCAG 2.2). Die Erläuterung begründet, warum das kein Freibrief ist: Bilder von Text skalieren schlechter als Text, weil sie zum Verpixeln neigen, und deshalb empfiehlt das W3C, Text zu verwenden, wo es möglich ist (W3C, Understanding 1.4.4). Die Lücke, die 1.4.4 lässt, schließt also 1.4.5. Wer nur auf Textvergrößerung prüft, übersieht das Bildbanner; wer 1.4.5 prüft, findet es.
Zwei weitere Kriterien der Stufe AA betreffen Bannertext indirekt. Erfolgskriterium 1.4.10 verlangt, dass Inhalte bei einer Breite von 320 CSS-Pixeln ohne Scrollen in zwei Richtungen nutzbar bleiben; das entspricht einer Ausgangsbreite von 1.280 CSS-Pixeln bei 400 Prozent Zoom (W3C, WCAG 2.2). Erfolgskriterium 1.4.12 verlangt, dass nichts verloren geht, wenn Nutzer die Abstände vergrößern, etwa die Zeilenhöhe auf das 1,5-Fache der Schriftgröße (W3C, WCAG 2.2). Ein Bild von Text kann beides nicht leisten: Es bricht nicht um und hat keine Abstände, die sich überschreiben ließen.
Zoom, Lupe und eigene Farben
Wie Menschen mit Sehbehinderung Webseiten nutzen, hat WebAIM in einer Umfrage mit 248 gültigen Antworten erhoben (WebAIM Low Vision Survey 2018). Die Stichprobe war nach Angabe von WebAIM nicht kontrolliert und steht nicht für alle Menschen mit Sehbehinderung (WebAIM Low Vision Survey 2018), zeigt aber die Spannweite. 17,9 Prozent der Befragten vergrößern Inhalte auf 400 Prozent oder mehr (WebAIM Low Vision Survey 2018), und 51,4 Prozent nutzen eine Form von Hochkontrastmodus (WebAIM Low Vision Survey 2018). Starke Vergrößerung und eigene Farben gehören für einen beachtlichen Teil dieser Gruppe also zum Alltag.
Für ein Bild von Text sind beide Wege Sackgassen. Bei starker Vergrößerung wird aus einer scharfen Schrift eine Treppe aus Bildpunkten, und auch eine hochauflösende Grafik stößt irgendwann an ihre Pixelgrenze. Ein Hochkontrastmodus oder erzwungene Farben ändern Text und Hintergrund im HTML, aber nicht die Pixel einer Grafik. Die Erläuterung zu 1.4.4 hält fest, dass sich bei Bildern von Text Kontrast und Farbkombinationen schwerer ändern lassen, was manche Nutzer brauchen (W3C, Understanding 1.4.4). Wie Shops den Kontrastmodus sauber unterstützen, zeigt unser Beitrag zum Kontrastmodus mit forced-colors.
Ein zweiter Stolperstein liegt im Seitenkopf. Laut Web Almanac 2024 schränken 23 Prozent der mobilen Seiten das Zoomen über den viewport-Meta-Tag ein, entweder mit user-scalable=no oder mit einer maximalen Skalierung von 1 (HTTP Archive Web Almanac 2024). Nutzer können ihre Browser so einstellen, dass sie diese Vorgabe übergehen, doch nicht jede Voreinstellung tut das (HTTP Archive Web Almanac 2024). Ein Banner mit Text im Bild auf einer Seite, die das Aufziehen mit zwei Fingern verhindert, lässt kaum eine Möglichkeit, den Rabatt zu lesen. Beim Umbau der Banner gehört deshalb ein Blick in den viewport-Meta-Tag dazu.
Mobil: wenn das Banner schrumpft
Auf dem Smartphone zeigt sich das Problem besonders deutlich. Ein Banner, das am Desktop die volle Inhaltsbreite einnimmt, wird auf einem schmalen Bildschirm auf einen Bruchteil verkleinert. Der eingebrannte Text schrumpft mit, und aus einer gut lesbaren Unterzeile wird eine Reihe winziger Buchstaben. Viele Shops behelfen sich mit einer zweiten Grafik für Mobilgeräte, also doppelter Exportarbeit für jede Aktion und jede Sprache. Bannertext als HTML bricht dagegen um, behält seine Schriftgröße und passt sich der verfügbaren Breite an.
Dazu kommen Situationen, an die beim Gestalten selten jemand denkt. Bei schwacher Verbindung laden Bilder verzögert oder gar nicht, und dann fehlt mit dem Bild auch die Botschaft. Die Übersetzungsfunktion des Browsers übersetzt HTML-Text, aber keine Grafik. Echter Text bleibt in all diesen Fällen lesbar, lässt sich mit der Suchfunktion des Browsers finden und wird auch von Suchmaschinen als Text erfasst. Wie Barrierefreiheit und Auffindbarkeit zusammenhängen, beschreibt unser Beitrag zum doppelten Hebel aus Barrierefreiheit und SEO.
Alternativtext, wenn das Bild bleibt
Nicht jedes Bild von Text lässt sich vor dem Aktionsstart ersetzen. Dann braucht es mindestens einen Alternativtext, denn Erfolgskriterium 1.1.1 verlangt für jeden Nicht-Text-Inhalt eine Textalternative, die denselben Zweck erfüllt (W3C, WCAG 2.2). Für Bilder von Text ist die Regel klar: Der Alternativtext enthält denselben Text, der im Bild steht (W3C WAI, Images Tutorial). Gestaltungseffekte wie Schatten oder Schriftart werden nicht beschrieben, weil sie für die Botschaft unerheblich sind.
Die meisten Aktionsbanner sind verlinkt und damit funktionale Bilder. Für sie beschreibt der Alternativtext die Aktion oder das Ziel, nicht das Motiv (W3C WAI, Images Tutorial). Fehlt er, geben Screenreader typischerweise den Dateinamen, die Bildadresse oder das Linkziel aus (W3C WAI, Images Tutorial). Aus „-20 % zur Black Week, Angebote ansehen“ wird dann „banner_bw_final.jpg“ oder eine lange Adresse mit Kampagnenparametern. Wie gute Alternativtexte für andere Bildtypen aussehen, zeigt unser Beitrag zu barrierefreien Bildern und Alt-Texten.
Wie verbreitet fehlende Alternativtexte sind, zeigt die WebAIM Million 2026. Eine Startseite enthielt im Schnitt 66,6 Bilder, und 16,2 Prozent aller Bilder fehlte der Alternativtext (WebAIM Million 2026). 45 Prozent der Bilder ohne Alternativtext waren verlinkt, und jedem vierten verlinkten Bild fehlte der Alternativtext (WebAIM Million 2026). Auf 53,1 Prozent der Startseiten fand das Prüfprogramm mindestens ein Bild ohne Alternativtext (WebAIM Million 2026). Weitere 10,8 Prozent der Bilder mit Alternativtext trugen fragwürdige Angaben wie „image“, einen Dateinamen oder eine Wiederholung des benachbarten Texts (WebAIM Million 2026).
Für Screenreader-Nutzer sind fehlende oder unpassende Bildbeschreibungen ein bekanntes Hindernis. In der zehnten Screenreader-Umfrage von WebAIM mit 1.539 gültigen Antworten stehen sie auf Platz sechs von zwölf Problemfeldern (WebAIM Screen Reader Survey 2024). Reihenfolge und Gewichtung der Liste sind laut WebAIM seit 14 Jahren weitgehend unverändert (WebAIM Screen Reader Survey 2024). Ganz oben steht mit deutlichem Abstand CAPTCHA (WebAIM Screen Reader Survey 2024), in der Umfrage beschrieben als Bilder mit Text, die prüfen sollen, ob ein Mensch die Seite nutzt (WebAIM Screen Reader Survey 2024).
Alternativtext ist die Untergrenze
Text über Foto: Kontrast messen
Wer den Bannertext als HTML über ein Foto legt, löst 1.4.5, muss aber 1.4.3 im Blick behalten. Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zu seinem Hintergrund (W3C, WCAG 2.2), große Schrift mindestens 3:1 (W3C, WCAG 2.2). Als groß gilt Text ab 18 Punkt oder ab 14 Punkt fett (W3C, WCAG 2.2); bei vielen gängigen Schriften entspricht das etwa dem 1,5-Fachen beziehungsweise 1,2-Fachen der Grundschriftgröße (W3C, WCAG 2.2). Text in einem Logo oder Markennamen hat keine Kontrastanforderung (W3C, WCAG 2.2), der Rabatttext daneben schon.
Die Schwierigkeit liegt im Foto. Ein Motiv hat helle und dunkle Bereiche, und je nach Bildschirmbreite liegt der Text über einer anderen Stelle. Das W3C führt Hintergrundbilder ohne ausreichenden Kontrast zum Text als eigenes Fehlerbild zu 1.4.3 (W3C, Understanding 1.4.3). Gemessen wird deshalb an der kontrastärmsten Stelle unter dem Text, und zwar in jeder Breite, in der das Banner anders zuschneidet. Zu geringer Textkontrast ist der häufigste automatisch erkannte Fehler: Er fand sich auf 83,9 Prozent der untersuchten Startseiten (WebAIM Million 2026).
- Deckende Textfläche: Überschrift, Unterzeile und Link stehen in einem Kasten mit fester Hintergrundfarbe. Der Kontrast hängt dann nicht mehr vom Foto ab.
- Dichter Schleier: Eine dunkle Fläche zwischen Foto und Text, so dicht gewählt, dass weißer Text auch über der hellsten Bildstelle mindestens 4,5:1 erreicht.
- Ruhige Bildzone: Das Motiv wird so zugeschnitten, dass unter dem Text eine gleichmäßige Fläche liegt, und dieser Zuschnitt wird für jede Bildschirmbreite festgelegt.
- Schatten nur als Ergänzung: Ein weicher Textschatten hilft oft nur an einzelnen Stellen. Ob er reicht, zeigt erst die Messung an der kontrastärmsten Stelle.
Welche Lösung passt, hängt vom Motiv und von der Marke ab. Die deckende Textfläche ist besonders robust, weil sie auch bei wechselnden Fotos und neuen Zuschnitten trägt. Wie sich Kontraste über Bildern und Verläufen messen lassen und worauf es bei Markenfarben ankommt, beschreibt unser Beitrag zu Farbkontrasten in der Barrierefreiheit.
Das Banner als HTML bauen
Technisch ist der Umbau überschaubar. Das Foto wird zum Hintergrund mit leerem alt-Attribut (alt=""), weil es nur Stimmung transportiert und keine eigene Information. Überschrift, Unterzeile und Link stehen als echter Text darüber. Im folgenden Beispiel liegt der Text in einem Kasten mit deckendem Hintergrund, das Foto füllt die Fläche dahinter.
<section class="promo-banner" aria-labelledby="promo-title">
<picture>
<source media="(min-width: 48em)" srcset="black-week-wide.avif" type="image/avif">
<img src="black-week-narrow.jpg" alt="" width="800" height="600">
</picture>
<div class="promo-banner__text">
<h2 id="promo-title">-20 % zur Black Week</h2>
<p>Auf Wintermäntel und Strick, bis Montag, 30. November</p>
<a href="/aktion/black-week/">Angebote ansehen</a>
</div>
</section>.promo-banner { display: grid; }
.promo-banner > * { grid-area: 1 / 1; }
.promo-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.promo-banner__text {
align-self: end;
justify-self: start;
margin: 1rem;
padding: 1rem 1.25rem;
background: #2d1350; /* deckend: Kontrast hängt nicht vom Foto ab */
color: #ffffff;
}
.promo-banner__text h2 { font-size: 2rem; line-height: 1.2; }
.promo-banner__text a { color: #ffffff; text-decoration: underline; }
@media (min-width: 48em) {
.promo-banner__text h2 { font-size: 3rem; }
}Die Grid-Zuweisung legt Foto und Text in dieselbe Zelle, ohne absolute Positionierung. Wächst der Text beim Zoomen oder durch eigene Abstände, wächst die Zelle mit, statt dass Text aus dem Banner läuft oder abgeschnitten wird. Die Schriftgrößen stehen in rem und folgen damit der Grundeinstellung des Browsers. Der Link trägt einen sprechenden Text, sodass der Screenreader „Angebote ansehen, Link“ ansagt und keinen Dateinamen. Für ein barrierefreies Designsystem lohnt es sich, diesen Baustein einmal sauber anzulegen und für alle Aktionen wiederzuverwenden.
Im Alltag gehört die Lösung in die Vorlage, nicht in jede einzelne Aktion. Die Redaktion pflegt dann Überschrift, Unterzeile, Linkziel und Hintergrundbild als getrennte Felder, und das Bild wird ohne Text exportiert. Das spart nebenbei Arbeit: Eine Preisänderung oder eine zweite Sprache ist eine Textänderung und kein neuer Grafikexport. Für Motive, die von außen kommen, etwa von Herstellern, passt ein Beispiel aus der W3C-Erläuterung: Dort wird ein Veranstaltungsplakat mit Text hochgeladen, und weil das Redaktionssystem keine Nachbildung in HTML erlaubt, steht derselbe Text zusätzlich als normaler Text neben dem Plakat (W3C, Understanding 1.4.5).
Ausnahmen richtig einordnen
Nicht jeder Text in einem Bild ist ein Bild von Text. Die Begriffsbestimmung schließt Text aus, der Teil eines Bildes mit erheblichem anderen Bildinhalt ist (W3C, Understanding 1.4.5). Als Beispiel nennt das W3C den Namen auf einem Namensschild in einem Foto (W3C, Understanding 1.4.5). Für die Einordnung im Shop hilft die folgende Übersicht.
Logo und Wortmarke
Gilt als wesentliche Darstellung und darf ein Bild bleiben. Ist das Logo verlinkt, nennt der Alternativtext das Ziel, etwa „Startseite“.
Produktfoto mit Aufdruck
Text auf einer Verpackung ist Teil eines Fotos mit anderem Bildinhalt und kein Bild von Text. Ein beschreibender Alternativtext genügt.
Rabatt auf Stimmungsfoto
Nachträglich gesetzter Aktionstext ist die eigentliche Botschaft. Er gehört als HTML über das Bild, nicht in das Bild.
Schriftmuster und Gravur
Wo die Form der Schrift die Information trägt, etwa bei einer Gravurvorschau, ist die Darstellung wesentlich. Der Alternativtext gibt den Inhalt wieder.
Herstellerbanner
Lässt sich ein geliefertes Motiv nicht ersetzen, steht derselbe Text sichtbar daneben. Werden Bild und Text angezeigt, ist 1.4.5 erfüllt.
Gutscheincode
Ein Code im Bild lässt sich weder kopieren noch vorlesen. Code, Wert und Bedingungen gehören als Text auf die Seite.
Die Einordnung bleibt eine Einzelfallfrage. Entscheidend ist, ob der Text die Information trägt und ob HTML und CSS die gewünschte Darstellung erreichen können. Ein Schriftzug in der Kampagnenschrift wird nicht dadurch zum Logo, dass er markant aussieht. Und auch bei Logos betrifft die Ausnahme nur die Darstellung: Ein verlinktes Logo ist ein funktionales Bild, dessen Alternativtext das Ziel nennen sollte (W3C WAI, Images Tutorial).
Prüfschritte vor dem Aktionsstart
Die folgenden Schritte brauchen nur einen Browser, einen Screenreader und ein Kontrastwerkzeug. Sie lassen sich für jede Bannervorlage in kurzer Zeit durchführen und decken die Kriterien aus diesem Beitrag ab. In Klammern steht jeweils das Erfolgskriterium, um das es geht.
- Text markieren: Lässt sich der Rabatttext mit der Maus markieren oder über die Suchfunktion des Browsers finden? Wenn nicht, ist er Teil der Grafik (1.4.5).
- Auf 200 Prozent zoomen: Bleibt der Text scharf und vollständig sichtbar? Zusätzlich nur die Schriftgröße in den Browsereinstellungen erhöhen (1.4.4).
- Auf 320 CSS-Pixel verkleinern: Fenster schmal ziehen oder auf 400 Prozent zoomen; Text und Link müssen ohne seitliches Scrollen erreichbar sein (1.4.10).
- Screenreader starten: Angesagt werden sollten der sichtbare Text und ein Linkname mit Ziel, kein Dateiname und keine Adresse (1.1.1).
- Kontrast messen: An der kontrastärmsten Stelle unter dem Text, in jeder Bildschirmbreite, mit mindestens 4,5:1 oder 3:1 für große Schrift (1.4.3).
- Textabstände überschreiben: Mit einem Lesezeichen-Skript Zeilenhöhe und Abstände vergrößern; nichts darf abgeschnitten werden (1.4.12).
- Bilder abschalten: Bilder im Browser blockieren und prüfen, ob die Aktion weiter verständlich bleibt.
- viewport-Meta-Tag prüfen: Kein
user-scalable=nound keinemaximum-scale=1im Seitenkopf.
Diese Prüfung ersetzt kein vollständiges Audit, findet aber typische Bannerfehler, bevor die Aktion live geht. Welche Prüfwerkzeuge eine solche Sichtprüfung ergänzen und wo ihre Grenzen liegen, beschreibt unser Beitrag zu Testwerkzeugen für Barrierefreiheit. Wer zur Black Week zusätzlich Countdown-Leisten und Gutschein-Pop-ups einsetzt, findet die passenden Prüfschritte im Beitrag zu barrierefreien Weihnachtsaktionen. Laufen mehrere Banner als Karussell, gelten außerdem die Regeln für bewegte Inhalte aus unserem Beitrag zu barrierefreien Slidern.
Vom Einzelbanner zur Vorlage
Ein umgebautes Banner hilft bis zur nächsten Aktion. Dauerhaft wirkt erst eine Vorlage, die Text im Bild überflüssig macht. Dazu gehören drei Dinge: ein Bannerbaustein im Shop mit getrennten Feldern für Text und Bild, eine Bildvorgabe für Gestalter und Hersteller, die Motive ohne eingebrannten Text verlangt, und eine kurze Abnahme vor jeder Veröffentlichung. Die Redaktion braucht dafür keine Programmierkenntnisse, aber eine klare Regel. Wie Teams solche Regeln verankern, beschreibt unser Beitrag zur Schulung von Redaktionsteams.
Wir prüfen Aktionsbanner und Bannervorlagen im Rahmen eines WCAG-Audits gegen die Kriterien 1.1.1, 1.4.3, 1.4.4, 1.4.5, 1.4.10 und 1.4.12, mit Zoom, Kontrastmessung in mehreren Bildschirmbreiten und einer Prüfung der Ausgabe für Screenreader. Wo Text im Bild steckt, bauen wir die Vorlage im Rahmen der barrierefreien Webentwicklung auf HTML-Text um. Was ein Onlineshop darüber hinaus beachten sollte, fasst unsere Seite zum barrierefreien E-Commerce zusammen. Den Ablauf eines Shop-Umbaus beschreibt die Seite barrierefreien Online-Shop umsetzen, die gesetzlichen Pflichten im Überblick stehen unter BFSG-Anforderungen.
Quellen
Verwandte Artikel
KI-generierter Code: was Barrierefreiheitsprüfungen finden
Was Barrierefreiheitsprüfungen in KI-generiertem Code finden: vier typische Muster von div-Schaltfläche bis Fokusrahmen und wie die Prüfung in den Ablauf kommt.
Barrierefreiheitsangaben im Shop: was § 19 BFSGV verlangt
Was § 19 Nr. 1 BFSGV von Shops verlangt: Herstellerangaben zur Barrierefreiheit als Produktdatenfeld führen, auf der Produktseite zeigen und § 11 BFSG prüfen.
Leere Links und Buttons: Bedienelemente mit klarem Namen
Leere Links und Buttons zählen zu den häufigsten WCAG-Befunden. Reparaturmuster für Icon-Buttons, Bild-Links und „mehr“-Links, geprüft über die Linkliste.