Adobe Flash Professional Version MX und höher
Adobe Flex
Die Technik bezieht sich auf:
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.
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:
Es werden zwei ‚benachbarte‘, fokussierbare HTML-Objekte für jeden Flash-Film im Dokument bestimmt (einer vor und einer nach dem Film). Bei diesen Elementen kann es sich um beliebige HTML-Elemente handeln, die Teil der Tabulator-Reihenfolge der Webseite sind (wie beispielsweise Links und Formular-Steuerelemente).
Das Flash-Film-Objekt selber wird ebenfalls zur Tabulator-Reihenfolge des Dokumentes hinzugefügt, wodurch es möglich ist, per Tabulator-Taste in den Film zu gehen.
Innerhalb des Flash-Films behält der Flash-Player seine eigene Tabulator-Reihenfolge bei. Wenn der Anfang oder das Ende der Flash-Tabulator-Reihenfolge erreicht wird (wenn man per Tabulator durch den Film geht), verzweigt der Fokus normalerweise wieder zum Anfang oder zum Ende der Tabulator-Reihenfolge des Films und es ist nicht möglich, diesen per (Hochtaste) Tabulatortaste zu verlassen. Mit dieser Technik allerdings wird der Fokus stattdessen zum benachbarten Element in der HTML-Tabulator-Reihenfolge bewegt, wenn eine ‚Fokus-Verzweigung‘ erkannt wird (wodurch es einem Tastatur-Benutzer ermöglicht wird, aus der Flash-Tabulator-Reihenfolge ‚auszubrechen‘).
Wenn die SWFFocus-Klasse in ein Flash-Projekt importiert wird, passiert das Folgende:
Eine JavaScript <script>-Tag wird generiert und zu dem HTML-Dokument, das den Flash-Film enthält, hinzugefügt. Dieser JavaScript-Code:
Setzt einen tabindex-Wert von "0" auf das <object>-Element eines jeden auf der Seite gefundenen Flash-Films. Dies führt dazu, dass die Flash-Objekte Teil der Tabulator-Reihenfolge werden.
Optional können Sie ein verstecktes anchor-Element vor und nach dem Flash-Film erstellen, das von der SWFFocus-Klasse benutzt wird, um den Fokus aus dem Flash-Film zurück zu der HTML-Seite zu bewegen. Alternativ kann der Entwickler existierende, fokussierbare HTML-Elemente als benachbarte Tab-Stops für den Flash-Film spezifizieren.
Setzt Event-Handler für das Flash-Film-Objekt, so dass, wenn dieses den Fokus erhält, die SWFFocus-Klasse benachrichtigt wird, damit sie die interne Tabulator-Reihenfolge des Films verwaltet.
Die SWFFocus-Klasse überwacht Änderungen des Fokus innerhalb des Flash-Films. Wenn eine Fokus-Verzweigung in dem Film entdeckt wird, wird eine JavaScript-Funktion aufgerufen, um stattdessen den Fokus zurück zu dem benachbarten HTML-Inhalt zurück zu bewegen.
Wie oben angegeben gibt es zwei Arten, wie diese Technik benutzt werden kann:
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:
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.
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.
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.
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.
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>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).
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.
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 sind nur zu Informationszwecken und keine offizielle Empfehlung.
Bei einem Flash-Film auf einer Webseite:
Wenn möglich, bestätigten Sie, dass die Quelle des Flash-Films die SWFFocus-Klasse importiert und initialisiert
Drücken Sie die Tabulator-Taste, um sich durch die per Tab erreichbaren Elemente auf der Seite zu bewegen
Bestätigen Sie, dass es möglich ist, per Tabulator-Taste in den Flash-Inhalt zu gehen
Gehen Sie per Tab weiter und bestätigen Sie, dass es möglich ist, den Flash-Inhalt per Tabulator-Taste zu verlassen
Tests #3 und #4 sind wahr.
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.