Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Die 5-Sekunden-Ausnahme für blinkenden Text veröffentlicht in 2011

Nutzer müssen auf der Grundlage der Web Content Accessibility Guidelines (WCAG) 2.0 die Möglichkeit haben, blinkende Elemente in einen statischen Zustand versetzen zu können. Blinken bedeutet, dass ein Inhalt zwischen zwei oder mehr visuellen Zuständen wechselt und kann sehr viele Situationen betreffen. In diesem Beitrag geht es nur um das grundlegende Prinzip und als Beispiel wird ein kleiner JavaScript geboten, um blinkenden Text standardkonform anzuzeigen.

Obwohl Blinken auf Webseiten durch Browsereinstellungen unterbunden werden kann, verursachen blinkende Inhalte eine Ablenkung. Während diese Ablenkung für alle sehenden Nutzer gilt, kann die Ablenkungen für bestimmte Nutzergruppen mit Behinderungen problematisch werden, insbesondere wenn die Ablenkung andauert. Bei Lese- oder Aufmerksamskeitsdefiziten kann ein andauerndes Blinken dazu führen, dass die Interaktion mit einer Webseite nicht mehr möglich wird.

Nach dem Erfolgskriterium 2.2.2 der WCAG 2.0 darf die Ablenkung durch blinkende Inhalte nicht dauerhaft sein und muss deshalb unterbrochen oder abgeschaltet werden können. Diese Anforderung gehört zu denjenigen Anforderungen der Konformitätsbedingung 5, die unbedingt eingehalten werden müssen, um Konformität zur WCAG zu gelangen. Allerdings gibt es Ausnahmen für das Erfolgskriterium und Blinken ist unter folgenden Umständen zulässig:

  1. der blinkende Inhalt wird nicht parallel mit anderen Inhalten angezeigt. Der Nutzer hat dann in der Regel vorher einen Link aufgerufen, der ihm im optimalen Fall die Art des Inhalts vermittelt hat.
  2. Das Blinken Extern, englischsprachig: hört nach spätestens 5 Sekunden von alleine auf. Nutzer werden dann nicht dauerhaft vom restlichen Inhalt abgelenkt. Es wird durch das Blinken zwar die Aufmerksamkeit abgelenkt, aber der Nutzer wird nicht an der Bedienung der Seite gehindert.
  3. Der blinkende Inhalt ist unentbehrlich. Dynamischer Inhalt ist dann unentbehrlich, wenn der Verzicht auf das dynamische Element den Inhalt wesentlich verändern würde. Wenn z.B. in einer Live-Auktion die aktuellen Gebote dynamisch eingespielt werden und dadurch blinken, so ist dieser Inhalt unentbehrlich. Bei Werbung wäre das Blinken aber entbehrlich.

Wenn diese Ausnahmen nicht bestehen, dann sollte die Seite mit dem blinkenden Inhalt über eine Extern, englischsprachig: Steuerungsmöglichkeit verfügen, die das Blinken unterbindet.

Um die 5-Sekunden-Ausnahme für einen blinkenden Text zu realisieren, kann mit den Ansätzen von "Progressive Enhancement" Inhalte, die blinken sollen, zunächst statisch im HTML eingebunden werden. Mit JavaScript kann dann eine Dynamisierung vorgenommen werden. Wenn die Zugangssoftware kein JavaScript unterstützt oder wenn JavaScript deaktiviert ist, wird der Inhalt ohne Informationsverlust angezeigt. Bei aktiviertem JavaScript wird das Blinken gestartet und nach spätestens 5 Sekunden gestoppt.

Wenn ein Text "Neu" blinken soll:

<span id="neueste"><strong>Neu!</strong></span>,

dann kann mit folgenden JavaScript-Anweisungen das Blinken für 5 Sekunden zugelassen werden:

function blink_an() {
  if (document.getElementById) {
    document.getElementById("neueste").style.visibility = "visible";
  }
}
function blink_aus() {
  if (document.getElementById) {
    document.getElementById("neueste").style.visibility = "hidden";
  }
}
window.onload = function() {
  for (var i=1; i < 5; i++) {
    setTimeout("blink_aus()", (900*i));
    setTimeout("blink_an()", (900*i)+300);
  }
}

Bei diesem JavaScript blinkt der Text für knapp 4 Sekunden. Die beiden Funktionen werden jeweils vier Mal verzögert ausgelöst: das erste Ausblenden nach 900 Millisekunden, das erste Wiedereinblenden nach 1,2 Sekunden usw. Die letzte Einblendung findet nach 3,6 Sekunden statt.

In diesem Beispiel hätte auch die CSS-Eigenschaft text-decoration mit dem Wert blink statt der CSS-Eigenschaft visibility genutzt werden können. Dabei wäre Extern, englischsprachig: darauf zu achten, dass diese CSS-Eigenschaft per JavaScript zugewiesen wird und spätestens nach 5 Sekunden wieder entfernt wird, denn ansonsten würde bei deaktiviertem JavaScript der Inhalt stetig blinken.