Techniken für WCAG 2.0

Zum Inhalt

-

FLASH17: Bereitstellung eines Zugangs per Tastatur auf ein Flash-Objekt und Vermeidung einer Tastatur-Falle

Anwendbarkeit

  • Adobe Flash Professional Version MX und höher

  • Adobe Flex

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Siehe User Agent Support for Flash für allgemeine Informationen zur Unterstützung durch Benutzeragenten.

Das durch diese Technik anvisierte Problem tritt nur in Browsern auf, bei denen es sich nicht um Internet Explorer handelt. Diese Technik funktioniert derzeit allerdings nur in Firefox. In Firefox geht der Fokus beim Zugriff auf den Flash-Inhalt immer direkt zum Beginn der Tabulator-Reihenfolge, auch wenn man auf das Flash-Objekt zugreift, indem man rückwärts per Hochtaste-Tabulatortaste durch die Tabulator-Reihenfolge geht. Darüber hinaus muss JavaScript aktiviert sein, damit diese Technik funktioniert.

Beschreibung

Das Ziel dieser Technik ist, es zu erlauben, dass sich der Tastatur-Fokus zum Flash-Inhalt, der in einer Webseite eingebettet ist, hin und wieder davon weg bewegt. In Browsern mit Ausnahme von Internet Explorer gibt es ein Problem in Bezug auf die Zugänglichkeit von eingebetteten Flash-Inhalten per Tastatur. Das Problem ist, dass es nicht möglich ist, den Tastatur-Fokus zwischen dem Flash-Inhalt und dem HTML-Inhalt zu bewegen, ohne eine Maus zu benutzen, obwohl möglicherweise sowohl auf den Flash-Inhalt als auch auf den darum liegenden HTML-Inhalt per Tastatur zugegriffen werden kann. Sobald der Fokus im Flash-Film platziert wurde, ist ein Tastatur-Benutzer dort gefangen. Gleichermaßen gilt, dass es unmöglich ist, den Fokus in den Film zu bewegen, wenn der Fokus irgendwo anders im HTML-Inhalt (außerhalb des Flash-Films) platziert wurde.

Dieses Problem besteht seit langer Zeit und hängt damit zusammen, wie Browser eingebettete Plug-Ins implementieren. Bis dieses Problem behoben ist obliegt es dem Flash-Entwickler, sich eine Notlösung auszudenken. Diese Technik ist eine dieser Notlösungen. Die Vorgehensweise hinter dieser Technik ist wie folgt:

Wenn die SWFFocus-Klasse in ein Flash-Projekt importiert wird, passiert das Folgende:

Wie oben angegeben gibt es zwei Arten, wie diese Technik benutzt werden kann:

  1. Lassen Sie die SWFFocus-Klasse benachbarte, fokussierbare Elemente in der HTML-Tabulator-Reihenfolge für jeden Flash-Film generieren (dargestellt im unten stehenden Beispiel 1)

    Standardmäßig erstellt die SWFFocus-Klasse ein verstecktes Link-Element vor und nach einem eingebetteten Flash-Film. Diese Elemente werden als ‚anchor‘ benötigt, um den Fokus dorthin zu bewegen, wenn man per (Hochtaste) Tabulatortaste aus dem Flash-Film geht. Diese Vorgehensweise ist am leichtesten zu implementieren, da keine zusätzliche Arbeit von dem Entwickler verlangt wird. Der Nachteil ist, dass die versteckten Links die HTML-Tabulator-Reihenfolge mit bedeutungslosen Elementen überhäuft (auch wenn diese Elemente nur als Tab-Stops benutzt werden, wenn man per Tabulatortaste aus dem Film herausgeht und nicht wenn man in ihn hineingeht). Daher wird es empfohlen, stattdessen die folgende Vorgehensweise zu benutzen:

  2. Bestimmen Sie explizit fokussierbare HTML-Elemente, die vor oder nach dem Flash-Film in der HTML-Tabulator-Reihenfolge kommen (dargestellt im unten stehenden Beispiel 2)

    Mit dieser Vorgehensweise kann der Entwickler ID-Werte benutzen, um die Elemente, die vor und nach dem Flash-Film in der HTML-Tabulator-Reihenfolge kommen, zu bestimmen. Dies macht man, indem man besondere Klassen-Namen auf dem <object>-Element des Flash-Film festlegt. Dies ist die bevorzugte Vorgehensweise, da hierdurch kein unnötiges Wirrwarr der Tabulator-Reihenfolge verursacht wird. Allerdings erfordert dies Mehr-Arbeit und die Achtsamkeit des Entwicklers (der manuell ID-Werte festlegen muss). Außerdem gibt es in manchen Szenarien möglicherweise einfach kein nächstes oder vorhergehendes fokussierbares Element für einen Flash-Film.

Beispiele

Die zwei unten stehenden Beispiele werden im funktionierenden Beispiel für „Preventing a keyboard trap in Flash content“ (Vermeidung einer Tastatur-Falle in Flash-Inhalten) gezeigt. In der beispielhaften html-Datei wurden zwei Flash-Filme eingebettet. Der erste Flash-Film wurde mit der in Beispiel 1 beschriebenen Vorgehensweise eingebettet. Das zweite Beispiel wurde mit der in Beispiel 2 beschriebenen Vorgehensweise eingebettet. Die Quelle für „Vermeidung einer Tastatur-Falle in Flash-Inhalten“ steht zur Verfügung. Die Quell-zip-Datei enthält die SWFFocus-Klasse.

Anmerkung: Um das Beispiel von einem lokalen Laufwerk aus laufen zu lassen (im Gegensatz zum Laufen lassen von einem Webserver aus), muss das lokale Verzeichnis zu den Sicherheitseinstellungen des Flash-Players hinzugefügt werden.

Beispiel 1: Benutzung automatisch generierter Links

In diesem Beispiel wird die SWFFocus-Klasse benutzt, ohne fokussierbare HTML-Elemente explizit zu bestimmen. Dies führt dazu, dass SWFFocus versteckte Links vor und nach dem Flash-Film dynamisch einfügt.

Laden des Flash-Films

Das Flash-Objekt wird in diesem Beispiel hinzugefügt, indem man die SWFObject's dynamic publishing-Methode benutzt, was bedeutet, dass der Objekt-Tag dynamisch von JavaScript auf eine von Browsern unterstützte Art und Weise erstellt wird. Auf wenn dies die empfohlene Vorgehensweise ist, ist es keine Bedingung, diese Technik zu benutzen. Die SWFFocus-Klasse funktioniert auch, wenn der Objekt-Tag fest in das HTML-Dokument eingebaut wird.

Der unten stehende Beispiel-Code zeigt, wie man den Film dynamisch mit SWFObject lädt.

HTML- und Javascript-Code-Beispiel für Beispiel 1

Code-Beispiel:

			<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Keyboard Trap Fix Example</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <script src="swfobject_2_1.js" type="text/javascript"/>
    <script type="text/javascript">
      var flashvars = {};
      var params = {};
      params.scale = "noscale";
      var attributes = {};
      attributes.id = "FlashSample1SWF";
      attributes.name = "FlashSample1SWF";
      swfobject.embedSWF("keyboard_trap_fix_custom_as3.swf", "flashSample1", \
          "150", "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
  </head>
  <body>
    <p>The following Flash movie automatically generates invisible
      links before and after the flash movie, allowing keyboard focus
      to move out of the Flash content.</p>
    <div id="flashSample1">
      <a href="http://www.adobe.com/go/getflashplayer">
        <img alt="Get Adobe Flash player"
          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
        />
      </a>
    </div>
  </body>
</html>
Import und Initialisierung der SWFFocus-Klasse in Flash

Die SWFFocus-Klasse muss zum Quell-Pfad (source path) eines Flash-Projektes hinzugefügt werden. Der einfachste Weg um dies zu tun ist es, die com/swffocus/SWFFocus.as-Datei (einschließlich der verschachtelten Verzeichnis-Struktur) in das root-Verzeichnis des Projektes zu kopieren.

Wenn die SWFFocus-Klasse zu dem Quell-Pfad des Films hinzugefügt wurde, muss sie mit dem folgenden Code initialisiert werden:

Code-Beispiel:

			import com.swffocus.SWFFocus;
SWFFocus.init(this);

Der Code für die Klasse selber findet man in den Quell-Dateien (source files).

Beispiel 2: Explizite Bestimmung bestehender, fokussierbarer Html-Elemente

Diese Technik ist größtenteils genau wie Beispiel 1 :

  • Die dynamische Lade-Vorgehensweise von SWFObject wird benutzt, um den Flash-Film zu laden

  • Die SWFFocus-Klasse muss zum Quell-Pfad (sourcepath) des Films hinzugefügt und in dem Flash-Film initialisiert werden

Für weitere Details zu diesen Schritten lesen Sie Beispiel 1.

In diesem Fall allerdings werden besondere Klassen-Namen zum dem Flash-Film-Objekt hinzugefügt. Diese Klassen-Namen kennzeichnen die ID-Werte der Elemente, die vor und nach dem Film in der HTML-Tabulator-Reihenfolge stehen. Die Klassen-Namen lauten:

  • 'swfPref-<previous ID>', wobei '<previous element>' der ID-Wert des vorhergehenden Elementes in der Tabulator-Reihenfolge sein sollte.

  • 'swfNext-<next ID>', wobei '<next element>' der ID-Wert des nachfolgenden Elements in der Tabulator-Reihenfolge sein sollte.

Der HTML-Code könnte zum Beispiel so aussehen (beachten Sie die hinzugefügten Klassen-Namen auf dem Objekt-Tag):

Code-Beispiel:

			<a href="http://www.lipsum.com/" id="focus1">test 1</a>
<object class="swfPrev-focus1 swfNext-focus2"
  data="keyboard_trap_fix_as3.swf" tabindex="0"
  type="application/x-shockwave-flash"/>
<a href="http://www.lipsum.com/" id="focus2">test 2</a>

Da dieses Beispiel das dynamische Laden des SWFObjects benutzt, müssen die Klassen-Namen als Attribute spezifiziert werden, wenn SWFObject initialisiert wird. Dies wird in dem unten stehenden Code-Beispiel veranschaulicht.

HTML- und Javascript-Code-Beispiel für Beispiel 2

Code-Beispiel:

			<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Keyboard Trap Fix Example </title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <script src="swfobject_2_1.js" type="text/javascript"/>

    <script type="text/javascript">
      var flashvars = {};
      var params = {};
      params.scale = "noscale";
      var attributes = {};
      attributes.id = "FlashSample2SWF";
      attributes.name = "FlashSample2SWF";
      attributes["class"] = "swfPrev-focus1 swfNext-focus2";
      swfobject.embedSWF("keyboard_trap_fix_as3.swf", "flashSample1", "150", 
        "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
    </script>
  </head>
  <body>
    <a href="http://www.lipsum.com/" id="focus1">lorem</a>
    <p>The following Flash movie uses existing links in the document
      to move focus to when (shift) tabbing out of the Flash content.
      The existing links are defined by placing special classnames on
      the Flash object.</p>
    <div id="flashSample2">
      <a href="http://www.adobe.com/go/getflashplayer">
        <img alt="Get Adobe Flash player"
          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
        />
      </a>
    </div>
    <a href="http://www.lipsum.com/">lorem</a>
  </body>
</html>

Anmerkung: Dieses Beispiel setzt voraus, dass die fokussierbaren HTML-Elemente existieren und einen ID-Wert haben zu dem Zeitpunkt, an dem das SWFObject zum Einfügen in den Flash-Film aufgerufen wird, . In manchen Situationen ist es allerdings auch möglich, dass diese Elemente noch nicht existieren, wenn der Flash-Film erstellt wird oder dass die Elemente zu einem späteren Zeitpunkt dynamisch gelöscht werden. Wenn dies passiert, ist es möglich, ID-Werte für vorhergehende und nachfolgende fokussierbare Elemente neu zuzuweisen. Um dies zu machen, rufen Sie so die SWFsetFocusIds()-Methode auf dem Flash-Film-Objekt auf:

Code-Beispiel:

			var o = document.getElementById("FlashSample1SWF");
o.SWFsetFocusIds('prevId', 'nextId');

Von diesem Zeitpunkt an werden die aktualisierten IDs benutzt, um den Fokus dorthin zu bewegen, wenn man den Flash-Film per Tabulator-Taste verlässt.

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Bei einem Flash-Film auf einer Webseite:

  1. Wenn möglich, bestätigten Sie, dass die Quelle des Flash-Films die SWFFocus-Klasse importiert und initialisiert

  2. Drücken Sie die Tabulator-Taste, um sich durch die per Tab erreichbaren Elemente auf der Seite zu bewegen

  3. Bestätigen Sie, dass es möglich ist, per Tabulator-Taste in den Flash-Inhalt zu gehen

  4. Gehen Sie per Tab weiter und bestätigen Sie, dass es möglich ist, den Flash-Inhalt per Tabulator-Taste zu verlassen

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.