Wenn man Werbebanner oder andere Werbeformen in seiner Website interieren möchte (oder muss), dann ist natürlich auch für diese die Barrierefreiheit ein Thema. Denn als Bestandteil der Website beeinflusst sie natürlich auch die Barrierefreiheit der gesamten Website.
Leider ist es aber so, daß die allermeister Werbevermarkter dieses Thema entweder nicht auf dem Schirm haben, es ihnen egal ist oder aber sie auch ganz bewusst nicht wollen, daß die von ihnen ausgespielte Werbung sofort als Werbung erkennbar wird.
Erik Gustafsson Spagnoli schrieb hierzu kürzlich für axess lab einen Rant mit vielen prominenten Negativbeispielen: Ads and accessibility mismatch. Dies zeigt, dass die schlechte technische Qualität keinesfalls nur bei Werbung kleiner Unternehmen ist, die kein Geld haben.
Als Website-Manager, der nun einerseits die Technik der Website betreut und einerseits eine möglichst gute Qualität ins Netz stellen will, aber andererseits aus verschiedenen Gründen trotzdem Werbung implemetieren muss, benötigt man daher eine Lösung für das Problem: Wie bleibt meine Site möglichst barrierefrei, auch wenn sie qualitativ schlechten Content embedden soll.
Ansatz 1 (falsch): Werbung trägt keine Information zur Website bei, ist also dekorativ
Der einfache erste Ansatz wäre es, die Werbung einfach von einem
<div tabindex="-1" aria-hidden="true"> .. </div>
umranden zu lassen und es so sowohl aus dem Tabfocus zu nehmen und mit aria-hidden="true" aus der Wahrnehmung zu nehmen.
Aber dies ist leider nicht der korrekte Ansatz. Auch wenn die Werbung für den eigentlichen Inhalt der Website nichts beiträgt, ist es:
- sichtbarer Inhalt
- häufig anklickbar (Link, Button)
- geschäftlich relevant
Damit ist es kein dekoratives Element.
Wenn man es zudem mit aria-hidden="true" nur für die Usergruppe versteckt, die einen Screenreader oder anderen ARIA-fähigen Client nutzt, während Sehende es weiterhin präsentiert bekommen, dann ist das
- eine inkonsistente Darstellung für unterschiedliche Nutzergruppe und
- potentiell problematisch im Sinne von WCAG 1.3.1 / 3.2.4 (je nach Kontext).
Anmerkung: Ich hab es vor einigen Jahren trotzdem schonmal genau so gemacht. Aber damals war ich jung und dumm ;)
Ansatz 2: Werbung als Nebensache deklarieren und kennzeichnen
Der richtige Weg liegt meines Erachtens nach in einer sauberen Kennzeichnung des Bereiches mit <aside> bzw. mit <div role="complementary">.
Zusätzlich würde ich noch eine class=“advertisement“ ergänzen. Nicht allein für eigene Zwecke (z.B. um den Label optisch sichtbar zu machen und so der Kennzeichnungspflicht Folge zu leisten, sondern ganz bewusst auch, damit gängige Clients, Plugins und Crawler den Inhalt als solchen erkennen können. (Ja, auch Adblocker).
Mein Ansatz sähe also so aus, dass ich folgendes HTML um die Werbung ergänzen würde:
<aside class="advertisement" aria-label="Werbung">
<div class="ad-inner">
<!-- Third Party Script that might use a iframe -->
<iframe src="https://ad.example.com/... "
title="Advertisement">
</iframe>
</div>
</aside>
Dies wäre der Ansatz für „normale“ Bannerwerbung.
Wenn die Werbung jedoch nicht nur aus einem Banner oder anderen grafische Objekten und Links betsehen würde, sondern aus einem gesamten textuellen Bereich (z.B. ein kompletter Werbeartikel), dann würde ich zusätzlich noch Skip-Links ergänzen:
<div class="advertisement skiplink">
<p class="skipllink><a href="#skipover_adv">Überspringe die folgende Werbung.</a></p>
<aside class="advertisement-container" aria-label="Werbung">
<div class="ad-inner">
<!-- Third Party Content -->
</div>
</aside>
<p class="skiplink-target><a name="skipover_adv">Nun weiter im Text.</a></p>
</div>
Ausnahme: Nicht sichtbare Elemente (z.B. Tracking und Statistik)
Obiger Ansatz gilt, wie zuvor erläutert, um sichtbare und aktive Komponenten von Werbebannern. Es gibt jedoch auch unsichtbare Elemente:
- Tracking-Codes für Analytics-Verfahren,
- 1×1 Pixel Tracking-Bilder,
- nicht sichtbare Test-Elemente (z.B. in Rahmen von A/B-Tests ausgeblendete Inhalte)
In solchen Fällen ist das Setzen von aria-hidden="true" über den jeweiligen HTML-Bereich korrekt. Werden von den Banner-Skripten auch leere Container für später, via JavaScript gefüllter Inhalt, erstellt, so wäre es denkbar auch diese mit einem aria-hidden="true" einzukapseln. Jedoch ist dies nicht ganz ohne Risiko: So kann es sein, dass bei einer Befüllung durch JavaScript dann später in einem solchen Container ein aktiver Inhalt eingefügt wird, der auch erreicht werden muss. In dem Fall wäre ein aria-hidden="true" falsch, bzw. müsste durch das JavaScript geändert werden. Besser wäre es jedoch, wenn leere Container garnicht erst gesetzt werden, sondern als ganzes durch JavaScript nachgeladen werden.
Nicht zu vergessen: Consent Banner
Vor der Schaltung von Werbebannern ist es üblicherweise notwendig, ein Consent Banner zu schalten. Jedenfalls immer dann, wenn durch die Schaltung des Banners Informationen über den Aufrufenden an Dritte geht.
Die obige Ansatz mit der Kapselung des Werbecodes in einer generischen Class class="advertisement" sollte auch hier helfen. Viele Consent Banner-Lösungen suchen im HTML-Code nach einer definierten Class, nach HTML-Aufrufen oder URLs. Wenn sie diese finden, werden sie mittels JavaScript oder serverseitiger Änderung den entsprechenden Bereich mit einem eigenen HTML-Container überschreiben.
Auch in diesem Fall darf dann kein aria-hidden="true" gesetzt sein, wie obige Lösung es vorgibt.