Barrierefreie Werbung: ein Konzept

Werbung finanziert viele Websites. Aber sie ist oft die größte Barriere auf einer Seite: Sie blinkt, startet Ton, verdeckt Inhalte und fängt den Tastaturfokus. Das muss nicht sein.

Die Idee in drei Sätzen

So sieht das aus

Das ist ein echter Werbeplatz dieser Website. Probiere ihn mit Tastatur, Zoom und Screenreader aus.

12 Regeln für barrierefreie Anzeigen

  1. Klar als Werbung gekennzeichnet

    Das Wort „Anzeige“ steht sichtbar am Anfang und im Code. Screenreader sagen an, dass ein Werbebereich beginnt.

    WCAG-Regeln: 1.3.1 Info und Beziehungen, 2.4.6 Überschriften und Beschriftungen

  2. Echter Text statt Text im Bild

    Überschrift und Botschaft sind HTML-Text. So lassen sie sich vergrößern, vorlesen und übersetzen.

    WCAG-Regeln: 1.4.5 Bilder eines Textes, 1.4.4 Textgröße ändern

  3. Bilder mit Alternativtext

    Jedes Werbebild beschreibt, was wichtig ist. Schmuckbilder werden für Hilfsmittel versteckt.

    WCAG-Regeln: 1.1.1 Nicht-Text-Inhalt

  4. Genug Kontrast

    Text mindestens 4,5:1, besser 7:1. Knöpfe und Rahmen mindestens 3:1.

    WCAG-Regeln: 1.4.3 Kontrast (Minimum), 1.4.11 Nicht-Text-Kontrast

  5. Keine Bewegung von selbst

    Nichts bewegt sich, blinkt oder wechselt automatisch. Animation startet nur auf Knopfdruck und lässt sich anhalten.

    WCAG-Regeln: 2.2.2 Pausieren, Stoppen, Ausblenden, 2.3.1 Grenzwert von dreimaligem Blitzen oder weniger, 2.3.3 Animation durch Interaktionen

  6. Kein Ton von selbst

    Video und Audio starten nie automatisch. Videos haben Untertitel.

    WCAG-Regeln: 1.4.2 Audio-Steuerelement, 1.2.2 Untertitel (aufgezeichnet)

  7. Mit der Tastatur bedienbar

    Die Anzeige ist ein normaler Link oder Knopf mit sichtbarem Fokus. Der Fokus bleibt nicht in der Anzeige hängen.

    WCAG-Regeln: 2.1.1 Tastatur, 2.1.2 Keine Tastaturfalle, 2.4.7 Fokus sichtbar

  8. Sagt, wohin der Link führt

    „Zum Angebot von Beispiel GmbH“ statt „Hier klicken“. Öffnet sich ein neues Fenster, steht das dabei.

    WCAG-Regeln: 2.4.4 Linkzweck (im Kontext), 3.2.5 Änderung auf Anfrage

  9. Verdeckt nichts und springt nicht

    Keine Überlagerungen, keine Pop-ups. Der Platz ist vorab reserviert, damit der Text nicht verrutscht.

    WCAG-Regeln: 2.4.11 Fokus nicht verdeckt (Minimum), 3.2.1 Bei Fokus, 2.2.4 Unterbrechungen

  10. Große Klickflächen

    Knöpfe sind mindestens 44 × 44 Pixel groß. Ein Schließen-Knopf ist nie winzig.

    WCAG-Regeln: 2.5.8 Zielgröße (Minimum), 2.5.5 Zielgröße (erhöht)

  11. Funktioniert bei Zoom und auf dem Handy

    Die Anzeige passt sich an 320 Pixel Breite und 400 % Zoom an. Kein seitliches Scrollen.

    WCAG-Regeln: 1.4.10 Umbruch (Reflow), 1.4.12 Textabstand

  12. Kein Tracking, keine Täuschung

    Keine Cookies, kein Fingerprinting, keine falschen Schließen-Knöpfe, kein künstlicher Zeitdruck.

    WCAG-Regeln: 2.2.1 Zeiteinteilung anpassbar, 3.2.4 Konsistente Erkennung

Technische Vorgaben für Werbepartner

Werbepartner liefern Bausteine – keinen Code. Die Website baut daraus die Anzeige.

Was eine Anzeige enthalten darf
BausteinVorgabe
ÜberschriftText, höchstens 60 Zeichen
TextText, höchstens 200 Zeichen, einfache Sprache
Bild (freiwillig)Ein Standbild ohne Text im Bild, mit Alternativtext, höchstens 100 Kilobyte
LinkEin Ziel, ein aussagekräftiger Linktext, ohne Tracking-Parameter
SpracheSprache der Anzeige angeben, damit Screenreader richtig vorlesen
Nicht erlaubtSkripte, iframes, Video und Audio mit Autostart, animierte Bilder, Pop-ups, Cookies

Der Code dahinter

<aside class="ad-slot" aria-labelledby="ad-title">
  <span class="ad-label">Anzeige</span>
  <h3 id="ad-title">Überschrift der Anzeige</h3>
  <p>Kurzer Text in einfacher Sprache.</p>
  <a href="https://example.org/">Zum Angebot von Beispiel GmbH</a>
</aside>

Das Element aside sagt Hilfsmitteln: Dieser Bereich gehört nicht zum Hauptinhalt. Die Überschrift gibt dem Bereich einen Namen. Der Kasten hat eine feste Mindesthöhe, damit beim Laden nichts verrutscht.

Prüfablauf vor der Veröffentlichung

  1. Automatische Prüfung: Länge, Kontrast, Alternativtext, Bildgröße, verbotene Inhalte.
  2. Prüfung durch einen Menschen: Ist der Text verständlich? Ist der Alternativtext sinnvoll? Ist nichts irreführend?
  3. Test der fertigen Seite mit dem Checker dieser Website, mit Tastatur und mit Screenreader.
  4. Ein Melde-Link an jeder Anzeige: Wer eine Barriere findet, kann sie mit einem Klick melden.

Warum sich das lohnt

Stand dieser SeiteAuf wcag.dehl.net läuft zurzeit keine bezahlte Werbung. Der Werbeplatz oben ist ein Beispiel für dieses Konzept.