Auf dieser Webseite werden Flash-Techniken der Techniken für WCAG 2.0: Techniken und Fehler für WCAG 2.0 aufgelistet. Für Informationen zu den Techniken siehe Einführung in die Techniken für WCAG 2.0. Für eine Liste anderer Techniken lesen Sie das Inhaltsverzeichnis.
Adobe Flash Player ist ein plattformübergreifender Browser Plug-In. Autoren, die Inhalte zur Darstellung in einem Flash Player erstellen, können sich aus einer Reihe von Gründen dazu entschließen, einschließlich Video-Unterstützung, Authoring-Präferenzen, vektor-basierte Grafik-Fähigkeiten oder um einen Vorteil aus verfügbaren Komponenten zu ziehen. Ungeachtet der Motivation des Autors ist es gleichermaßen wichtig sicherzustellen, dass Inhalte, die im Flash Player abgespielt werden, die Barrierefreiheits-Kriterien in den WCAG 2.0 erfüllen, so wie dies auch für andere Webinhalte gilt.
Der Flash Player stellt eine Kombination aus eingebauter Unterstützung der Barrierefreiheit und Leistungsfähigkeit zur Verfügung, die sich Autoren und Autorenwerkzeuge zunutze machen können, um die Unterstützung für barrierefreie Inhalte zu ermöglichen. Flash-Autoren können jedes der wenigen Werkzeuge zur Erstellung von barrierefreien Flash-Inhalten benutzen; diese beinhalten unter anderem:
Flash MX, MX2004, 8, CS3, CS4, CS5
Flex 1.5 und neuer
Flex Builder 2, Flex Builder 3, Flash Builder 4
Flash Catalyst 4
Andere Werkzeuge einschließlich Adobe Presenter und Adobe Captivate
Für Benutzer, die blind sind, ein geringes Sehvermögen haben oder andere assistierende Techniken benutzen, hat der Flash Player 2001 mit Flash Player 6 die Unterstützung eines „accessibility API“ eingeführt. Die Unterstützung der Barrierefreiheit für assistierende Techniken in Flash ist auf die Microsoft Active Accessibility (MSAA)-Schnittstelle und eine Flash Player-spezifische Schnittstelle angewiesen, um Informationen über Flash-Inhalte korrekt für assistierende Techniken zu vermitteln. Die Unterstützung assistierender Techniken wird Benutzern, die Inhalte ansehen, zur Verfügung gestellt, indem eine Kombination aus Folgendem benutzt wird:
Microsoft Internet Explorer 6 oder später in Kombination mit Flash Player 6 oder neuer unter Windows.
Mozilla Firefox 3 oder später in Kombination mit Flash Player 9 oder später unter Windows.
Die Unterstützung assistierender Techniken für MSAA wird in einigen assistierenden Techniken bereitgestellt, das sind unter anderem:
JAWS (4.5 und neuer)
Window-Eyes (4.2 und neuer)
NVDA
ZoomText (8 und neuer)
Flash Player unterstützt auch den Zugriff per Tastatur für Benutzer, die nicht dazu in der Lage sind, eine Maus zu benutzen. Die Tastatur-Unterstützung ist innerhalb der ActiveX-Version des Players, der im Internet Explorer benutzt wird, am besten, aber es gibt auch Techniken, um eine Unterstützung innerhalb von Mozilla Firefox bereitzustellen. Flash-Autoren können die Tab-Reihenfolge des Inhalts innerhalb des veröffentlichten Flash-Inhalts steuern, wie in den WCAG 2.0-Techniken für Flash gezeigt wird.
Der Flash Player wird oft benutzt, um Video anzuzeigen und er bietet eine Unterstützung für Text-Spuren, die benutzt werden können, um geschlossene Untertitel („captions“ oder „subtitles“) in jeder Sprache bereitzustellen; er unterstützt auch mehrere Audiospuren, wodurch die Unterstützung für die Videodeskription ermöglicht wird; er unterstützt mehrere Videospuren, wodurch es ermöglicht wird, eine Übersetzung in die Gebärdensprache für audio-visuelle Inhalte anzubieten.
Derzeit unterstützt der Flash Player weder einen Modus mit hohem Kontrast noch eine Veränderung der Textgröße über das Windows-Betriebssystem. Flash-Autoren können allerdings Gebrauch von der Flash-Unterstützung für Cascading Stylesheets (CSS), von anderer eingebauter Formatierungs-Unterstützung oder von den Anzeige-Filter-Funktionen (display filter functions) in Flash machen, um alternative Ansichten einer flashbasierten Schnittstelle mit größerem Text, alternativen Schriftarten oder alternativen oder hoch-kontrastigen Farbschemata anzubieten.
Die Unterstützung der Barrierefreiheit für assistierende Techniken in Flash ist auf den Gebrauch im Windows-Betriebssystem unter der Verwendung von Internet Explorer 6 oder später (mit Flash Player 6 oder später) oder Mozilla Firefox 3 oder später (mit Flash Player 9 oder später) angewiesen.
Adobe ist weiterhin dabei, die Unterstützung der Barrierefreiheit im Flash Player zu verbessern. Im März 2010 hat Adobe Pläne angekündigt, die Unterstützung für IAccessible2 und die Unterstützung für Barrierefreiheits-APIs sowohl für Mac- als auch für Linux-Plattformen hinzuzufügen.
Für zusätzliche allgemeine Informationen zum Flash Player besuchen Sie die Flash Player FAQ.
2.4.2 Seite mit Titel versehen - Um 2.4.2 zu erfüllen müssen Flash-Inhalte innerhalb einer HTML-Seite, die einen Seitentitel im HTML title-Element hat, eingebettet sein. Siehe H25: Bereitstellung eines Titel durch die Benutzung des title-Elements (HTML) .
3.1.1 Sprache der Seite - Die Sprache des Flash-Inhalts wird vom lang-Attribut des einbindenden object-Elements in HTML festgeschrieben, nicht innerhalb der Flash SWF-Datei selbst. Autoren können mehr als ein Flash SWF auf einer einzigen Webseite einfügen, jedes mit einer anderen Sprache, die im lang-Attribut des object-Elements gekennzeichnet wird . Siehe FLASH13: Benutzung der HTML lang-Attribute, um die Sprache in Flash-Inhalten zu kennzeichnen (Flash) .
3.1.2 Sprache von Teilen - Da die Sprache des Flash-Inhalts nicht innerhalb der Flash SWF-Datei festgeschrieben wird, ist es derzeit nicht möglich, Änderungen der Sprache innerhalb einer einzelnen SWF-Datei zu kennzeichnen.
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.
Der Zweck dieser Technik ist es zu zeigen, wie Nicht-Text-Objekte in Flash markiert werden können, damit sie von assistierenden Techniken gelesen werden können.
Der Flash Player unterstützt Textalternativen zu Nicht-Text-Objekten, indem die name-Eigenschaft im „accessiblity object“ benutzt wird, die in ActionScript oder in Flash-Autorenwerkzeugen definiert werden kann.
Wenn ein Objekt Worte enthält, die wichtig für das Verständnis des Inhalts sind, dann sollte die name-Eigenschaft diese Worte enthalten. Dies ermöglicht es der name-Eigenschaft, auf der Seite die gleiche Funktion wie das Objekt zu haben. Beachten Sie, dass sie nicht notwendigerweise die visuellen Charakteristika des Objekts selber beschreibt, sondern dass sie die gleiche Bedeutung wie das Objekt vermitteln muss.
Das Accessibility Panel (Bedienfeld Eingabehilfen) des Flash Professional Autorenwerkzeugs lässt Autoren Barrierefreiheits-Informationen für assistierende Techniken bereitstellen und Barrierefreiheits-Optionen für individuelle Flash-Objekte oder komplette Flash-Anwendungen festlegen.
Damit eine Textalternative auf ein Nicht-Text-Objekt angewendet werden kann, muss es als Symbol in der Bibliothek des Films (Movies) gespeichert werden. Anmerkung: Flash unterstützt keine Textalternativen für grafische Symbole. Stattdessen muss die Grafik in einen Movieclip oder ein Button-Symbol konvertiert oder darin gespeichert werden.
Rufen Sie das „accessibility panel“ (Bedienfeld Eingabehilfen) auf, indem Sie "Fenster > Andere Bedienfelder > Eingabehilfen" im Menü der Anwendung auswählen oder durch das Tastaturkürzel ALT + F11. Stellen Sie sicher, dass das Kontrollkästchen ‚Objekt mit Eingabehilfen versehen‘ ('Make object accessible') angekreuzt ist.
Wählen Sie die Nicht-Text-Instanz auf der Bühne des Films; die Felder im Bedienfeld Eingabehilfen werden editierbar.
Geben Sie eine aussagekräftige Textalternative, mit der sie den Zweck des Symbols korrekt beschreiben, in das Feld ‚Name‘ ein
Um das Text-Äquivalent eines Objektes durch Software zu managen, indem man ActionScript 2 benutzt, muss das _accProps Objekt benutzt werden. Damit wird ein Objekt referenziert, das mit der Barrierefreiheit zusammenhängende Eigenschaften, die für das Objekt gesetzt wurden, enthält. Das Code-Beispiel unten zeigt ein einfaches Beispiel, wie das _accProps Objekt benutzt wird, um den Namen eines Objektes in ActionScript festzulegen.
Code-Beispiel:
// 'print_btn' is an instance placed on the movie's main timeline
_root.print_btn._accProps = new Object();
_root.print_btn._accProps.name = "Print";Um das Text-Äquivalent eines Objektes durch Software zu managen, indem man ActionScript 3 benutzt, muss das AccessibilityProperties Objekt und die name-Eigenschaft benutzt werden. Das Code-Beispiel unten zeigt ein einfaches Beispiel, wie die name-Eigenschaft benutzt wird, um den Namen eines Objektes in ActionScript zu setzen.
Code-Beispiel:
// 'print_btn' is an instance placed on the movie's main timeline
print_btn.accessibilityProperties = new AccessibilityProperties();
print_btn.accessibilityProperties.name = "Print";Veröffentlichen Sie die SWF-Datei
Öffnen Sie die SWF-Datei in Internet Explorer 6 oder höher (benutzen Sie Flash Player 6 oder höher) oder in Firefox 3 oder höher (benutzen Sie Flash Player 9 oder höher)
Benutzen Sie ein Werkzeug, das in der Lage ist, die name-Textalternative eines Objektes anzuzeigen, wie zum Beispiel aDesigner2, um den Flash-Film zu öffnen.
Schleifen Sie im „GUI summary panel“ durch jedes Objekt, das im Flash-Film enthalten ist und stellen Sie sicher, dass für das Objekt, das einen Namen erhalten hat, ein korrektes name-Attribut im Anzeigefenster des Werkzeugs erscheint.
Autoren können auch mit einem Screenreader testen, indem der Flash-Inhalt gelesen wird und sie zuhören, um zu hören, ob das Textäquivalent gelesen wird, wenn man per Tab zu dem Nicht-Text-Objekt geht (wenn es per Tab erreichbar ist) oder um zu hören, dass der alternative Text gelesen wird, wenn der Inhalt Zeile für Zeile gelesen wird.
Alle Nicht-Text-Objekte haben Textäquivalente, die den gleichen Zweck erfüllen und die gleichen Informationen vermitteln können wie das Nicht-Text-Objekt.
Test #6 ist 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.
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 Ziel dieser Technik ist, eine lange Textalternative zur Verfügung zu stellen, die den gleichen Zweck erfüllt und die gleichen Informationen bietet, wie der Original-Nicht-Text-Inhalt, wenn eine kurze Textalternative nicht ausreichend ist.
Der Flash Player unterstützt lange Textalternativen für Nicht-Text-Objekte, die in ActionScript oder in Flash Autorenwerkzeugen definiert werden können, indem man die Eigenschaft Beschreibung (description property) benutzt, wie in den unten stehenden Beispielen angegeben.
Das Accessibility Panel (Bedienfeld Eingabehilfen) des Flash Professional Autorenwerkzeugs lässt Autoren Barrierefreiheits-Informationen für assistierende Techniken bereitstellen und Barrierefreiheits-Optionen für individuelle Flash-Objekte oder komplette Flash-Anwendungen festlegen.
Damit eine Textalternative auf ein Nicht-Text-Objekt angewendet werden kann, muss es als Symbol in der Bibliothek des Films (Movies) gespeichert werden. Anmerkung: Flash unterstützt keine Textalternativen für grafische Symbole. Stattdessen muss die Grafik in einen Movieclip oder ein Button-Symbol konvertiert oder darin gespeichert werden.
Rufen Sie das „accessibility panel“ (Bedienfeld Eingabehilfen) auf, indem Sie "Fenster > Andere Bedienfelder > Eingabehilfen" im Menü der Anwendung auswählen oder durch das Tastaturkürzel ALT + F11. Stellen Sie sicher, dass das Kontrollkästchen ‚Objekt mit Eingabehilfen versehen‘ ('Make object accessible') angekreuzt ist.
Wählen Sie die Nicht-Text-Instanz auf der Bühne des Films; die Felder im Bedienfeld Eingabehilfen werden editierbar.
Geben Sie eine Beschreibung ein, die den Inhalt des Nicht-Tex-Objektes genau beschreibt. Zum Beispiel könnte ein Schaubild einen ‚Namen‘ haben, der die durch das Schaubild vermittelten Informationen bezeichnet, während das Feld ‚Beschreibung‘ die Informationen mit allen Details auflistet. Alternativ könnte der Name für eine Animation, die Teil eines Lehrfilms über Autoreparaturen ist, lauten: ‚Wie man einen platten Reifen wechselt‘, während die lange Beschreibung jeden Schritt des Vorgangs detaillierter beschreibt.
Wichtig: Benutzen Sie das Feld ‚Beschreibung‘ nur, wenn eine kurze Textalternative nicht ausreichend ist, um den Zweck des Objektes zu beschreiben. Ansonsten lassen Sie das Feld ‚Beschreibung‘ leer.
Um die Text-Äquivalente eines Objektes durch Software zu managen, indem man ActionScript benutzt, muss das _accProps Objekt benutzt werden. Damit wird ein Objekt referenziert, das mit der Barrierefreiheit zusammenhängende Eigenschaften, die für das Objekt gesetzt wurden, enthält. Das Code-Beispiel unten zeigt ein einfaches Beispiel, wie das _accProps Objekt benutzt wird, um den Namen und die Beschreibung eines Objektes in ActionScript festzulegen.
Ein Diagramm, in dem die Verkaufszahlen für Oktober angezeigt werden, hat eine kurze Textalternative, die besagt: „Schaubild mit den Verkaufszahlen für Oktober“. Die lange Beschreibung würde mehr Informationen bereitstellen, wie im Code unten gezeigt.
Code-Beispiel:
// 'chart_mc' is an instance placed on the movie's main timeline
_root.chart_mc._accProps = new Object();
_root.chart_mc._accProps.name = "October Sales Chart";
_root.chart_mc._accProps.description = "Bar Chart showing sales for October.\
There are 6 salespersons.Maria is highest with 349 units.Frances is next\
with 301.Then comes Juan with 256, Sue with 250, Li with 200 and Max\
with 195.The primary use of the chart is to show leaders, so the description\
is in sales order.";Um die Text-Äquivalente eines Objektes durch Software zu managen, indem man ActionScript benutzt, muss das AccessibilityProperties Objekt benutzt werden. Das Code-Beispiel unten zeigt ein einfaches Beispiel, wie das AccessibilityProperties Objekt benutzt wird, um den Namen und die Beschreibung eines Objektes in ActionScript festzulegen.
Ein Diagramm, in dem die Verkaufszahlen für Oktober angezeigt werden, hat eine kurze Textalternative, die besagt: „Schaubild mit den Verkaufszahlen für Oktober“. Die lange Beschreibung würde mehr Informationen bereitstellen, wie im Code unten gezeigt.
Code-Beispiel:
// 'chart_mc' is an instance placed on the movie's main timeline
chart_mc.accessibilityProperties = new AccessibilityProperties();
chart_mc.accessibilityProperties.name = "October Sales Chart";
chart_mc.accessibilityProperties.description = "Bar Chart showing sales for October.\
There are 6 salespersons.Maria is highest with 349 units.Frances is next\
with 301.Then comes Juan with 256, Sue with 250, Li with 200 and Max\
with 195.The primary use of the chart is to show leaders, so the description\
is in sales order.";Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Veröffentlichen Sie die SWF-Datei
Öffnen Sie die SWF-Datei in Internet Explorer 6 oder höher (benutzen Sie Flash Player 6 oder höher) oder in Firefox 3 oder höher (benutzen Sie Flash Player 9 oder höher)
Benutzen Sie ein Werkzeug, das in der Lage ist, die lange Beschreibung eines Objektes anzuzeigen, wie zum Beispiel aDesigner2, um den Flash-Film zu öffnen.
Schleifen Sie im „GUI summary panel“ durch jedes Objekt, das im Flash-Film enthalten ist und stellen Sie sicher, dass für das Objekt, das eine Beschreibung erhalten hat, ein korrekter Beschreibungs-Wert im Anzeigefenster des Werkzeugs erscheint.
Autoren können auch mit einem Screenreader testen, indem der Flash-Inhalt gelesen wird und sie zuhören, um zu hören, ob die Beschreibung gelesen wird, wenn man per Tab zu dem Nicht-Text-Objekt geht (wenn es per Tab erreichbar ist) oder um zu hören, dass der alternative Text gelesen wird, wenn der Inhalt Zeile für Zeile gelesen wird.
Alle Nicht-Text-Objekte haben Textäquivalente, die den gleichen Zweck erfüllen und die gleichen Informationen vermitteln können wie das Nicht-Text-Objekt.
#6 ist 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.
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.
Der Zweck dieser Technik ist es zu zeigen, wir Bilder ausgezeichnet werden können, so dass sie von assistierenden Techniken ignoriert werden können.
Der Flash Player unterstützt die Möglichkeit der Autoren zu steuern, welche Grafiken für assistierende Techniken sichtbar sind, indem die silent-Eigenschaft des accessibility-Objekts benutzt wird, wie in den Beispielen unten gezeigt.
Das Accessibility Panel (Bedienfeld Eingabehilfen) des Flash Professional Autorenwerkzeugs lässt Autoren Barrierefreiheits-Informationen für assistierende Techniken bereitstellen und Barrierefreiheits-Optionen für individuelle Flash-Objekte oder komplette Flash-Anwendungen festlegen.
Um Änderungen an den Barrierefreiheits-Eigenschaften einer Grafik anzuwenden, muss diese als Symbol in der Bibliothek des Films gesichert werden. Anmerkung: Flash unterstützt keine Textalternativen für grafische Symbole. Stattdessen muss die Grafik in einen Movieclip oder ein Button-Symbol konvertiert oder darin gespeichert werden.
Rufen Sie das „accessibility panel“ (Bedienfeld Eingabehilfen) auf, indem Sie "Fenster > Andere Bedienfelder > Eingabehilfen" im Menü der Anwendung auswählen oder durch das Tastaturkürzel ALT + F11.
Wählen Sie das Grafik-Objekt aus
Wenn das Kontrollkästchen ‚Objekt mit Eingabehilfen versehen‘ (Make object accessible) im Bedienfeld Eingabehilfen angekreuzt ist, dann deaktivieren Sie diese Option, um die Grafik aus den Barrierefreiheits-Informationen, die an assistierende Techniken vermittelt werden, zu entfernen.
Um die Text-Äquivalente eines Objektes durch Software zu managen, indem man ActionScript benutzt, muss die Eigenschaft _accProps benutzt werden. Damit wird ein Objekt referenziert, das mit der Barrierefreiheit zusammenhängende Eigenschaften, die für das Objekt gesetzt wurden, enthält. Das Code-Beispiel unten zeigt ein einfaches Beispiel, wie die Eigenschaft _accProps benutzt wird, um ein Objekt aus den Barrierefreiheits-Informationen für den Film entfernt wird, indem man ActionScript benutzt.
Code-Beispiel:
// 'decorative_mc' is an instance placed on the movie's main timeline
_root.decorative_mc._accProps = new Object();
_root.decorative_mc._accProps.silent = true; Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Veröffentlichen Sie die SWF-Datei
Öffnen Sie die SWF-Datei in Internet Explorer 6 oder höher (benutzen Sie Flash Player 6 oder höher) oder in Firefox 3 oder höher (benutzen Sie Flash Player 9 oder höher)
Benutzen Sie ein Werkzeug, das in der Lage ist, die Barrierefreiheits-Informationen eines Objektes zu zeigen, wie zum Beispiel aDesigner2, um den Flash-Film zu öffnen.
Schleifen Sie im „GUI summary panel“ durch jedes Objekt, das im Flash-Film enthalten ist und stellen Sie sicher, dass das Objekt, das versteckt sein soll, nicht im Anzeigefenster des Werkzeugs erscheint.
Autoren können auch mit einem Screenreader testen, indem der Flash-Inhalt gelesen wird und sie zuhören, um zu hören, ob das Objekt nicht erwähnt wird, wenn die Seite gelesen wird.
Nicht-Text-Objekte, die so kodiert sind, dass sie vor assistierenden Techniken versteckt werden, stehen assistierenden Techniken nicht zur Verfügung.
Test #6 ist 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.
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 Ziel dieser Technik ist es, Absenden-Schaltflächen zu benutzen, um es Benutzern zu erlauben, Schritte einzuleiten, die zu Änderungen des Kontextes führen statt es zuzulassen, dass Änderungen des Kontextes passieren, wenn der Wert (value) oder der Zustand (state) eines nicht absendenden Schaltflächen-Steuerelementes verändert wird. Der beabsichtigte Verwendungszweck einer submit-Schaltfläche in dieser Technik ist es, einen HTTP-Request zu generieren, der Daten, die in ein Formular eingegeben wurden, absendet, oder eine Aktion auszuführen, die eine Änderung des Kontextes auslöst; also ist dies ein passendes Steuerelement, um diese Änderung zu initiieren.
Dies ist ein einfaches ActionScript 3-Beispiel einer Combobox-Komponente mit einer Absenden-Schaltfläche, um den Benutzer zu einer anderen Ressource umzuleiten.
Code-Beispiel:
import fl.accessibility.ComboBoxAccImpl;
import flash.net.navigateToURL;
import flash.net.URLRequest;
ComboBoxAccImpl.enableAccessibility();
state_submit.addEventListener(MouseEvent.CLICK, submitHandler);
function submitHandler(e) {
var url: URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" +
state_combo.selectedLabel);
navigateToURL(url, "_self");
}Dies ist ein einfaches ActionScript 2-Beispiel einer Combobox-Komponente mit einer Absenden-Schaltfläche, um den Benutzer zu einer anderen Ressource umzuleiten - das gleiche Beispiel wie in Beispiel 1, nur in ActionScript 2:
Code-Beispiel:
import fl.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
state_submit.addEventListener("click", submitHandler);
function submitHandler(e) {
getURL("http://www.wikipedia.org/wiki/" + state_combo.selectedLabel, "_self");
}Finden Sie alle interaktiven Steuerelement-Instanzen (bei denen es sich nicht um Absenden-Schaltflächen handelt) im Flash-Film, die eine Änderung des Kontextes auslösen können, z.B. eine Combobox, eine Optionsschaltfläche oder ein Kontrollkästchen.
Bestätigen Sie für jede Instanz, dass der/die Event-Handler, der/die für die Änderung des Kontextes verantwortlich ist/sind, nicht mit den Steuerelementen selber verknüpft ist/sind, sondern stattdessen mit einer separaten Schaltfläche.
#2 ist 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.
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 Ziel dieser Technik ist es, eine unnötige Duplizierung zu vermeiden, die auftritt, wenn nebeneinander liegender Text und Symbolversionen einer Schaltfläche in einem Flash-Film enthalten sind.
Bei vielen Arten an Schaltflächen liegen sowohl eine Text- als auch eine Symbol-Schaltfläche nebeneinander. Oft wird die Text- und die Symbol-Schaltfläche in separaten Schaltflächen gerendert, zum Teil, um eine leichte visuelle Trennung voneinander zu schaffen. Auch wenn ein sehender Benutzer diese leichte visuelle Trennung sehen kann, kann es sein, dass ein blinder Benutzer oder einer mit geringem Sehvermögen nicht dazu in der Lage ist, die Trennung zu erkennen und durch die redundanten Schaltflächen verwirrt wird. <segment 5903> Um dies zu vermeiden, unterlassen es manche Autoren, den barrierefreien Namen (accessible name) für das Bild festzulegen, aber damit würde Erfolgskriterium 1.1.1 nicht erfüllt, da die Textalternative nicht den gleichen Zweck erfüllen würde wie die grafische Schaltfläche. Die bevorzugte Methode, um dies zu anzugehen ist es, Text und Bild zusammen in eine Schaltflächen-Symbol-Instanz zu tun und einen einzigen barrierefreien Namen für die Schaltfläche bereitzustellen, um eine Dopplung des Textes auszuschließen.
Die folgenden Beispiele sind für eine Situation, in der eine Schaltflächen-Instanz, die sowohl aus einem Bild als auch aus einem Text besteht, auf der Bühne ist. Die kombinierte Schaltfläche in diesem Beispiel benutzt den Instanz-Namen ‚flashLink1‘.
Um die kombinierte Schaltfläche in Flash Professional zu erstellen:
Fügen Sie ein grafisches Objekt und Text zu der Bühne hinzu
Wählen Sie beide Objekte aus
Wählen Sie ‚Neues Symbol‘ aus dem Menü Einfügen oder drücken Sie Ctrl+F8, um ein neues Schaltflächen-Objekt zu erstellen
Klicken Sie auf das Schaltflächen-Objekt auf der Bühne und geben Sie einen Instanz-Namen im Bedienfeld Eigenschaften.
Fahren Sie unten unter Beispiel 1, 2 oder 3 fort.
Das Bedienfeld Eingabehilfen wird benutzt, um den barrierefreien Namen festzulegen (der in diesem Fall gleich ist wie der visuelle Text).
ActionScript 3 kann statt des Bedienfelds Eingabehilfen benutzt werden, um den Barrierefreiheits-Namen für die kombinierte Schaltfläche wie folgt zu definieren:
Code-Beispiel:
// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1.accessibilityProperties = new AccessibilityProperties();
flashLink1.accessibilityProperties.name = "Learn more about Flash";ActionScript 2 kann statt des Bedienfelds Eingabehilfen benutzt werden, um den Barrierefreiheits-Namen für die kombinierte Schaltfläche wie folgt zu definieren:
Code-Beispiel:
// 'flashLink1' is an instance placed on the movie's main timeline
flashLink1._accProps = new Object();
flashLink1._accProps.name = "Learn more about Flash";Veröffentlichen Sie die SWF-Datei
Öffnen Sie die SWF-Datei in Internet Explorer 6 oder höher (benutzen Sie Flash Player 6 oder höher) oder in Firefox 3 oder höher (benutzen Sie Flash Player 9 oder höher)
Benutzen Sie ein Werkzeug, das in der Lage ist, die name-Textalternative eines Objektes anzuzeigen, wie zum Beispiel aDesigner2, um den Flash-Film zu öffnen.
Wenn Sie aDesigner2 verwenden, benutzen Sie das „GUI Summary panel“ um jede Bildschaltfläche im Flash-Film zu überprüfen und sicherzustellen, dass es kein separates, redundantes Text-Steuerelement neben dem Bild, das die gleiche Aktion ausführt, gibt.
Alle oben genannten Tests 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.
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 Ziel dieser Technik ist es Textalternativen zur Verfügung zu stellen, die den gleichen Zweck erfüllen wie die anklickbaren Hotspots eines Bildes. Jeder Hotspot dient als anklickbarer Bereich für einen Teil des Bildes, der eine Aktion auslösen kann (wie beispielsweise das Öffnen einer Webseite, die dem Hotspot zugeordnet ist). Die Hotspots werden als unsichtbare Flash-Schaltflächen implementiert, von denen jede einen barrierefreien Namen erhält, der das Ziel des Hotspots beschreibt.
Fügen Sie die Originalgrafik, die anklickbare Hotspots benötigt, zu der Bühne hinzu.
Machen Sie bei jedem Hotspot das Folgende:
Erstellen Sie ein neues Schaltflächen-Symbol, indem Sie „Neues Symbol“ aus dem Flash Professional Menü ‚Einfügen‘ auswählen oder indem Sie den Kurzbefehl Ctrl + F8 benutzen.
Erstellen Sie innerhalb des Schaltflächen-Symbols eine Form, die der anklickbaren Oberfläche entspricht.
Platzieren Sie die neu erstellte Schaltfläche über der Originalgrafik.
Öffnen Sie das Eingabefeld Eigenschaften der Schaltfläche und wählen Sie „Alpha“ aus der Aufklappliste „Stil“ unter „Farbeffekt“. Ändern Sie den Wert des erscheinenden „Alpha“-Schiebereglers auf Null, so dass die Schaltfläche unsichtbar wird.
Legen Sie einen Wert für das „tabindex“-Feld fest, um der Schaltfläche eine logische Position in der Tab-Reihenfolge zu geben, indem Sie das Bedienfeld Eingabehilfen benutzen.
Legen Sie einen barrierefreien Namen fest, der den Zweck des Hotspots beschreibt, indem Sie das Bedienfeld Eingabehilfen benutzen.
Das Ergebnis kann im funktionierenden Beispiel zur Erstellung barrierefreier Hotspots, indem man unsichtbare Schaltflächen benutzt, gesehen werden. Die Quelle für die Erstellung barrierefreier Hotspots durch die Benutzung unsichtbarer Schaltflächen steht zur Verfügung.
Finden Sie alle Bilder mit Hotspots. Bestätigen Sie für jeden Hotspot, dass:
Der Hotspot als unsichtbare Schaltfläche implementiert wurde
Der Hotspot einen barrierefreien Namen hat, entweder durch das Bedienfeld Eingabehilfen oder durch ActionScript
#1 und #2 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.
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.
Der Zweck dieser Technik ist es, Benutzern zu erlauben zu entscheiden, ob zusätzliche Information zum Label einer Schaltfläche oder eines anderen Steuerelementes hinzugefügt werden sollen, so dass diese auch außerhalb des Kontextes verständlich sind.
Manche Benutzer ziehen es vor, Steuerelement-Label zu haben, die in sich abgeschlossen sind und bei denen es keine Notwendigkeit gibt, den Kontext des Steuerelementes zu erkunden. Andere Benutzer finden, dass das Hinzufügen von Kontextinformationen zu jeder Schaltfläche repetitiv ist und dass es ihre Fähigkeiten, eine Site zu benutzen, verringert. Die Benutzer von assistierenden Techniken waren bei ihren Rückmeldungen an die Arbeitsgruppe dazu, was vorzuziehen ist, geteilter Meinung. Diese Technik erlaubt es Benutzern, die Methode zu nehmen, die für sie am besten funktioniert.
Es gibt ein Steuerelement nahe am Beginn der Seite, das die Label für Steuerelemente auf der Seite erweitert, so dass kein zusätzlicher Kontext notwendig ist, um den Zweck dieser Steuerelemente zu verstehen. Es muss immer möglich sein, den Zweck des Steuerelementes unmittelbar durch sein Label zu verstehen.
Diese Technik erweitert die Steuerelement-Label nur für die aktuelle Seitenansicht. Es ist auch möglich und wäre in manchen Fällen ratsam, diese Einstellung in einem Cookie oder einem server-seitigen Benutzerprofil zu speichern, so dass Benutzer diese Auswahl nur einmal pro Site treffen müssten.
Dieses Beispiel benutzt ActionScript, um Kontext-Informationen direkt zu dem Label einer Schaltfläche hinzuzufügen. Wenn über die Schaltfläche zu „Schaltflächen-Label erweitern“ geschaltet wird, dann wird die Label-Eigenschaft jeder Schaltfläche auf der Seite verändert.
Code-Beispiel:
import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
btn1.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e) {
btn2.label = btn1.selected? "PDF version of 2010 brochure": "PDF";
btn2.width = btn1.selected? 200: 100;
btn3.label = btn1.selected? "Text version of 2010 brochure": "Text";
btn3.width = btn1.selected? 200: 100;
btn4.label = btn1.selected? "Word version of 2010 brochure": "Word";
btn4.width = btn1.selected? 200: 100;
}Der Ergebnis können Sie im funktionierenden Beispiel „Adding contextual information to a button label“ (Hinzufügen von zusätzlichen Kontext-Informationen zu einem Schaltflächen-Label) sehen. Die Quelle zum Hinzufügen von Kontext-Informationen zu einem Schaltflächen-Label steht zur Verfügung.
Wenn ein Flash-Film Inhalte mit kontextabhängigen Labels enthält, dann bestätigen Sie, dass es ein separates Steuerelement zum umschalten zur Verfügung steht, das es dem Benutzer erlaubt, die Label zu erweitern, so dass sie nicht länger kontextabhängig sind.
Das oben genannte ist 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.
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 Ziel dieser Technik ist es, eine semantische Gruppierung für zueinander in Beziehung stehende Formular-Steuerelemente zur Verfügung zu stellen. Dies erlaubt es Benutzern, die Beziehung der Steuerelemente untereinander zu verstehen und mit dem Formular schneller und effizienter zu interagieren.
Wenn zueinander in Beziehung stehende Steuerelemente gruppiert werden, dann kann diese Gruppierung in Flash gekennzeichnet werden, indem man den Namen der Gruppe zu dem barrierefreien Namen jedes Formular-Steuerelementes hinzufügt.
Die Gruppierung von Steuerelementen ist bei zueinander in Beziehung stehende Radiobuttons und Kontrollkästchen am wichtigsten. Ein Satz Radiobuttons oder Kontrollkästchen steht zueinander in Beziehung, wenn sie alle Werte für ein einziges, benanntes Feld versenden. Sie funktionieren so wie Auswahllisten und erlauben es dem Benutzer, aus einer Reihe an Optionen auszuwählen, mit der Ausnahme, dass Auswahllisten einzelne Steuerelemente sind während Radiobuttons und Kontrollkästchen multiple Steuerelemente sind. Da es multiple Steuerelemente sind, ist es besonders wichtig, dass sie semantisch gruppiert werden, so dass sie leichter als einzelnes Steuerelement behandelt werden können. Benutzeragenten zeigen häufig den Wert von legend vor der Beschriftung jedes Steuerelementes an, um Benutzer daran zu erinnern, dass sie Teil der selben Gruppe sind.
Es kann auch nützlich sein, andere Reihen von Steuerelementen, die keine so enge Beziehung zueinander haben, als Reihen von Radiobuttons und Kontrollkästchen zu gruppieren. Zum Beispiel können verschiedene Felder, welche die Adresse des Benutzers sammeln, zusammen gruppiert werden mit der Legende „Adresse“.
Dieses Beispiel zeigt, wie der Gruppen-Name für Radiobuttons in einer Gruppe barrierefrei gemacht werden kann, indem man ihn zum barrierefreien Namen jedes Radiobuttons hinzufügt:
Fügen Sie die Radiobutton-Komponenten auf der Bühne hinzu:
Geben Sie das Label jedes Buttons ein, indem Sie dessen „label“-Eigenschaft benutzen
Fügen Sie das visuelle Gruppen-Label links oder oberhalb der in Schritt 1 hinzugefügten Buttons hinzu
Wählen Sie jeden Radiobutton aus. Fügen Sie den Gruppen-Namen im Bedienfeld Eingabehilfen zu dem Feld „Name“ hinzu;
Flash wird den Gruppen-Namen mit dem individuellen Namen jedes Buttons verknüpfen, wie beispielsweise „Geschlecht männlich“ („gender male“).
Diese Vorgehensweise wird in dem unten stehenden Bildschirmfoto veranschaulicht:
Anmerkung: Um die Radiobuttons in diesem Beispiel barrierefrei zu machen, müssen die folgenden zwei Zeilen zum Skript des Films hinzugefügt werden: import fl.accessibility.RadioButtonAccImpl; RadioButtonAccImpl.enableAccessibility();
Für eine Darstellung dieser Vorgehensweise sehen Sie sich die funktionierende Version von „Adding a group name to the accessible name of radio buttons“ (Hinzufügen eines Gruppen-Namens zu dem barrierefreien Namen von Radiobuttons) an. Die Quelle für das Hinzufügen eines Gruppen-Namens zu dem barrierefreien Namen von Radiobuttons steht zur Verfügung.
Das unten stehende Code-Beispiel zeigt den grundlegenden Machbarkeitsnachweis einer Klasse, die automatisch eine Reihe an Formular-Steuerelementen innerhalb eines Fieldsets wie Rechteck (rectangle) - einschließlich legend - platziert. Für jedes hinzugefügte Steuerelement wird ein AccessibilityProperties-Objekt erstellt und seine Eigenschaft „Name“ wird auf eine Kombination aus dem legend-Text und dem tatsächlichen Label des Formular-Steuerelementes gesetzt.
Code-Beispiel:
package wcagSamples {
import flash.display. *;
import flash.text. *;
import fl.controls. *
import flash.accessibility. *;
import fl.accessibility. *;
/**
* Basic example that demonstrates how to simulate a fieldset, as provided
* in HTML. The FieldSet class takes a group of controls and places them
* inside a fieldset rectangle with the legend text at the top. For each form
* control, the legend text is prepended to the control's accessible name
*
* Note: This is only a proof of concept, not a fully functional class
*
* @langversion 3.0
* @playerversion Flash 10
*
*/
public class FieldSet extends Sprite {
private var legend: String;
private var bBox: Shape;
private var currentY: int = 20;
public static var LABEL_OFFSET_X: int = 20;
public static var CONTROL_OFFSET_X: int = 110;
/**
* CONSTRUCTOR
* Legend specifies the FieldSet's legend text, items is an array
* describing the controls to be added to the FieldSet
*/
public function FieldSet(legend: String, items: Array) {
// enable accessibility for components used in this example
RadioButtonAccImpl.enableAccessibility();
CheckBoxAccImpl.enableAccessibility();
//create FieldSet rectangle and legend
legend = legend;
bBox = new Shape();
bBox.graphics.lineStyle(1);
bBox.graphics.drawRect(10, 10, 300, 250);
bBox.graphics.beginFill(0x0000FF, 1);
addChild(bBox);
var fieldSetLegend: TextField = new TextField();
fieldSetLegend.text = legend;
fieldSetLegend.x = 20;
fieldSetLegend.y = 3;
fieldSetLegend.background = true;
fieldSetLegend.backgroundColor = 0xFFFFFF;
fieldSetLegend.border = true;
fieldSetLegend.borderColor = 0x000000;
fieldSetLegend.autoSize = TextFieldAutoSize.LEFT;
addChild(fieldSetLegend);
// add controls
for (var i = 0; i < items.length; i++) {
processItem(items[i]);
}
}
/**
* Adds the control to the Fieldset and sets its accessible name. A
* control is represented as an array, containing the following values:
* [0] : A string describing the component type
* (can be "TextInput", TextArea", Checkbox" or "RadioGroup").
* [1] : The label used to identify the control
* [2] : If [0] is "RadioGroup", then [2] needs to contain an array of the
* labels for each individual radio button. if [0] is "CheckBox", then
* [1] can either be empty or a question (e.g. "Do you smoke?"), and
* [2] the CheckBox label (e.g. "Yes").
*
*/
function processItem(item: Array) {
if (item.length < 2)
return;
currentY += 30;
var newControl;
//create visual label
var lbl: Label;
lbl = new Label();
lbl.text = item[1] + ": ";
lbl.x = FieldSet.LABEL_OFFSET_X;
lbl.y = currentY;
lbl.width = FieldSet.CONTROL_OFFSET_X;
lbl.autoSize = TextFieldAutoSize.RIGHT;
lbl.wordWrap = true;
addChild(lbl);
switch (item[0]) {
case "TextInput":
case "TextArea":
newControl = item[0] == "TextInput"? new TextInput(): new TextArea();
newControl.x = FieldSet.CONTROL_OFFSET_X;
//concatenate accessible name, combining legend and label
setAccName(newControl, legend + " " + item[1]);
break;
case "CheckBox":
newControl = new CheckBox();
newControl.label = item[2];
newControl.x = FieldSet.CONTROL_OFFSET_X;
setAccName(newControl, legend + " " + item[1] + " " + item[2]);
break;
case "RadioGroup":
if (item[2] && item[2].length > 0) {
var radioGroup: RadioButtonGroup = new RadioButtonGroup(item[0]);
var newBtn: RadioButton;;
for (var i = 0; i < item[2].length; i++) {
newBtn = new RadioButton();
// concatenate the legend, the group label, and the button label
setAccName(newBtn, legend + " " + item[1] + " " + item[2][i]);
newBtn.label = item[2][i];
newBtn.group = radioGroup;
newBtn.x = FieldSet.CONTROL_OFFSET_X;
newBtn.y = currentY;
addChild(newBtn);
if (i < item[2].length - 1)
currentY += 30;
}
}
break;
}
if (newControl) {
newControl.y = currentY;
addChild(newControl);
}
}
/**
* Creates an AccessibilityProperties object for an object and sets its name property
*/
public function setAccName(obj, accName) {
var accProps: AccessibilityProperties = new AccessibilityProperties();
accProps.name = accName;
obj.accessibilityProperties = accProps;
}
}
}Diese Beispiel-Klasse kann wie folgt initialisiert werden:
Code-Beispiel:
var myFieldSet = new FieldSet("Personal Details", // the legend
[["TextInput", "Name"], // text field
["RadioGroup", "Gender", ["Male", "Female"]], // radio button group
["CheckBox", "Do you smoke", "yes"], // checkbox
["TextArea", "Comments"], // text area
]);
addChild(myFieldSet);Für eine Darstellung dieser Vorgehensweise sehen Sie sich die funktionierende Version von „Programmatically adding a group name with the accessible name of radio buttons“ (Hinzufügen eines Gruppen-Namens zu dem barrierefreien Namen von Radiobuttons durch Software) an. Die Quelle für das Hinzufügen eines Gruppen-Namens zu dem barrierefreien Namen von Radiobuttons durch Software steht zur Verfügung.
Anmerkung: Adobe Flex erlaubt es Ihnen, diese Art von Verhalten auszuführen, indem die Elemente <form>, <formitem> und <formheading> benutzt werden
Wenn ein Flash-Film gruppierte Formular-Steuerelemente enthält, dann bestätigen Sie eines von beidem:
Der Name der Gruppe ist im Feld „Name“ im Bedienfeld Eingabehilfen für jedes Steuerelement enthalten.
Jedes Steuerelement hat eine AccessibilityProperties.name Eigenschaft, die sowohl den Namen der Gruppe als auch den Label-Text des Steuerelementes enthält
Eines der oben genannten ist 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.
Adobe Flash-basierte Inhalte
Adobe Flash CS3 und später
Die Technik bezieht sich auf:
Siehe User Agent Support for Flash für allgemeine Informationen zur Unterstützung durch Benutzeragenten.
Das Ziel dieser Technik ist es, Menschen mit eingeschränktem Hörvermögen oder anderen Schwierigkeiten beim Hören der Geräusche und Dialoge in synchronisierten Medien eine Möglichkeit bereitzustellen, um sie in die Lage zu versetzen auszuwählen, ob sie Untertitel als Alternative zu Audioinformationen sehen wollen. Mit dieser Technik wird der gesamte Dialog und wichtige Geräusche als Text auf eine Art und Weise bereitgestellt, die es erlaubt, dass der Text versteckt ist außer der Benutzer fordert ihn an. Folglich sind sie nur bei Bedarf sichtbar. Dies kann erreicht werden, indem man die die FLVPlayback- und FLVPlaybackCaptioning-Komponenten benutzt. Anmerkung: Wenn man die FLVPlayback Skins benutzt, dann ist die Schaltfläche „Closed Caption“ standardmäßig barrierefrei, wenn man aber selbst erstellte Skins implementiert, dann müssen Autoren testen um zu verifizieren, dass die Schaltfläche barrierefrei ist.
Benutzen Sie ein externes Werkzeug (wie beispielsweise Magpie oder einen einfachen Text-Editor), um eine zeitlich angepasste Text-Captions xml-Datei zu erstellen. Halten Sie den Video-Inhalt an und spielen Sie ihn erneut und fügen Sie für jeden relevanten Teil der Audio-Informationen (einschließlich Sprache, wichtige Hintergrundgeräusche und Ereignis-Geräusche) sowohl den Code für die Anfangs- und Endzeit als auch die Alternative in Textform hinzu. Werkzeuge wie Magpie haben fortschrittliche Funktionen, um diesen Prozess leichter zu machen wohingegen es ein Text-Editor erforderlich macht, dass Sie die Zeit-Codes aus Ihrem Media-Player lesen und diese in das XML einfügen, wie im Beispiel-Caption-Dokument unten dargestellt.
Erstellen Sie in Flash eine neue Instanz der FLVPlayback-Komponente auf Ihrer Bühne und setzen Sie dessen contentPath-Wert auf Ihre flv video-Datei, indem Sie das Bedienfeld ‚Komponenten-Inspektor‘ oder 'Parameter' benutzen.
Stellen Sie den ‚Skin‘-Parameter so ein, dass er ein Skin benutzt, das die Schaltfläche CC (closed captions button) enthält.
Erstellen Sie auf der Komponenten-Liste ebenfalls eine Instanz der FLVPlayback-Captioning-Komponente. Setzen Sie dessen ‚Source‘-Parameter im Bedienfeld ‚Komponenten-Inspektor‘ auf den Namen Ihrer zeitlich angepassten Text-xml-Datei. Die Untertitel (captions) werden automatisch unten im Frame des Players platziert.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="defaultSpeaker" tts:backgroundColor="black"
tts:color="white" tts:fontFamily="SansSerif" tts:fontSize="12"
tts:fontStyle="normal" tts:fontWeight="normal"
tts:textAlign="left" tts:textDecoration="none"/>
<style id="defaultCaption" tts:backgroundColor="black"
tts:color="white" tts:fontFamily="Arial" tts:fontSize="12"
tts:fontStyle="normal" tts:fontWeight="normal"
tts:textAlign="center" tts:textDecoration="none"/>
</styling>
</head>
<body id="thebody" style="defaultCaption">
<div xml:lang="en">
<p begin="0:00:00.20" end="0:00:02.20">If there were nothing in
our universe</p>
<p begin="0:00:02.20" end="0:00:05.65">the fabric of space-time
would be flat.</p>
<p begin="0:00:05.65" end="0:00:08.88">But add a mass, and
dimples form within it.</p>
<p begin="0:00:16.61" end="0:00:19.84">Smaller objects that
approach that large mass</p>
<p begin="0:00:19.84" end="0:00:23.41">will follow the curve in
space-time around it.</p>
<p begin="0:00:32.64" end="0:00:36.84">Our nearest star, the
sun, has formed such a dimple</p>
<p begin="0:00:36.84" end="0:00:38.00">and our tiny planet
Earth</p>
<p begin="0:00:38.00" end="0:00:41.50">goes along for the ride
in the curve of its dimple</p>
<p begin="0:00:41.50" end="0:00:43.80">staying in orbit around
the sun.</p>
<p begin="0:00:45.67" end="0:01:55.00"/>
</div>
</body>
</tt>Dies wird in einem funktionierenden Beispiel „Adding a timed text caption file to Flash“ (Hinzufügen einer zeitlich angepassten Text-Caption-Datei zu Flash) demonstriert. Das funktionierende Beispiel zum Hinzufügen einer zeitlich angepassten Text-Caption-Datei zu Flash (Adding a timed text caption file to Flash) steht zur Verfügung.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines
Sehen Sie sich den gesamten Video-Inhalt, der von Ihrem Flash-Film angezeigt wird, an. Stellen Sie sicher, dass:
Untertitel (captions) für sämtliche Audio-Inhalte zur Verfügung stehen, entweder standardmäßig angeschaltet oder als Benutzereinstellung.
Die Untertitel (captions) sämtliche Audio-Informationen, die in dem Video enthalten sind, korrekt beschreiben.
#1 und #2 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.
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 Ziel dieser Technik ist es, eine klare Angabe dazu zur Verfügung zu stellen, dass ein bestimmtes Formular-Steuerelement in einer Webanwendung oder in einem Formular zum erfolgreichen Absenden von Daten erforderlich ist. Das Wort „required“ (erforderlich) wird zu dem barrierefreien Namen des Formular-Steuerelementes hinzugefügt und neben dem Label wird ein visueller Indikator platziert.
Dieses Beispiel zeigt, wie man das Bedienfeld Eingabehilfen benutzt, um ein Feld als ‚Pflichtfeld‘ (required) für Benutzer zu kennzeichnen:
Platzieren Sie visuell einen Asterisken oder irgendeinen anderen Hinweis neben dem Label des Formular-Steuerelementes.
Benutzen Sie das Bedienfeld Eingabehilfen, um das Wort „required“ mit dem Label des Steuerelementes im Feld „Name“ zu kombinieren.
Diese Vorgehensweise wird in dem unten stehenden Bildschirmfoto veranschaulicht:
Dies wird im funktionierenden Beispiel von „Adding the word "required" to the control's accessible name“ (Hinzufügen des Wortes „required“ zum barrierefreien Namen des Steuerelementes) demonstriert. Die Quelle für das Hinzufügen des Wortes „required“ zum barrierefreien Namen des Steuerelementes steht zur Verfügung.
Bestätigen Sie für jedes erforderliche Formular-Steuerelement innerhalb eines Flash-Films, dass:
Der Pflichtfeld-Status visuell gekennzeichnet ist
Der Pflichtfeld-Status in Textform gekennzeichnet ist, indem das Feld 'Name' im Bedienfeld Eingabehilfen benutzt wird
Alle oben genannten Punkte sind richtig
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.
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 Ziel dieser Technik ist es, eine längere, detailliertere Textinformation für ein Bild zur Verfügung zu stellen, als für den barrierefreien Namen des Bildes angemessen wäre. Neben dem Bild wird eine barrierefreie Schaltfläche bereitgestellt, die ein neues Bedienfeld anzeigt, das den langen Beschreibungstext des Bildes enthält.
In diesem Beispiel wird ein Bild, das statistische Daten enthält, gezeigt Das Bild hat eine kurze Textalternative ("Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities"). Unter dem Bild kann der Benutzer auf eine Schaltfläche klicken, die in Textform eine lange Beschreibung der statistischen Informationen selber einblendet. Wenn die Schaltfläche angeklickt wird, dann werden die folgenden Schritte eingeleitet:
Der MovieClip, der die lange Beschreibung enthält, wird sichtbar gemacht und sein AccessibilityProperties.silent-Property wird auf falsch gesetzt, damit er für assistierende Techniken sichtbar wird. Seine Inhalte werden in der Tab-Reihenfolge platziert.
Das Originalbild und die Schaltfläche werden vorübergehend vor den assistierenden Techniken und der Tab-Reihenfolge versteckt.
Das Bild und der beschreibende Text stammen von HTML example for long image descriptions on WebAIM.org (HTML-Beispiel für lange Beschreibungen auf WebAIM.org)
Die Ergebnisse für diese Technik werden in der funktionierenden Version von Making a hidden description visible on request (Eine versteckte Beschreibung auf Anfrage sichtbar machen) gezeigt. Die Quelle für „Eine versteckte Beschreibung auf Anfrage sichtbar machen“ steht zur Verfügung.
Code-Beispiel:
import flash.accessibility. *;
import fl.accessibility.ButtonAccImpl;
import flash.system.Capabilities;
ButtonAccImpl.enableAccessibility();
//set accessibility properties
graph_mc.accessibilityProperties = new AccessibilityProperties();
graph_mc.accessibilityProperties.name = "Graph of percentage of total U.S. \
noninsitutionalized population age 16-64 declaring one or more disabilities";
longDescBtn.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties.forceSimple = false;
hideLongDesc();
//set click handlers for button
longDescBtn.addEventListener("click", function () {
showLongDesc()
});
longDesc_mc.longDescCloseBtn.addEventListener("click", function () {
hideLongDesc()
});
function showLongDesc() {
// hide the original content from screen readers
graph_mc.accessibilityProperties.silent = true;
graph_mc.tabEnabled = false;
graph_mc.alpha = 0.2;
longDescBtn.enabled = false;
longDescBtn.accessibilityProperties.silent = true;
longDesc_mc.accessibilityProperties.silent = false;
// make the long description panel visible, both visually and to screen readers
longDesc_mc.visible = true;
longDesc_mc.tabEnabled = true;
longDesc_mc.longDescTitle.stage.focus = longDesc_mc.longDescTitle;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
}
function hideLongDesc() {
//do the opposite to what showLongDesc does
graph_mc.accessibilityProperties.silent = false;
graph_mc.tabEnabled = true;
graph_mc.alpha = 1;
longDescBtn.enabled = true;
longDescBtn.accessibilityProperties.silent = false;
longDesc_mc.visible = false;
longDesc_mc.accessibilityProperties.silent = true;
longDesc_mc.tabEnabled = false;
longDescBtn.stage.focus = longDescBtn;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
}Wenn ein Flash-Film Bilder enthält, die lange Beschreibungen benötigen, dann bestätigen Sie, dass eine lange Beschreibung durch eine separate Schaltfläche bereitgestellt wird.
Das oben genannte ist 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.
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 Ziel dieser Technik ist es, Benutzereingaben anhand von client-seitigem Scripting zu validieren, während die Werte für jedes Feld eingegeben werden. Wenn Fehler gefunden werden, dann wird zu den Steuerelementen, die ungültige Daten enthalten, eine Beschreibung hinzugefügt. Visuell wird die Beschreibung neben dem Steuerelement platziert. Darüber hinaus wird der Text mit der Fehlermeldung zur barrierefreien Beschreibung des Steuerelementes hinzugefügt, so dass er von assistierenden Techniken gelesen werden kann, wenn das Steuerelement den Fokus erhält.
In diesem Beispiel wird ein Beispielformular mit zwei Textfeldern ('name' - Name - und 'zip code' - Postleitzahl- ) gezeigt . Beide Felder sind Pflichtfelder. Wenn die Absenden-Schaltlfäche des Formulars gedrückt wird, dann werden die Werte der Textfelder validiert. Wenn ein Textfeld einen ungültigen Wert enthält, dann wird ein _accProps-Objekt für das Textfeld erstellt und sein description-Property wird auf die Fehlermeldung gesetzt.
Anmerkung: Statt die barrierefreie Beschreibung (accessible description) zu benutzen, kann der Fehlertext auch zu dem barrierefreien Namen (_accProps.name) hinzugefügt werden, der von einer größeren Anzahl an assistierenden Techniken unterstützt wird als das _accProps.description-Property.
ActionScript 2.0 Code
Code-Beispiel:
import flash.accessibility. *;
import mx.accessibilty.ButtonAccImpl;
import mx.controls.Alert;
import mx.accessibility.AlertAccImpl;
AlertAccImpl.enableAccessibility();
ButtonAccImpl.enableAccessibility;
resetTextFieldAccNames();
Accessibility.updateProperties();
submit_btn.addEventListener("click", handleClick);
function handleClick(e) {
//reset values
resetTextFieldAccNames();
resetTextFieldAccDescriptions();
resetErrorLabels();
//perform validation
var errors =[];
if (name_txt.text == '')
errors.push([name_txt, "You must enter your name", name_error_lbl]);
if (zipcode_txt.text == '')
errors.push([zipcode_txt, "You must enter your zip code", zipcode_error_lbl]);
else if (zipcode_txt.text.length != 5 || isNaN(zipcode_txt.text))
errors.push([zipcode_txt, "Zip code must be 5 digits", zipcode_error_lbl]);
//add validation error messages, if any
var field, errorMsg, errorLabel;
if (errors.length > 0) {
//loop over encountered errors
for (var i = 0; i < errors.length; i++) {
field = errors[i][0];
errorMsg = errors[i][1];
errorLabel = errors[i][2];
updateAccDescription(field, "Warning: " + errorMsg);
errorLabel.text = errorMsg;
}
} else {
Alert.show("Form field values were entered correctly");
}
Accessibility.updateProperties();
}
function updateAccName(obj, newName: String) {
if (! obj._accProps)
obj._accProps = new Object();
obj._accProps.name = newName;
}
function updateAccDescription(obj, newDescription: String) {
if (! obj._accProps)
obj._accProps = new Object();
obj._accProps.description = newDescription;
}
function getAccName(obj) {
return obj._accProps? obj._accProps.name: "";
}
function resetTextFieldAccNames() {
updateAccName(name_txt, "name, required");
updateAccName(zipcode_txt, "zip code, required");
}
function resetTextFieldAccDescriptions() {
updateAccDescription(name_txt, "");
updateAccDesciption(zipcode_txt, "");
}
function resetErrorLabels() {
name_error_lbl.text = "";
zipcode_error_lbl.text = "";
}Diese Vorgehensweise wird in der funktionierenden Version von „Validating a text field“ (Validierung eines Textfeldes) gezeigt. Die Quelle für „Validierung eines Textfeldes“ steht zur Verfügung.
Wenn ein Flash-Film interaktive Formulare bietet, die abgesendet werden können, bestätigen Sie, dass:
Die Validierungs-Warnungen visuell neben dem Steuerelement platziert werden.
Die Validierungs-Warnungen zum barrierefreien Namen oder der Beschreibung jedes Steuerelementes hinzugefügt werden.
#1 und #2 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.
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.
JAWS 8.0 oder höher kann so konfiguriert werden, dass die Sprache automatisch auf Basis des lang-Attributs geändert wird. Es wechselt allerdings nur zwischen den großen Sprachen wie durch den primären Code angegeben. Wenn eine regionale Sprachvariante mit einem Sprach-Subcode angegeben wird, benutzt JAWS die Standard-Variante, für die es konfiguriert ist.
Das Ziel dieser Technik ist es, die Standard-Sprache des Flash-Inhaltes zu kennzeichnen, indem die lang- und/oder xml:lang-Attribute in den html- oder Objekt-Elementen für die Seite, die das Flash enthält, zur Verfügung gestellt werden. Der eingebettete Flash-Inhalt wird die festgelegte Sprache erben. Wenn die gesamte Webseite die gleiche Sprache benutzt, dann kann das lang- und/oder xml:lang-Attribut im HTML-Element der Seite platziert werden, wie in H57: Benutzung der lang-Attribute beim html-Element beschrieben.
Da Flash die Sprache vom HTML- oder Objekt-Element erbt, wird erwartet, dass der gesamte Text innerhalb des Flash-Inhaltes in dieser geerbten Sprache ist. Dies bedeutet, dass es es möglich ist, ein Flash-Objekt in französischer Sprache zu haben auf einer Seite, die hauptsächlich in einer anderen Sprache ist, oder eine Seite mit mehreren Flash-Objekten zu haben, jedes in einer anderen Sprache. Es ist allerdings nicht möglich, Änderungen in der menschlichen Sprache des Inhalts innerhalb eines einzigen Flash-Objektes zu kennzeichnen, indem man diese Technik benutzt.
Dieses Beispiel hat den Inhalt der gesamten Webseite als in französischer Sprache definiert Der Flash-Inhalt wird die festgelegte Sprache aus dem HTML-Container erben.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1"
http-equiv="Content-Type"/>
<title>Flash Languages Examples - French</title>
<script src="swfobject.js" type="text/javascript"/>
<script type="text/javascript">
swfobject.registerObject("myMovie", "9.0.115", "expressInstall.swf");
</script>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
height="420" id="myMovie" width="780">
<param name="movie" value="myMovie.swf"/>
<!--[if !IE]>-->
<object data="languages.swf" height="420"
type="application/x-shockwave-flash" width="780">
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</body>
</html>Dieses Beispiel definiert den Inhalt eines Flash-Films als in französischer Sprache. Der Flash-Film wird eingebettet, indem man die SWFObject's static publishing-Methode benutzt. Dies bedeutet, dass es zwei verschachtelte Objekt-Elemente gibt, das Äußere, um Internet Explorer anzuvisieren und das Innere, um andere Browser anzupeilen. Aus diesem Grund müssen die lang- und xml:lang-Attribute zweimal hinzugefügt werden.
Code-Beispiel:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
height="420" id="myMovie" lang="fr" width="780" xml:lang="fr">
<param name="movie" value="myMovie.swf"/>
<!--[if !IE]>-->
<object data="languages.swf" height="420" lang="fr"
type="application/x-shockwave-flash" width="780" xml:lang="fr">
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie das html-Element und das object-Element des HTML-Dokumentes, das die Referenz zu dem SWF enthält.
Prüfen Sie, ob die menschliche Sprache des Flash-Inhalts die gleiche ist, wie die geerbte Sprache für das Objekt-Element wie in HTML 4.01, Inheritance of language codes, spezifiziert
Prüfen Sie, ob der Wert des lang-Attributs konform zu „BCP 47: Tags for the Identification of Languages or its successor“ ist und ob es die Hauptsprache, die vom Flash-Inhalt benutzt wird, widerspiegelt.
Prüfen Sie, ob innerhalb des Flash-Inhalts keine Änderungen der menschlichen Sprache auftreten
Für Erfolgskriterium 3.1.1: Die Tests 1-3 sind alle wahr.
Für Erfolgskriterium 3.1.2: Die Tests 1-4 sind alle 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.
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 Ziel dieser Technik ist es zu zeigen, wie man eine Geräte-Unabhängigkeit bietet, indem man äquivalente Event-Handler als Reaktion auf einen mouse- oder focus-Event bereitstellt. Die Unterstützung von sowohl Maus- als auch Tastatur-Events stellt sicher, dass Benutzer in der Lage sind, die gleichen Informationen wahrzunehmen, unabhängig davon, welches Eingabegerät sie benutzt haben. Wenn der Event den Zustand des Steuerelementes ändert, dann kann wichtig sein, den beschreibenden Namen des Steuerelementes in den Event-Handlern zu ändern.
In diesem Beispiel werden einer Gruppe an Schaltflächen die gleichen Event-Handler für das Event flash.events.FocusEvent.FOCUS_IN und für das Event flash.events.MouseEvent.MOUSE_OVER zugewiesen. Wenn eine Schaltfläche den Fokus erhält oder man mit einer Maus darüber schwebt, dann wird der Text, der die Schaltfläche beschreibt, aktualisiert.
Code-Beispiel:
import fl.accessibility.ButtonAccImpl;
import fl.controls.Button;
import flash.accessibility. *
import flash.events.FocusEvent;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
ButtonAccImpl.enableAccessibility();
var states: Object = {
"Alabama": "Alabama is a state located in the southeastern region of the \
United States of America.",
"California": "California is the most populous state in the United States",
"New York": "New York is a state in the Mid-Atlantic and Northeastern \
regions of the United States"
};
var buttons: Array =[];
var button: Button;
var accProps: AccessibilityProperties;
var count = 0;
for (var i in states) {
button = new Button();
button.label = i;
button.addEventListener(MouseEvent.CLICK, clickHandler);
button.addEventListener(MouseEvent.MOUSE_OVER, highlightHandler);
button.addEventListener(MouseEvent.MOUSE_OUT, unHighlightHandler);
button.addEventListener(FocusEvent.FOCUS_IN, highlightHandler);
button.addEventListener(FocusEvent.FOCUS_OUT, unHighlightHandler);
accProps = new AccessibilityProperties();
accProps.description = states[i];
button.accessibilityProperties = accProps;
addChild(button);
button.x = 30
button.y = 30 + count * 30;
buttons[i] = button;
count++;
}
function highlightHandler(e) {
descText.text = states[e.target.label];
}
function unHighlightHandler(e) {
descText.text = "";
}
function clickHandler(e) {
var url: URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" + e.target.label);
navigateToURL(url, "_self");
}Anmerkung: Um die Barrierefreiheit für Screenreader-Benutzer zu verbessern, wird der deskriptive Text auch an die Schaltflächen selber als barrierefreie Beschreibung angehängt. Beachten Sie außerdem, dass der Event MouseEvent.CLICK bei Schaltflächen-Komponenten sowohl bei Mausklicks als auch dann, wenn die Eingabetaste gedrückt wird, zündet.
Diese Technik wird in der funktionierenden Version von „Updating button text with multiple event handlers“ (Aktualisierung von Schaltflächen-Text mit multiplen Event-Handlern) veranschaulicht. Die Quelle von „Aktualisierung von Schaltflächen-Text mit multiplen Event-Handlern“ steht zur Verfügung.
Für alle gescripteten Event-Handler in einem Flash-Film,
Bestätigen Sie, dass Event-Handler sowohl für Maus- als auch für Tastatur-Events zugewiesen wurden
Das oben genannte ist 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.
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 Ziel dieser Technik ist es, die Lesereihenfolge und die Tab-Reihenfolge eines Flash-Films zu steuern, indem dessen Elementen tabIndex-Werte zugewiesen werden.
Die Tab-Reihenfolge ist die Reihenfolge, in der Objekte den Fokus erhalten, wenn Benutzer die Tabulator-Taste drücken. Die Tab-Reihenfolge enthält nicht zwangsläufig die gleichen Elemente wie die Lesereihenfolge, da die Lesereihenfolge auch Elemente enthalten kann, die nicht fokussierbar sind. Allerdings kann sowohl die Lesereihenfolge als auch die Tab-Reihenfolge gesteuert werden, indem man tabindex-Werte benutzt.
Flash-Player benutzt eine Standard-Tabindex-Reihenfolge von links nach rechts und von oben nach unten.
Um eine individuelle Lesereihenfolge zu erstellen, weisen Sie jeder Instanz auf der Bühne einen tabindex-Wert zu, entweder durch Action Script oder durch das Bedienfeld Eingabehilfen. Erstellen Sie einen tabindex-Wert für jedes barrierefreie Objekt, nicht nur für die fokussierbaren Objekte. Zum Beispiel muss dynamischer Text tabindex-Werte haben auch wenn der Benutzer nicht per Tab zu dynamischem Text gehen kann.
Sie können im Bedienfeld Eingabehilfen für die Tastaturnavigation einen individuellen Tab-Reihenfolgen-Index für die folgenden Objekte erstellen:
Dynamischer Text
Eingabe-Text
Schaltflächen
Movieclips einschließlich kompilierter Movieclips
Komponenten
Screens
Der Tabulatorfokus tritt in numerischer Reihenfolge auf, beginnend mit der niedrigsten Index-Zahl. Nachdem der Tabulatorfokus den höchsten Tabulatorindex erreicht, kehrt der Fokus zur niedrigsten Index-Zahl zurück. Wenn Sie Objekte mit Tabulatorindex, die benutzerdefiniert sind, in Ihrem Dokument oder in ein anderes Dokument bewegen, dann behält Flash die Index-Attribute bei. Prüfen und lösen Sie Index-Konflikte (zum Beispiel zwei verschiedene Objekte auf der Bühne mit der gleichen Tabulatorindex-Zahl). Wenn in irgendeinem Frame zwei oder mehr Objekte den gleichen Tabulatorindex haben, dann folgt Flash der Reihenfolge, in der die Objekte auf der Bühne platziert wurden.
Führen Sie die folgenden Schritte für jedes barrierefreie Objekt auf der Bühne aus, um einen tabindex-Wert hinzuzufügen, indem das Bedienfeld Eingabehilfen benutzt wird:
Wählen Sie das Element aus, indem sie darauf klicken.
Geben Sie im Bedienfeld Eingabehilfen einen numerischen Wert in das Feld „Tabulatorindex“ ein. Der Wert muss ein positiver Integer sein (bis zu 65535), der die Reihenfolge wiedergibt, in der die ausgewählten Objekte gelesen werden sollten. Elemente mit höheren Tabulatorindex-Werten werden nach Elementen mit niedrigeren Werten gelesen. Wenn in irgendeinem Frame zwei oder mehr Objekte den gleichen Tabulatorindex haben, dann folgt Flash der Reihenfolge, in der die Objekte auf der Bühne platziert wurden.
Um die aktuell definierte Tabulator-Reihenfolge zu visualisieren, wählen Sie Ansicht > Tabulatorreihenfolge anzeigen. Tabindex-Zahlen für individuelle Objekte erscheinen in der oberen linken Ecke des Objektes.
Anmerkung: Sie können auch ActionScript-Code benutzen, um einen Tabulator-Reihenfolgen-Index für die Tastatur-Navigation zu erstellen.
Diese Schritte werden in den unten stehenden Bildschirmfotos veranschaulicht
Anmerkung: Flash-Player erfordert es nicht länger, dass Sie alle Objekte einer FLA-Datei zu einer Liste mit Tabulator-Index-Werten hinzufügen. Auch wenn sie keinen Tabulator-Index für alle Objekte festlegen, liest ein Screenreader jedes Objekt korrekt.
Dieses Beispiel enthält dynamische TextField-Instanzen, die in Spalten gruppiert sind. Um sicherzustellen, dass die Lesereihenfolge der Spalten-Struktur folgt: Die TextField-Instanzen bekommen einen tabindex-Wert, der ihrem wörtlichen Inhalt entspricht (zum Beispiel hat das TextField, das den Text „Sample Text 3“ (Beispieltext 3) enthält, einen tabindex-Wert von 3. Darüber hinaus wird ein einzelnen TextField hinzugefügt, für das kein tabindex-Wert gesetzt wird. Dieses Feld enthält den Text „Not in tab order“ (Nicht in der Tabulator-Reihenfolge). Obwohl das Feld visuell zwischen den Beispieltexten 2 und 3 platziert wurde, wird es am Ende der individuell festgelegten Tabulator-Reihenfolge platziert, da ihm kein tabindex-Wert zugewiesen wurde.
Die Ergebnisse finden Sie in der funktionierenden Version von „Using tabindex to navigate a column structure“ (Benutzung von tabindex, um in einer Spalten-Struktur zu navigieren). Die Quelle von „Benutzung von tabindex, um in einer Spalten-Struktur zu navigieren“ steht zur Verfügung.
Dieses Beispiel enthält ein flash-basiertes Formular, das über zwei Spalten gestaltet wurde. Damit die Tabulator-Reihenfolge der Spaltenstruktur folgt, wird jedem Formular-Steuerelement ein tabindex-Wert im Bedienfeld Eingabehilfen zugewiesen.
Die Ergebnisse werden in der funktionierenden Version von „Controlling tab order in a two-column layout“ (Steuerung der Tabulator-Reihenfolge in einem zweispaltigen Layout) gezeigt. Die Quelle von „Steuerung der Tabulator-Reihenfolge in einem zweispaltigen Layout“ steht zur Verfügung.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Benutzen Sie einen Screenreader, um durch den Flash-Film zu navigieren, Element für Element.
Prüfen Sie, ob die Reihenfolge, in der der Screenreader den Inhalt ansagt, der logischen, visuellen Reihenfolge entspricht.
Wenn der Fokus innerhalb des Flash-Films platziert wurde, drücken Sie wiederholt die Tabulator-Taste, um dessen Inhalt per Tastatur durchzugehen.
Verifizieren Sie, dass alle interaktiven und fokussierbaren Elemente per Tastatur erreicht werden können, und zwar in einer logischen Reihenfolge.
Tests #2 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.
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 Ziel dieser Technik ist es zu zeigen, wie man eine Scripting-Funktion auf eine Art aufruft, die per Tastatur zugänglich ist, indem man diese an eine per Tastatur zugängliche Standard-Flash-Komponente anhängt, die vom Adobe Flash Professional-Autorenwerkzeug bereitgestellt wird. Um sicherzustellen, dass Script-Funktionen (scripted actions) von der Tastatur aus aufgerufen werden können, werden sie mit Standard-Flash-Komponenten, wie beispielsweise der Schaltflächen-Komponente, verknüpft. Der click-Event dieser Komponenten ist geräte-unabhängig. Obwohl der „CLICK“-Event ein Maus-Event ist, wird er tatsächlich in eine Standard-Aktion einer Schaltfläche übersetzt. Die Standard-Aktion passiert, wenn der Benutzer das Element mit einer Maus anklickt, sie passiert aber ebenfalls, wenn der Benutzer das Element fokussiert und die Leertaste drückt und wenn das Element über das Barrierefreiheits-API ausgelöst wird.
Dieses Beispiel zeigt eine Schaltfläche, die den MouseEvent.CLICK-Event benutzt, um dessen Label zu ändern. Dieser Event wird sowohl bei Mausklick als auch dann, wenn die Leertaste gedrückt wird, ausgelöst
Code-Beispiel:
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
var testBtn = new Button();
testBtn.label = "click me";
testBtn.addEventListener(MouseEvent.CLICK, clickHandler, false);
addChild(testBtn);
testBtn.x = testBtn.y = 10;
function clickHandler(e) {
e.target.label = "Thanks";
}Diese Vorgehensweise wird in der funktionierenden Version von „Click event on a button“ (Click-Event auf einer Schaltfläche) demonstriert. Die Quelle für „Click-Event auf einer Schaltfläche“ steht zur Verfügung.
Wenn ein Flash-Film interaktive Steuerelemente enthält, bestätigen Sie, dass:
Standard-Flash-Komponenten für die Steuerelemente benutzt werden
Die Steuerelemente benutzen den „click“-Event
#1 und #2 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.
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.
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.
Der Zweck dieser Technik ist es, einem Benutzer zu erlauben, Geräusche abzuschalten, die automatisch, wenn ein Flash-Film geladen wird, abgespielt werden. Das Steuerelement zum Abschalten des Tons sollte nahe des Beginns der Seite sein, damit das Steuerelement einfach und schnell von den Benutzern entdeckt werden kann. Das ist nützlich für all jene, die assistierende Techniken einsetzen (wie z.B. Screenreader, Vergrößerungssoftware, Schaltermechanismen usw.) und für diejenigen, die dies nicht tun (wie z.B. diejenigen mit kognitiven, Lern- und Sprachbehinderungen).
In dieser Technik fügt der Autor ein Steuerelement hinzu, das es Benutzern ermöglicht, alle Geräusche, die automatisch abgespielt werden, abzuschalten. Für maximale Barrierefreiheit kann das Steuerelement zum HTML-Dokument statt zum Flash-Film hinzugefügt werden. Das HTML-Steuerelement kommuniziert mit dem Flash-Film durch die ExternalInterface-Klasse. Dies bedeutet, dass der Benutzer die Tonwiedergabe steuern kann, ohne mit Flash-Inhalten interagieren zu müssen. Wenn dies nicht zweckmäßig ist, kann das Steuerelement im Flash-Inhalt bereitgestellt werden, vorausgesetzt das Steuerelement ist per Tastatur bedienbar, ist früh in der Tabulator- und Lese-Reihenfolge platziert und ist eindeutig beschriftet um anzuzeigen, dass es den Ton, der gerade wiedergegeben wird, abschalten wird.
Dieses Beispiel zeigt das Hinzufügen einer Schaltfläche innerhalb des Flash-Films, um es dem Benutzer zu erlauben, die Tonwiedergabe anzuhalten. Es wird eine Klasse, genannt SoundHandler, erstellt, die automatisch beginnt, eine mp3-Datei abzuspielen, wenn der Film lädt.
Code-Beispiel:
package wcagSamples {
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.media.Sound;
import flash.media.SoundChannel;
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
import flash.events.MouseEvent;
public class SoundHandler extends Sprite {
private var snd: Sound = new Sound();
private var button: Button = new Button();
private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast\
/csbu_dev_podcast_epi_2.mp3");
private var channel: SoundChannel = new SoundChannel();
public function SoundHandler() {
ButtonAccImpl.enableAccessibility();
button.label = "Stop Sound";
button.x = 10;
button.y = 10;
button.addEventListener(MouseEvent.CLICK, clickHandler);
this.addChild(button);
snd.load(req);
channel = snd.play();
}
private function clickHandler(e: MouseEvent): void {
if (button.label == "Stop Sound") {
button.label = "Start Sound";
channel.stop();
} else {
channel = snd.play();
button.label = "Stop Sound";
}
}
}
}Es wird eine Klasse, genannt SoundHandler, erstellt, die automatisch beginnt, eine mp3-Datei abzuspielen, wenn der Film lädt. Im HTML-Dokument, das den Flash-Film enthält, wird eine HTML-Schaltfläche platziert. Wenn die Schaltfläche angeklickt wird, dann wird die Aktion zwischen der HTML-Seite und dem Flash-Film via Flash Player JavaScript API kommuniziert, was dazu führt, dass die toggleSound-Methode auf der SoundHandler-Klasse aufgerufen wird.
Code-Beispiel:
package wcagSamples {
import flash.display.Sprite;
import flash.external.ExternalInterface;
import flash.net.URLRequest;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.events.MouseEvent;
public class SoundHandler extends Sprite {
private var snd: Sound = new Sound();
private var soundOn: Boolean = true;
private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast/\
csbu_dev_podcast_epi_2.mp3");
private var channel: SoundChannel = new SoundChannel();
public function SoundHandler() {
if (ExternalInterface.available)
ExternalInterface.addCallback("toggleSound", this.toggleSound);
snd.load(req);
channel = snd.play();
}
private function toggleSound(enable: Boolean): void {
if (! enable) {
channel.stop();
soundOn = true;
} else {
channel = snd.play();
soundOn = true
}
}
}
}Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Flash Sound Toggle example</title>
<script src="swfobject.js" type="text/javascript"/>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
swfobject.embedSWF("html_control_to_toggle_audio_as3.swf",
"flashPlaceHolder", "0", "0", "8");
function init() {
var soundOn = true;
$("soundToggle").onclick = function(event){
soundOn = !soundOn;
$("flashPlaceHolder").toggleSound(soundOn);
event.target.value = soundOn ? "Stop Sound" : "Start Sound";
};
}
window.onload = init;
</script>
</head>
<body id="header">
<h1>Flash Automatic Sound Demo</h1>
<p>This page contains a Flash movie that automatically starts
playing sound. Use the button below to stop or start the
sound</p>
<input id="soundToggle" type="button" value="Stop Sound"/>
<p id="flashPlaceHolder">Flash needs to be installed for this
example to work</p>
</body>
</html>Dies wird in dem funktionierenden Beispiel für „Providing a button in the HTML before the Flash object to stop sound“ (Bereitstellung einer Schaltfläche im HTML vor dem Flash-Objekt, um die Tonwiedergabe zu stoppen). Das funktionierende Beispiel für „Bereitstellung einer Schaltfläche im HTML vor dem Flash-Objekt, um die Tonwiedergabe zu stoppen“ steht zur Verfügung.
Bei Flash-Filmen, die Ton automatisch nach dem Laden wiedergeben:
Bestätigen Sie, dass ein barrierefreies HTML-Steuerelement am Beginn der Tabulator-Reihenfolge des Dokumentes platziert wurde
Wenn es kein HTML-basiertes Steuerelement gibt, dann bestätigen Sie, dass ein barrierefreies Steuerelement zu Beginn der Tabulator-Reihenfolge des Flash-Films platziert wurde.
Aktivieren die das HTML- oder Flash-basierte Steuerelement
Verifizieren Sie, dass die Tonwiedergabe stoppt
Test #1 oder #2 ist wahr und #4 ist 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.
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 Ziel dieser Technik ist es, Benutzer zu benachrichtigen, dass die Zeit zur Fertigstellung einer Interaktion fast abgelaufen ist. Wenn Scripte Funktionalitäten, die zeitliche Begrenzungen haben, bereitstellen, kann das Script eine Funktionalität enthalten, um den Benutzer vor den unmittelbar bevorstehenden zeitlichen Begrenzungen zu warnen und um einen Mechanismus bereitzustellen, mehr Zeit zu erbitten. 20 Sekunden oder mehr, bevor die zeitliche Begrenzung auftritt, stellt das Script einen Bestätigungsdialog zur Verfügung, der besagt, dass eine zeitliche Begrenzung unmittelbar bevorsteht und fragt, ob der Benutzer mehr Zeit benötigt. Wenn der Benutzer mit „Ja“ antwortet wird die zeitliche Begrenzung zurückgesetzt. Wenn der Benutzer mit „Nein“ antwortet oder gar nicht reagiert, darf die zeitliche Begrenzung ablaufen.
Diese Technik umfasst zeitliche Begrenzungen, die über die setTimeout()-Methode festgelegt wurden. Wenn zum Beispiel die zeitliche Begrenzung bei 60 Sekunden liegen soll, dann können Sie die zeitliche Begrenzung auf 40 Sekunden festlegen (20 Sekunden weniger als die gewünschte zeitliche Begrenzung) und einen Bestätigungsdialog anzeigen. Der Bestätigungsdialog legt eine neue zeitliche Begrenzung für die verbleibenden 20 Sekunden fest. Wenn der Benutzer um mehr Zeit bittet, wird eine neue zeitliche Begrenzung festgelegt. Wenn allerdings die zeitliche Begrenzung der 20-Sekunden-„Schonfrist“ abläuft (was bedeutet, dass nun 60 Sekunden vergangen sind), dann werden die Schritte, die dem Ablauf der 60 Sekunden dauernden zeitlichen Begrenzung in der ursprünglichen Planung entsprechen, eingeleitet.
Dies ist ein einfaches AS2-Beispiel einer zeitlichen Begrenzung, die vom Benutzer verlängert werden kann. Nach 40 Sekunden Inaktivität wird ein Warnhinweis angezeigt, der davor warnt, dass sie Sitzung gleich abläuft. Der Benutzer hat 20 Sekunden Zeit, um die Leertaste zu drücken oder auf die „Ja“-Schaltfläche zu klicken. Beachten Sie, dass eine Dauer von 40 Sekunden für die meisten Aufgaben nicht ausreichen würde und für eine einfachere Demonstration künstlich kurz gehalten wurde.
Code-Beispiel:
import mx.controls.Alert;
import flash.accessibility.Accessibility;
mx.accessibility.AlertAccImpl.enableAccessibility();
var sessionTimeout;
var sessionNotificationTimeout;
var timeLimit: Number = 60000;
var sessionAlert: Alert;
resetTimeout();
testField.addEventListener("change", resetTimeout);
function resetTimeout() {
clearTimeout(sessionTimeout);
clearTimeout(sessionNotificationTimeout);
sessionTimeout = setTimeout(endSession, timeLimit);
sessionNotificationTimeout = setTimeout(showTimeoutAlert, timeLimit - 20000);
}
function showTimeoutAlert() {
sessionAlert = Alert.show("Click the YES button to extend your session",
"Your login session is about to expire, do you need more time?",
Alert.YES | Alert.NO, null, handleAlertClick);
}
function endSession() {
sessionAlert.deletePopUp();
Alert.show("please log in again",
"Your session has expired");
}
function handleAlertClick(e) {
if (e && e.detail && e.detail == Alert.YES)
resetTimeout();
}Für eine Demonstration sehen Sie sich das funktionierende Beispiel für „Using ActionScript to offer a time limit extension before the timeout expires“ (Benutzung von ActionScript, um eine Verlängerung der zeitlichen Begrenzung anzubieten, bevor die zeitliche Begrenzung abläuft) an. Die Quelle für „Benutzung von ActionScript, um eine Verlängerung der zeitlichen Begrenzung anzubieten, bevor die zeitliche Begrenzung abläuft“ steht zur Verfügung.
Laden Sie die Seite und stellen Sie einen Kurzzeitmesser auf 20 Sekunden weniger als die zeitliche Begrenzung.
Wenn der Kurzzeitmesser abläuft prüfen Sie, ob ein Bestätigungsdialog angezeigt wird, der vor der bevorstehenden zeitlichen Begrenzung warnt und der es dem Benutzer ermöglicht, die zeitliche Begrenzung innerhalb von 20 Sekunden zu verlängern.
Test #2 ist 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.
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.
Der Zweck dieser Technik ist es, dem Autor zu erlauben, ActionScript und Komponenten-Skins zu benutzen, um eine deutliche visuelle Kennzeichnung zu verwenden, wenn eine Komponente des Fokus erhält. In dieser besonderen Technik ändern sich sowohl die Hintergrundfarbe als auch der Rahmen der Komponente. Wenn die Komponente den Fokus verliert, erhält sie wieder ihre normale Formatierung zurück.
Die visuellen Hervorhebungen werden angewendet, indem einige der Skin-Teile der Komponente getauscht werden. Standard-Flash-Komponenten haben alle ihren eigenen Satz an Skins, welche die visuelle Erscheinung der Komponente ausmachen. Jeder Teil wird durch einen MovieClip repräsentiert, der bearbeitet oder ersetzt werden kann, um individuell anzupassen, wie die Komponente aussieht. Die relevanteste Skin für diese Technik ist die focusRectSkin-Skin, die von allen Komponenten geteilt wird. Standardmäßig verwendet diese Skin ein dezente visuelle Hervorhebung, wenn die Komponente den Fokus erhält.
Diese Technik kann durch die folgenden Schritte angewendet werden:
Erstellen Sie eine individuelle Version von focusRectSkin.
Benutzen Sie Scripting, um die Komponente mit der individuellen Skin zu verknüpfen.
Es gibt zwei Möglichkeiten, um eine Skin individuell anzupassen:
Duplizierung einer bestehenden Skin
Mit dieser Vorgehensweise erstellen Sie eine Kopie der bestehenden focusRect-Skin zur Veränderung. Sie müssen die Skin für jede einzelne Komponenten-Instanz manuell anwenden (wie in Schritt 5 unten gezeigt wird).
Ziehen Sie die Komponenten, die Sie formatieren möchten, auf die Bühne. Damit wird sichergestellt, dass die passenden, auf die Komponente bezogenen Skins zu der Bibliothek des Film hinzugefügt werden.
Öffnen Sie das Bedienfeld Bibliothek und navigieren Sie zu dem Ordner „Component Assets > Shared“.
Klicken Sie mit der rechten Maustaste (oder Ctrl-click auf einem Mac) auf den focusRectSkin MovieClip und wählen Sie „Duplizieren“ aus dem Kontext-Menü.
Bearbeiten Sie den visuellen Rahmen im MovieClip der Skin. Zum Beispiel kann das Fokus-Rechteck breiter gemacht werden, damit es mehr hervorsticht (dieser Schritt wird im Bildschirmfoto unterhalb dieser Liste veranschaulicht).
Verknüpfen Sie Formular-Komponenten-Instanzen mit ihrer individuell angepassten Version der focusRectSkin, indem Sie ActionScript benutzen. Dies können Sie erreichen, indem Sie die setStyle-Methode verwenden.
Veränderung einer bestehenden Skin
Mit dieser Vorgehensweise wird die ursprüngliche focusRect-Skin verändert. Dies bedeutet, dass die Änderungen, die Sie vornehmen, auf jede visuelle Fokus-Kennzeichnung jeder_fokussierbaren Komponente angewendet wird.
Ziehen Sie die Komponenten, die Sie formatieren möchten, auf die Bühne. Damit wird sichergestellt, dass die passenden, auf die Komponente bezogenen Skins zu der Bibliothek des Film hinzugefügt werden.
Öffnen Sie das Bedienfeld Bibliothek und navigieren Sie zu dem Ordner „Component Assets > Shared“.
Öffnen Sie den focusRectSkin-MovieClip zur Bearbeitung, indem Sie ihn doppel-klicken.
Bearbeiten Sie den visuellen Rahmen im MovieClip der Skin. Zum Beispiel kann das Fokus-Rechteck breiter gemacht werden, damit es mehr hervorsticht.
Anmerkung: Mit dieser Vorgehensweise überschreiben Sie die bestehende Skin. Wenn Sie dies nicht möchten, folgen Sie stattdessen der Vorgehensweise "Duplizierung einer bestehenden Skin" approach instead.
Die focusRect-Skin gilt für alle fokussierbaren Flash-Komponenten. Wenn Sie andere Hervorhebungen ändern möchten (zum Beispiel Hervorhebungen, die auftreten, man mit der Maus über eine Komponente schwebt), müssen Sie die komponenten-spezifischen Skins einzeln bearbeiten. Um zum Beispiel die mouseover-Hervorhebung für die Kontrollkästchen-Komponente zu bearbeiten, müssen Sie sowohl Checkbox_overIcon als auch Checkbox_selectedOverIcon ändern oder duplizieren. Gleichermaßen müssen Sie für die Schaltflächen-Komponente die Button_over-Skin bearbeiten.
Denken Sie außerdem daran, dass bestehenden Skins automatisch auf bestimmte Events angewendet werden (Focus, mouseover usw.). Es ist allerdings auch möglich, eine Skin zu einem beliebigen, von Ihnen ausgewählten Zeitpunkt manuell zu ändern (z.B. um ungültigen Inhalt für ein Textfeld zu kennzeichnen). Dies kann man auch erreichen, indem man setStyle-Methode aufruft.
Der unten stehende Code zeigt ein Beispiel, in dem Formular-Komponeten-Instanzen mit einer veränderten Version des focusRectSkin-MovieClip verknüpft wurden. Das Ergebnis ist, dass die Komponenten einen breiten blauen Rand bekommen anstelle des standardmäßig dünnen Rahmens, den Flash bereitstellt. Der Code verweist auf eine veränderte Skin, genannt Focus_custom, die vorab zur Bibliothek des Films hinzugefügt wurde.
Beachten Sie, dass die individuelle Version von focusRectSkin auch einen transparenten gelben Hintergrund festlegt, um die visuelle Hervorhebung weiter verbessern. Komponenten wie Schaltflächen und Kontrollkästchen zeigen diesen Hintergrund an, nicht aber TextInput-Komponenten. Um sicherzustellen, dass der gelbe Hintergrund auch auf die TextInput-Instanz angewendet wird, muss man die folgende Notlösung anwenden:
Eine duplizierte Version der TextInput „normal“ Skin (die man in der Bibliothek unter „Component Asssets > TextInputSkins > TextInput_upSkin“ findet) wird erstellt und bearbeitet, damit diese einen gelben Hintergrund anzeigt.
FocusIn-, FocusOut-, MouseOver- und MouseOut-Handler werden der TextInput-Instanz zugewiesen, die vorübergehend die standardmäßige „normale“ Skin mit der individuell angepassten „normalen“ Skin tauschen, während die Komponente des Fokus hat oder während man über ihr schwebt.
Zusätzlich wird die button_over Skin dupliziert und verändert, um die Standard-mouseover-Hervorhebungen für die Schaltflächen-Komponenten-Instanz zu ändern. Die Skins checkbox_overIcon und checkbox_selectedOverIcon werden direkt verändert, was bedeutet, dass diese Änderungen auf alle Kontrollkästchen-Instanzen angewendet werden.
Das Ergebnis dieser Technik finden Sie in der funktionierenden Version von „A thick blue border to indicate focus“ (Ein breiter blauer Rand, um den Fokus anzuzeigen).
Code-Beispiel:
package wcagSamples {
import fl.accessibility.ButtonAccImpl;
import fl.accessibility.CheckBoxAccImpl;
import fl.controls.CheckBox;
import fl.controls.Button;
import fl.controls.Label;
import fl.controls.TextInput;
import flash.display.Sprite;
import flash.events.FocusEvent;
import flash.events.MouseEvent;
public class FocusStyler extends Sprite {
public function FocusStyler() {
ButtonAccImpl.enableAccessibility()
CheckBoxAccImpl.enableAccessibility()
var lbl1: Label = new Label();
lbl1.text = "name";
lbl1.x = lbl1.y = 20;
addChild(lbl1);
var txt1: TextInput = new TextInput();
txt1.x = 60;
txt1.y = 20;
txt1.width = 200;
txt1.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
txt1.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
txt1.addEventListener(MouseEvent.MOUSE_OVER, handleFocusIn);
txt1.addEventListener(MouseEvent.MOUSE_OUT, handleFocusOut);
txt1.setStyle("focusRectSkin", "focus_custom");
addChild(txt1);
var chk1: CheckBox = new CheckBox();
chk1.label = "Check Me";
chk1.x = 60;
chk1.y = 70;
chk1.setStyle("focusRectSkin", "focus_custom");
addChild(chk1);
var btn1: Button = new Button();
btn1.label = "Click Me";
btn1.x = 60;
btn1.y = 110;
btn1.setStyle("focusRectSkin", "focus_custom");
btn1.setStyle("overSkin", "Button_over_custom");
addChild(btn1);
}
private function handleFocusIn(event) {
event.currentTarget.setStyle("upSkin", "TextInput_upSkin_custom");
}
private function handleFocusOut(event) {
event.currentTarget.setStyle("upSkin", "TextInput_upSkin");
}
}
}Dies wird in der funktionierenden Version von „A thick blue border to indicate focus“ (Ein breiter blauer Rand, um den Fokus anzuzeigen) veranschaulicht. Die funktionierende Version von „Ein breiter blauer Rand, um den Fokus anzuzeigen“ steht zur Verfügung.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Wenn ein Flash-Film fokussierbare Komponenten enthält, bestätigen Sie, dass:
Die visuelle Hervorhebung angewendet wird, indem die Skin der Komponente verändert wird
Eine visuelle Hervorhebung angezeigt wird, wenn die Komponenten den Fokus erhalten
#1 und #2 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.
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.
Die Absicht dieser Technik ist es sicherzustellen, dass dass Informationen und Beziehungen, die visuell durch Datentabellen impliziert werden, auch durch Software zur Verfügung gestellt werden. Im Besonderen muss die Verknüpfung zwischen den Spaltenüberschriften der Tabelle und ihren zugehörigen Zellen assistierenden Techniken gezeigt werden. In Flash kann man die DataGrid-Komponente benutzen, um dies zu erreichen. Wenn die Barrierefreiheit für die DataGrid-Komponente aktiviert wird, stellt Flash jedem Zellen-Wert automatisch den Spalten-Namen voran, wenn assistierenden Techniken der barrierefreie Name der Zeile des Grids gezeigt wird. Im Bildschirmfoto unten würde zum Beispiel die Zeile von einem Screenreader als „Zeile 6 von 13 Name Patty Crawford Bats L Throws L Year Jr Home Whittier, CA“ vorgelesen.
Anmerkung: Die DataGrid-Komponente in Flash unterstützt nur Spalten-Überschriften und keine Zeilen-Überschriften.
In diesem Beispiel werden statistische Daten als Datenlieferant für eine dynamisch erstellte DataGrid-Komponente benutzt. Die Zeilen import fl.accessibility.DataGridAccImpl; DataGridAccImpl.enableAccessibility(); sind erforderlich, um die Barrierefreiheit für die Datagrid-Komponente zu aktivieren.
Code-Beispiel:
import fl.accessibility.DataGridAccImpl;
DataGridAccImpl.enableAccessibility();
import fl.data.DataProvider;
bldRosterGrid(aDg);
var aRoster: Array = new Array();
aRoster = [ {
Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"}, {
Name: "Sue Pennypacker", Bats: "L", Throws: "R", Year: "Fr", Home: "Athens, GA"}, {
Name: "Jill Smithfield", Bats: "R", Throws: "L", Year: "Sr", Home: "Spokane, WA"}, {
Name: "Shirley Goth", Bats: "R", Throws: "R", Year: "Sr", Home: "Carson, NV"}, {
Name: "Jennifer Dunbar", Bats: "R", Throws: "R", Year: "Fr", Home: "Seaside, CA"}, {
Name: "Patty Crawford", Bats: "L", Throws: "L", Year: "Jr", Home: "Whittier, CA"}, {
Name: "Angelina Davis", Bats: "R", Throws: "R", Year: "So", Home: "Odessa, TX"}, {
Name: "Maria Santiago", Bats: "L", Throws: "L", Year: "Sr", Home: "Tacoma, WA"}, {
Name: "Debbie Ferguson", Bats: "R", Throws: "R", Year: "Jr", Home: "Bend, OR"}, {
Name: "Karen Bronson", Bats: "R", Throws: "R", Year: "Sr", Home: "Billings, MO"}, {
Name: "Sylvia Munson", Bats: "R", Throws: "R", Year: "Jr", Home: "Pasadena, CA"}, {
Name: "Carla Gomez", Bats: "R", Throws: "L", Year: "Sr", Home: "Corona, CA"}, {
Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"}
];
aDg.dataProvider = new DataProvider(aRoster);
aDg.rowCount = aDg.length;
function bldRosterGrid(dg: DataGrid) {
dg.setSize(400, 300);
dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
dg.columns[0].width = 120;
dg.columns[1].width = 50;
dg.columns[2].width = 50;
dg.columns[3].width = 40;
dg.columns[4].width = 120;
dg.move(50, 50);
};Dies wird in der funktionierenden Version von „A statistical data table“ (Eine statistische Datentabelle) veranschaulicht. Die Quelle für „Eine statistische Datentabelle“ steht zur Verfügung.
Bei Flash-Inhalt, der tabellarische Daten enthält:
Öffnen Sie die SWF-Datei in Internet Explorer 6 oder höher (benutzen Sie Flash Player 6 oder höher) oder in Firefox 3 oder höher (benutzen Sie Flash Player 9 oder höher)
Benutzen Sie zum Öffnen des Flash-Films ein Werkzeug, das in der Lage ist, den barrierefreien Namen eines Objektes zu zeigen, wie zum Beispiel aDesigner2.
Untersuchen Sie im Bedienfeld GUI summary den barrierefreien Namen für die datagrid-Reihen und -Zellen um sicherzustellen, dass die Überschriften-Daten zusammen mit den Daten der Datenzellen präsentiert werden.
Autoren können ebenfalls mit einem Screenreader testen, indem sie sich den Flash-Inhalt vorlesen lassen und darauf hören, ob die Überschriften und die Daten der Datenzellen gelesen werden, wenn das datagrid gelesen wird.
Autoren können außerdem im Flash-Autorenwerkzeug verifizieren, ob die DataGrid-Komponente benutzt wird, um die Daten zu strukturieren und ob das DataGrid barrierefrei gemacht wurde, indem die DataGridAccImpl.enableAccessibility-Methode benutzt wurde.
Test 3, 4 oder 5 ist 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.
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 Ziel dieser Technik ist es zu zeigen, wie man den Zugriff per Tastatur auf einen Flash-MovieClip, auf den man nicht standardmäßig per Tastatur zugreifen kann, zur Verfügung stellen kann. Diese Technik stellt sicher, dass das Element fokussierbar ist, indem das tabenabled-Property gesetzt wird und sie stellt sicher, dass die Aktion von der Tastatur aus ausgelöst werden, indem zusätzlich zum Click-Handler ein Keydown-Handler bereitgestellt wird.
In diesem Beispiel wird ein individueller erstellter MovieClip als Schaltfläche benutzt. Damit man darauf per Tastatur zugreifen kann, wird der MovieClip in der Tabulator-Reihenfolge platziert, indem man tabEnabled benutzt. Zusätzlich werden redundante Event-Handler hinzugefügt, so dass die individuell erstellte Schaltfläche sowohl auf einen Mausklick als auch auf das Drücken der Leertaste reagiert. Schließlich erhält die Schaltfläche einen barrierefreien Namen, indem das AccessibilityProperties-Objekt des MovieClips benutzt wird. Damit wird das Label der Schaltfläche für assistierende Techniken wahrnehmbar gemacht.
Das Ergebnis kann man in der funktionierenden Version von „MovieClip used as a button“ (MovieClip, der als Schaltfläche benutzt wird) ansehen. Die Quelle von „MovieClip, der als Schaltfläche benutzt wird“ steht zur Verfügung.
Anmerkung: Die Benutzung eines generischen MovieClips wird im Allgemeinen nicht empfohlen, da die individuell erstellte Schaltfläche als fokussierbare Grafik wahrgenommen wird statt als Schaltfläche. Stattdessen wäre es eine bessere Vorgehensweise, die Standard-Flash-Schaltflächen-Komponente zu benutzen oder ein neues Symbol vom Typ „Schaltfläche“ zu erstellen.
Code-Beispiel:
import flash.accessibility. *
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
testMC.tabEnabled = true;
updateAccName(testMC);
testMC.addEventListener(MouseEvent.CLICK, clickHandler, false);
testMC.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
updateAccName(testMC);
function clickHandler(e) {
testMC.labelText.text = "THANKS";
updateAccName(testMC);
}
function keyDownHandler(e) {
if (e.keyCode == 32)
clickHandler(e);
}
function updateAccName(mc: MovieClip) {
if (! mc.accessibilityProperties)
mc.accessibilityProperties = new AccessibilityProperties();
mc.accessibilityProperties.name = mc.labelText.text;
Accessibility.updateProperties();
}Wenn ein Flash-Film generische MovieClip-Instanzen enthält, die als interaktive Steuerelemente benutzt werden, bestätigen Sie, dass:
Das tabEnabled-Property der MovieClip-Instanz auf wahr gesetzt wurde
Die MovieClip-Instanz Event-Handler sowohl für Maus- als auch für Tastatur-Events hat
#1 und #2 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.
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 Ziel dieser Technik ist es, einen kurzen Überblick darüber zu geben, wie Daten in einem DataGrid strukturiert wurden oder eine kurze Erklärung zu geben, wie man in dem Grid navigiert.
Da Flash kein summary-Attribut anbietet, wird dieser deskriptive Text stattdessen zu der barrierefreien Beschreibung des DataGrid hinzugefügt. Diese Vorgehensweise stellt die zusammenfassenden Informationen (summary information) den Menschen zur Verfügung, die Screenreader benutzen; die Informationen werden visuell nicht angezeigt.
Die Zusammenfassung ist nützlich, wenn die Tabelle eine komplexe Struktur hat (wenn es zum Beispiel verschiedene Sets an Zeilen- oder Spaltenüberschriften oder mehrfache Gruppen an Spalten oder Reihen gibt). Die Zusammenfassung kann ebenfalls bei einfachen Datentabellen, die viele Spalten oder Reihen an Daten enthalten, hilfreich sein.
Dies ist ein Beispiel eines Datagrid, das aus dem Komponenten-Bedienfeld zur Bühne in Flash Professional hinzugefügt wird. Das Feld Beschreibung wird in Flash im Bedienfeld Eingabehilfen dazu benutzt, als Zusammenfassung (summary information) für das Datagrid zu dienen.
Erstellen Sie eine neue Flash-Datei (.fla) oder öffnen Sie eine bestehende, um ein Datagrid hinzuzufügen.
Öffnen Sie das Fenster Flash-Komponenten aus dem Menü Fenster
Ziehen Sie die Datagrid-Komponente auf die Bühne und positionieren Sie diese wie gewünscht.
Wählen Sie die Datagrid-Komponente aus und fügen Sie die Zusammenfassung (summary information) zum Feld Beschreibung für Datagrid hinzu, indem Sie das Bedienfeld Eingabehilfen benutzen.
Dies ist ein einfaches AS3-Beispiel einer DataGrid-Komponente, bei der ein zusammenfassender Text zu deren barrierefreien Beschreibung hinzugefügt wurde.
Code-Beispiel:
import fl.accessibility.DataGridAccImpl;
import fl.controls.DataGrid;
import fl.controls.Label;
import fl.data.DataProvider;
import flash.accessibility.Accessibility;
import flash.accessibility.AccessibilityProperties;
import flash.system.Capabilities;
DataGridAccImpl.enableAccessibility();
createGrid();
//set the summary text as accessible description
var accProps: AccessibilityProperties = new AccessibilityProperties();
accProps.description = "The first column shows the player's name," +
"the second and third column shows the player's gaming statistics." +
"the fourth column shows the player's year as FR (Freshman), JR (junior) or SO (Sophomore)." +
"The fifth column shows the player's home city and state";
aDg.accessibilityProperties = accProps;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
function createGrid() {
//create and add the components
var aDg: DataGrid = new DataGrid();
addChild(aDg);
aDg.move(50, 50);
bldRosterGrid(aDg);
var aRoster: Array = new Array();
aRoster =[ {
Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"
}, {
Name: "Sue Pennypacker", Bats: "L", Throws: "R", Year: "Fr", Home: "Athens, GA"
}, {
Name: "Jill Smithfield", Bats: "R", Throws: "L", Year: "Sr", Home: "Spokane, WA"
}, {
Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"
},];
aDg.dataProvider = new DataProvider(aRoster);
aDg.rowCount = aDg.length;
}
function bldRosterGrid(dg: DataGrid) {
dg.setSize(400, 300);
dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
dg.columns[0].width = 120;
dg.columns[1].width = 50;
dg.columns[2].width = 50;
dg.columns[3].width = 40;
dg.columns[4].width = 120;
};Für eine Demonstration sehen Sie sich die funktionierende Version von „Adding a summary to a datagrid with ActionScript 3“ (Hinzufügen einer Zusammenfassung zu einem Datagrid mit ActionScript 3) an. Die Quelle von „Hinzufügen einer Zusammenfassung zu einem Datagrid mit ActionScript 3“ steht zur Verfügung.
Wenn der Flash-Film eine DataGrid-Komponente enthält, bestätigen Sie, dass der zusammengefasste Text (summary text) zu dieser durch das entsprechende barrierefreie description-Property hinzugefügt wurde.
Das oben genannte ist 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.
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 Ziel dieser Technik ist, es dem Benutzer zu ermöglichen, die standardmäßige zeitliche Begrenzung auszudehnen, indem ein Mechanismus zur Verfügung gestellt wird, um die Zeit zu verlängern, wenn Scripts Funktionalitäten zur Verfügung stellen, die eine zeitliche Begrenzung haben. Um es dem Benutzer zu ermöglichen, um eine längere zeitliche Begrenzung zu bitten, kann das Skript (zum Beispiel) ein Formular bereitstellen, das es dem Benutzer erlaubt, eine größere zeitliche Begrenzung einzugeben oder darauf hinzuweisen, dass mehr Zeit benötigt wird.
Dies ist ein einfaches AS2-Beispiel, bei dem die Dauer der zeitlichen Begrenzung vom Benutzer über eine Auswahlliste geändert werden kann. In diesem Beispiel gibt es eine Combobox mit dem Instanz-Namen sessionLimitDuration.
Code-Beispiel:
import mx.controls.Alert;
import mx.accessibility.AlertAccImpl;
import mx.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
AlertAccImpl.enableAccessibility();
var sessionTimeout;
var sessionNotificationTimeout;
var timeLimit: Number;
var sessionAlert: Alert;
adjustTimeoutDuration();
// reset the timeout when interaction occurs
testField.addEventListener("change", resetTimeout);
//
//update limit duration when the combobox value changes
//
sessionLimitDuration.addEventListener("change", adjustTimeoutDuration);
function adjustTimeoutDuration(e) {
timeLimit = sessionLimitDuration.value * 1000;
resetTimeout();
timeoutDescription.text = "A session timeout will be simulated after " +
sessionLimitDuration.selectedLabel + " without interaction in the form field below."
}
function resetTimeout() {
clearTimeout(sessionTimeout);
sessionTimeout = setTimeout(endSession, timeLimit);
}
function endSession() {
sessionAlert.deletePopUp();
Alert.show("please log in again",
"Your session has expired");
}Für eine Demonstration sehen Sie sich die funktionierende Version von „Changing timeout with a dropdown list“ (Änderung der zeitlichen Begrenzung mit einer Auswahlliste) an. Die Quelle von „Änderung der zeitlichen Begrenzung mit einer Auswahlliste“ steht zur Verfügung. Bitte beachten Sie, dass die Zeiten für die Sitzung aus Demonstrationszwecken absichtlich kurz gehalten wurden; Entwickler sollten eine Zeitdauer anbieten, die ausreicht, um die Anforderung von Erfolgskriterium 2.2.1 (Zeiteinteilung anpassbar) zu erfüllen.
Bei Flash-Inhalten, die eine zeitliche Begrenzung enthalten:
Prüfen Sie, ob es in der Nähe des Seitenbeginns ein Steuerelement zur Anpassung der zeitlichen Begrenzung gibt, das es dem Benutzer erlaubt, die Zeit auf die mindestens zehnfache Länge der Standardzeit anzupassen.
Verifizieren Sie, dass die standardmäßige zeitliche Begrenzung für die Seite lang genug ist, damit ein Benutzer problemlos zu dem Steuerelement navigieren kann, auch wenn er zehnmal langsamer als die meisten Benutzer ist.
Das oben genannte ist 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.
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 Ziel dieser Technik ist es, einen barrierefreien Namen für die eingebauten Formular-Komponenten, die von Flash bereitgestellt werden, zur Verfügung zu stellen. Einige Komponenten, wie zum Beispiel Optionsschaltflächen, Kontrollkästchen und Schaltflächen haben ihre eigene 'label'--Eigenschaft. Bei anderen Komponenten muss der Entwickler den Label-Text der Komponente als barrierefreien Namen festlegen. Dies kann man entweder durch das Bedienfeld Eingabehilfen (bei Komponenten, die während des Erstellens auf der Bühne platziert werden) oder durch Scripting (bei Komponenten, die während der Laufzeit dynamisch erstellt werden) erreichen.
ActionScript 2
In ActionScript 2 muss der barrierefreie Name auf der _accProps-Eigenschaft der Komponente festgelegt werden. Diese Eigenschaft muss ein Objekt sein. Wenn eine Eigenschaft noch nicht festgelegt wurde, muss der Entwickler ein individuelles Objekt erstellen und es der _accProps-Eigenschaft zuweisen. Das Objekt selber kann mehrere auf die Barrierefreiheit bezogene Eigenschaften haben, von denen eine _accProps.name ist, die den barrierefreien Namen näher bestimmt. Wenn eine _accProps-Eigenschaft aktualisiert wird, muss der Entwickler Accessibility.UpdateProperties() aufrufen, damit die Änderungen in Kraft treten. Er wird empfohlen, vor dem Aufrufen von Accessibility.UpdateProperties() die System.capabilities.hasAccessibility-Flag zu prüfen. Damit werden Fehler in Umgebungen verhindert, die MSAA nicht unterstützen.
ActionScript 2 stellt die folgenden barrierefreien Komponenten zur Verfügung:
SimpleButton
CheckBox
RadioButton
Label
TextInput
TextArea
ComboBox
ListBox
Window
Alert
DataGrid
ActionScript 3
In ActionScript 3 muss der barrierefreie Name auf der accessibilityProperties-Eigenschaft der Komponente festgelegt werden. Diese Eigenschaft muss eine Instanz von flash.accessibility.AccessibilityProperties sein. Wenn eine Eigenschaft noch nicht festgelegt wurde, muss der Entwickler eine neue AccessibilityProperties-Instanz erstellen und es der accessibilityProperties-Eigenschaft zuweisen. Das Objekt selber kann mehrere auf die Barrierefreiheit bezogene Eigenschaften haben, von denen eine accessibilityProperties.nameist, die den barrierefreien Namen näher bestimmt.. Wenn eine accessibilityProperties-Eigenschaft aktualisiert wird, muss der Entwickler flash.accessibility.Accessibility.UpdateProperties() aufrufen, damit die Änderungen in Kraft treten. Es wird empfohlen, vor dem Aufruf von Accessibility.UpdateProperties() die flash.system.capabilities.hasAccessibility-Flag zu prüfen. Damit werden Fehler in Umgebungen verhindert, die MSAA nicht unterstützen.
ActionScript 3 stellt die folgenden barrierefreien Komponenten zur Verfügung:
Button
CheckBox
ComboBox
List
RadioButton
TileList
Folgen Sie diesen Schritten, um ein Komponenten-Steuerelement hinzuzufügen und zu beschriften:
Ziehen Sie die Komponente aus dem Bedienfeld ‚Komponenten‘ auf die Bühne oder benutzen Sie Scripting, um eine neue Instanz zu erstellen.
Geben Sie, wenn die neu erstellte Komponenten-Instanz ausgewählt ist, dessen Beschriftungstext (label text) im Feld Name des Bedienfelds Eingabehilfen ein.
Das unten stehende Code-Beispiel zeigt, wie eine ListBox-Komponene erstellt wird und wie ihr ein barrierefreier Name zugewiesen wird.
Code-Beispiel:
mx.accessibility.ListAccImpl.enableAccessibility();
this.createClassObject(mx.controls.List, "my_list", 1);
my_list.addItem({label: "R. Davis", data: 1});
my_list.addItem({label: "V. Mann", data: 2});
my_list.addItem({label: "L. Heart", data: 3});
my_list.addItem({label: "P. Hill", data: dt4});
my_list.addItem({label: "D. Gribble", data: 5});
my_list.move(10, 10);
if (System.capabilities.hasAccessibility) {
my_list._accProps = new Object();
my_list._accProps.name = "Staff Members";
Accessibility.updateProperties();
}Das Ergebnis kann man in der funktionierenden Version von „Setting the accessible name through ActionScript 2.0“ (Festlegen des barrierefreien Namens durch ActionScript 2.0) sehen. Die Quelle von „Festlegen des barrierefreien Namens durch ActionScript 2.0“ steht zur Verfügung.
Das unten stehende Code-Beispiel zeigt, wie eine ListBox-Komponene erstellt wird und wie ihr ein barrierefreier Name zugewiesen wird.
Code-Beispiel:
import fl.controls.List;
import fl.accessibility.ListAccImpl;
import flash.system.Capabilities;
import flash.accessibility.*;
ListAccImpl.enableAccessibility();
var my_list:List = new List();
my_list.addItem({label:"R. Davis", data:1});
my_list.addItem({label:"V. Mann", data:2});
my_list.addItem({label:"L. Heart", data:3});
my_list.addItem({label:"P. Hill", data:4});
my_list.addItem({label:"D. Gribble", data:5});
my_list.x = my_list.y = 10;
if (Capabilities.hasAccessibility) {
var accProps:AccessibilityProperties = new AccessibilityProperties();
accProps.name = "Staff Members";
my_list.accessibilityProperties = accProps;
Accessibility.updateProperties();
}
addChild(my_list);Das Ergebnis kann man in der funktionierenden Version von „Setting the accessible name through ActionScript 3.0“ (Festlegen des barrierefreien Namens durch ActionScript 3.0) sehen. Die Quelle von „Festlegen des barrierefreien Namens durch ActionScript 3.0“ steht zur Verfügung.
Bestätigen Sie bei Flash-Filmen, die Formular-Komponenten enthalten, dass entweder:
Der Text der Beschriftung der ausgewählten Komponente im Feld „Name“ des Bedienfelds Eingabehilfen festgelegt wurde.
In ActionScript 2.0: Scripting wird benutzt, um die _accProps.name-Eigenschaft der Komponente dynamisch festzulegen
In ActionScript 3.0: Scripting wird benutzt, um die accessibilityProperties.name-Eigenschaft der Komponente festzulegen
Eines der oben genannten ist 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.
Flash CS3 und höher
ActionScript 3.0 und höher
Die Technik bezieht sich auf:
Siehe User Agent Support for Flash für allgemeine Informationen zur Unterstützung durch Benutzeragenten.
Das Ziel dieser Technik ist es, Menschen, die blind sind oder anderweitig Probleme damit haben, das Video in audio-visuellem Material zu sehen, die Möglichkeit zu geben, auf das Material zuzugreifen. Mit dieser Technik wird eine Beschreibung des Videos über eine Audiodeskription bereitgestellt, die in die Dialoglücken des audio-visuellen Materials passt.
In diesem Beispiel wird die FLVPlayback-Komponente benutzt, um einen Video-Player zu erstellen. Eine individuell erstellte Klasse genannt „AudioDescriptions“ wird hinzugefügt, um das Abspielen der erweiterten Audiodeskriptionen zu verwalten. Diese Klasse stellt „Event-Listener" bereit, die auf Cue-Points in den Medien hören, die durch den Anbieter der Audiodeskription identifiziert wurden. Wenn diese Cue-Points erreicht werden, wird eine mp3-Datei abgespielt, welche die entsprechende Beschreibung enthält. Die aufgezeichneten Beschreibungen wurden zeitlich so angepasst, dass sie in die Dialoglücken des Film passen.
Audiodeskriptionen werden standardmäßig aktiviert. Eine Schaltfläche (die selber barrierefrei sein muss, damit sie andere Erfolgskriterien erfüllt) wird unterhalb des Video-Players bereitgestellt; sie erlaubt es dem Benutzer, Audiodeskriptionen an- oder auszuschalten.
Code-Beispiel:
package {
import fl.video. *;
import flash.events. *;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.URLRequest;
import flash.display.Sprite;
public class AudioDescriptions extends Sprite {
private var channel: SoundChannel = new SoundChannel;
private var myPlayer: FLVPlayback;
private var _enabled: Boolean = true;
private var _toggleBtn: Button;
private var snd: Sound = new Sound();
public function AudioDescriptions() {
// point myPlayer to the FLVPlayback component instance on the stage,
// which should be loaded with a valid video source.
myPlayer = my_FLVPlybk;
// add cue points. When any of these are reached, the
// MetadataEvent.CUE_POINT event will fire
myPlayer.addASCuePoint(8.35, "ASpt1");
myPlayer.addASCuePoint(23.23, "ASpt2");
enable();
enable_AD_btn.addEventListener(MouseEvent.CLICK, handleBtnClick);
}
private function handleBtnClick(e) {
_enabled = ! _enabled;
if (! _enabled) {
disable();
enable_AD_btn.label = "Enable Audio Descriptions";
} else {
enable();
enable_AD_btn.label = "Disable Audio Descriptions";
}
}
public function enable() {
// set up an event handler which will be called each time a cue point is reached
myPlayer.addEventListener(MetadataEvent.CUE_POINT, cp_listener);
}
public function disable() {
// remove the event handler called each time a cue point is reached, so
// that audio description is disabled.
myPlayer.removeEventListener(MetadataEvent.CUE_POINT, cp_listener);
}
private function cp_listener(eventObject: MetadataEvent): void {
snd = new Sound();
//recreate sound object as it can only load one mp3 file
//check to see which cue point was reached
switch (eventObject.info.name) {
case "ASpt1":
snd.load(new URLRequest("sphere.mp3"));
//create a new Sound object, and load the appropriate mp3
channel = snd.play();
// play the audio description, and assign it to the SoundChannel object
break;
case "ASpt2":
snd.load(new URLRequest("transfrm.mp3"));
channel = snd.play();
break;
}
}
}
}Das Ergebnis kann man in der funktionierenden Version von „Playing descriptions when cue points are reached“ (Abspielen von Beschreibungen, wenn Cue-Points erreicht werden) sehen. Die Quelle von „Abspielen von Beschreibungen, wenn Cue-Points erreicht werden“ steht zur Verfügung.
Audiodeskriptionen können auch über eine zusätzliche Audiospur bereitgestellt werden, welche die gleiche Länge hat wie das primäre Medium und simultan dazu ist, aber nur Geräusche für die Segmente, enthält, bei denen eine Audiodeskription abgespielt werden muss und zu anderen Zeiten still ist. Ein Flash-Autor kann einen Umschalter bereitstellen, um diese zusätzliche Audiospur an- und auszuschalten, abhängig von den Vorlieben des Zuhörers. Wenn die zusätzliche Audiospur aktiviert wird, gibt es zwei parallele Audiospuren; eine, bei der es sich um das primäre Audio handelt und eine zweite, die nur die Audiodeskription enthält. Es ist nach wie vor nötig sicherzustellen, dass sich die Audiodeskription und das primäre Audio nicht auf eine Art und Weise überlappen, die das Verständnis erschwert. Diese Methode erreicht das gleiche Ergebnis wie die in Beispiel 1 benutzte Methode, wird aber möglicherweise aufgrund der Art der Audiodeskriptions-Dateien, die dem Flash-Autor zur Verfügung gestellt werden, ausgewählt.
Wenn Flash-Inhalte Video mit einer Audio-Tonspur enthalten, bestätigen Sie, dass:
Audiodeskriptionen bereit gestellt wurden, indem getrennte Audiodateien benutzt wurden.
Eine Schaltfläche bereitgestellt wird, die es den Benutzern erlaubt, die Audiodeskriptionen zu aktivieren oder zu deaktivieren
#1 und #2 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.
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 Ziel dieser Technik ist, den Zweck einer Schaltfläche zu beschreiben, indem man einen beschreibenden Text als barrierefreien Namen der Schaltfläche zur Verfügung stellt. Die Beschreibung lässt einen Benutzer diese Schaltfläche von anderen Schaltflächen im Flash-Film unterscheiden und hilft dem Benutzer zu bestimmten, ob er die Schaltfläche aktiviert. Ein leerer String reicht als barrierefreier Name einer Schaltfläche nicht aus.
Bei Schaltflächen mit Beschriftungen in Textform (text labels) wird der Text der Beschriftung als barrierefreier Name der Schaltfläche benutzt. Wenn eine Schaltfläche bild-basiert ist und keine Beschriftung in Textform hat, dann muss der barrierefreie Name der Schaltfläche separat festgelegt werden, indem man das Bedienfeld Eingabehilfen oder Scripting benutzt.
Code-Beispiel:
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
var myButton:Button = new Button();
myButton.label = "View Items in Cart";In diesem Beispiel wird die label-Eigenschaft der Schaltfläche absichtlich auf einen leeren String gesetzt. Damit sie für assistierende Techniken wahrnehmbar ist, wird die accessibilityProperties.name-Eigenschaft der Schaltfläche festgelegt.
Code-Beispiel:
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
import flash.accessibility.*;
import flash.system.Capabilities;
ButtonAccImpl.enableAccessibility();
var soundIsMuted = false;
var myButton:Button = new Button();
myButton.setStyle("icon", unmuted);
myButton.label = "";
myButton.x = myButton.y = 10;
myButton.width = myButton.height = 50;
updateAccName(myButton, "mute sound");
myButton.setStyle("icon", unmuted);
myButton.addEventListener(MouseEvent.CLICK, handleBtnClick);
addChild(myButton);
function handleBtnClick(e) {
soundIsMuted = !soundIsMuted;
myButton.setStyle("icon", soundIsMuted ? muted : unmuted);
updateAccName(myButton, soundIsMuted ? "unmute sound" : "mute sound");
}
function updateAccName(obj, newName:String) {
if (!obj.accessibilityProperties)
obj.accessibilityProperties = new AccessibilityProperties();
obj.accessibilityProperties.name = newName;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
}Für jede Schaltfläche im Flash-Film, die diese Technik benutzt:
Prüfen Sie, ob die Beschriftung in Textform den Zweck der Schaltfläche korrekt beschreibt
Wenn eine Schaltfläche keine Beschriftung in Textform hat, bestätigen Sie, dass beschreibender Text als barrierefreier Name der Schaltfläche hinzugefügt wurde.
Wenn eine Schaltfläche sowohl eine Beschriftung in Textform als auch einen barrierefreien Namen hat, bestätigen Sie, dass die Kombination der beiden als Beschreibung für den Zweck der Schaltfläche einen Sinn ergibt.
Tests #1, #2 und #3 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.
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.
ASCII-Zeichen, Emoticons und Leetspeek werden manchmal benutzt und stellen Herausforderungen an die Barrierefreiheit dar, da die Bedeutung durch die visuelle Erscheinung der Gruppierungen einzelner Zeichen vermittelt wird.
In Flash können solche Gruppierungen von Zeichen barrierefrei gemacht werden, indem man sie in einen MovieClip packt und einen barrierefreien Namen bereitstellt. Es ist entscheidend, dass die forceSimple-Eigenschaft für den MovieClip auch auf wahr gesetzt wird. Damit werden die tatsächlichen ASCII-Zeichen vor den assistierenden Techniken versteckt.
Diese Beispiel enthält Worte, die in ASCII-Art geschrieben wurden und Leetspeek benutzen (der Text lautet „WCAG 2 rulez“). Damit dieser Text barrierefrei wird, muss man die folgenden Schritte unternehmen:
Platzieren Sie die ASCII-Zeichen in einer MovieClip-Instanz
Wählen Sie die MovieClip-Instanz, die den Text enthält, aus und nehmen Sie die folgenden Änderungen im Bedienfeld Eingabehilfen vor:
Fügen Sie eine bedeutungstragende Textalternative für die ASCII-Art ohne Leetspeak (wie zum Beispiel „WCAG 2 RULEZ“) hinzu.
Deaktivieren Sie das Kontrollkästchen „Child-Objekte mit Eingabehilfen versehen“ (Make child objects accessible), so dass die ASCII-Zeichen nicht von Screenreadern gelesen werden
Diese Schritte werden im unten stehenden Bildschirmfoto veranschaulicht:
Dieses Beispiel ist wie Beispiel 2, außer dass ActionScript anstelle des Bedienfelds Eingabehilfe im Flash Professional-Autorenwerkzeug benutzt wird. (Anmerkung des Übersetzers: es sollte lauten „Dieses Beispiel ist wie Beispiel 1“ statt „ Dieses Beispiel ist wie Beispiel 2“)
Platzieren Sie die ASCII-Zeichen in einer MovieClip-Instanz
Stellen Sie einen Instanz-Namen für die MovieClip-Instanz (z.B. myASCII) zur Verfügung
Legen Sie den barrierefreien Namen für den MovieClip fest und setzen Sie die forceSimple-Eigenschaft auf wahr, um den Text innerhalb des MovieClips zu verstecken.
Code-Beispiel:
// 'myASCII' is a MovieClip instance placed on the movie's main timeline
myASCII.accessibilityProperties = new AccessibilityProperties();
myASCII.accessibilityProperties.name = "WCAG 2 Rulez";
myASCII.accessibilityProperties.forceSimple = true;Diese Technik wird in der funktionierenden Version von „Providing a text alternative for ASCII art using ActionScript“ (Bereitstellung einer Textalternative für ASCII-Art durch ActionScript) demonstriert. Die Quelle für „Bereitstellung einer Textalternative für ASCII-Art durch ActionScript“ steht zur Verfügung.
Veröffentlichen Sie die SWF-Datei
Benutzen Sie zum Öffnen des Flash-Films ein Werkzeug, das in der Lage ist, den Namen eines Objektes anzuzeigen.
Finden Sie die ASCII-Gruppierung, Leetspeak oder Emoticon und verifizieren Sie im Werkzeug, dass der barrierefreie Name die gleichen Informationen repräsentiert.
Autoren können auch mit einem Screenreader testen, indem der Flash-Inhalt gelesen wird und sie zuhören, um zu hören, ob das Textäquivalent gelesen wird, wenn man per Tab zu dem Nicht-Text-Objekt geht (wenn es per Tab erreichbar ist) oder um zu hören, dass der alternative Text gelesen wird, wenn der Inhalt Zeile für Zeile gelesen wird.
#3 oder #4 oben ist 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.
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 Ziel dieser Technik ist die explizite Verknüpfung einer Formular-Komponente mit ihrem Beschriftungstext, indem die label-Eigenschaft der Komponente festgelegt wird. Die Festlegung dieser Eigenschaft platziert die Beschriftung (das Label) visuell neben der Komponente und zeigt assistierenden Techniken den Beschriftungstext.
Komponenten, welche die Label-Eigenschaft unterstützen, sind:
Bei anderen Komponenten muss der Beschriftungstext manuell neben der Formular-Komponente platziert werden. Bei diesen Komponenten kann der Beschriftungstext mit der Formular-Komponente verknüpft werden, indem man eine dieser Vorgehensweisen benutzt:
Damit assistierende Techniken auf diese Formular-Steuerelemente zugreifen können, müssen die folgenden Zeilen Code einmal zum Script des Films hinzugefügt werden:
Wenn die Schaltflächen-Komponente (Button component) benutzt wird:
import fl.accessibility.ButtonAccImpl; ButtonAccImpl.enableAccessibility();
Wenn die Optionsschaltflächen-Komponente (RadioButton component) benutzt wird:
import fl.accessibility.RadioButtonAccImpl; RadioButtonAccImpl.enableAccessibility();
Wenn die Kontrollkästchen-Komponente (CheckBox component ) benutzt wird:
import fl.accessibility.CheckBoxAccImpl; CheckBoxAccImpl.enableAccessibility();
Fügen Sie die Schaltflächen-, Kontrollkästchen- oder Optionsschaltflächen-Komponente zu dem Film hinzu, indem Sie diese aus dem Bedienfeld ‚Komponenten‘ auf die Bühne ziehen.
Wählen Sie die Komponente aus und öffnen Sie dann das Bedienfeld ‚Komponenten-Inspektor‘, indem Sie es im Menü ‚Fenster‘ auswählen oder den Kurzbefehl Shift + F7 benutzen.
Geben Sie im Komponenten-Inspektor im Reiter ‚Parameter‘ den Beschriftungstext für den ‚Label‘-Parameter ein.
Das Bildschirmfoto unten veranschaulicht diese Technik.
Code-Beispiel:
import fl.accessibility.ButtonAccImpl
import fl.accessibility.CheckBoxAccImpl
import fl.accessibility.RadioButtonAccImpl
import fl.controls.Button;
import fl.controls.CheckBox;
import fl.controls.RadioButton;
ButtonAccImpl.enableAccessibility();
var myButton: Button = new Button();
myButton.label = "Submit Details";
myButton.x = 10;
myButton.y = 10
addChild(myButton);
CheckBoxAccImpl.enableAccessibility();
var myCheckBox: CheckBox = new CheckBox();
myCheckBox.label = "notify me";
myCheckBox.x = 10;
myCheckBox.y = 40
addChild(myCheckBox);
RadioButtonAccImpl.enableAccessibility();
var myRadioButton: RadioButton = new RadioButton();
myRadioButton.label = "Male";
myRadioButton.x = 10;
myRadioButton.y = 60;
addChild(myRadioButton);Diese Technik wird im funktionierenden Beispiel von „Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0“ (Festlegung der Beschriftung (label) einer Schaltfläche, eines Kontrollkästchens und einer Optionsschaltfläche durch ActionScript 3.0) demonstriert. Die Quelle von „Festlegung der Beschriftung (label) einer Schaltfläche, eines Kontrollkästchens und einer Optionsschaltfläche durch ActionScript 3.0“ seht zur Verfügung.
Wenn die Schaltflächen-, Kontrollkästchen- oder Optionsschaltflächen-Komponenten benutzt werden:
Bestätigen Sie, dass Beschriftungen (labels), die den Zweck der Schaltfläche beschreiben, durch die label-Eigenschaft der Komponente bereitgestellt werden.
#1 ist 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.
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.
Bei bild-basierten Schaltflächen-Komponenten muss der barrierefreie Name festgelegt werden, um eine funktionale Beschriftung bereitzustellen. Diese Beschriftung bezeichnet die Funktion der Schaltfläche, versucht aber nicht, das Bild zu beschreiben. Die Beschriftung ist besonders wichtig, wenn es mehrere Schaltflächen auf der Seite gibt, die alle zu unterschiedlichen Ergebnissen führen.
Der barrierefreie Name für eine Schaltfläche muss möglicherweise aktualisiert werden, wenn sich die Schaltfläche während der Benutzung des Flash-Films ändert.
In diesem Beispiel bekommt eine symbol-basierte Schaltfläche eine barrierefreien Namen durch Scripting. Wenn die Schaltfläche angeklickt wird, wird eine Webseite geöffnet.
Code-Beispiel:
//provide text equivalent for image button
this.check_btn.accessibilityProperties = new AccessibilityProperties();
this.check_btn.accessibilityProperties.name = "Check page validation";
//set up event listener and function to navigate to URL
this.check_btn.addEventListener(MouseEvent.CLICK, onClickHandler);
function onClickHandler(e: MouseEvent): void {
var btn = e.target;
var url: String = "http://validator.w3.org";
var request: URLRequest = new URLRequest(url);
navigateToURL(request, '_blank');
}Das Ergebnis wird in der funktionierenden Version von „Accessible name for a simple image button“ (Barrierefreier Name für eine einfache Bild-Schaltfläche) demonstriert. Die Quelle für „Barrierefreier Name für eine einfache Bild-Schaltfläche“ steht zur Verfügung.
Code-Beispiel:
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
var soundIsMuted = false;
var myButton: Button = new Button();
myButton.label = "";
myButton.x = myButton.y = 10;
myButton.width = myButton.height = 50;
updateAccName(myButton, "mute sound");
myButton.setStyle("icon", unmuted);
myButton.addEventListener(MouseEvent.CLICK, handleBtnClick);
addChild(myButton);
function handleBtnClick(e) {
soundIsMuted = ! soundIsMuted;
myButton.setStyle("icon", soundIsMuted? muted: unmuted);
updateAccName(myButton, soundIsMuted? "unmute sound": "mute sound");
}
function updateAccName(obj, newName: String) {
if (! obj.accessibilityProperties)
obj.accessibilityProperties = new AccessibilityProperties();
obj.accessibilityProperties.name = newName;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
}Das Ergebnis wird in der funktionierenden Version von „Accessible name for a dynamic image button“ (Barrierefreier Name für eine dynamische Bild-Schaltfläche) demonstriert. Die Quelle für „Barrierefreier Name für eine dynamische Bild-Schaltfläche“ steht zur Verfügung.
Wenn ein Flash-Film bild-basierte Schaltflächen enthält bestätigen Sie, dass:
Ein barrierefreier Name für die Schaltfläche bereitgestellt wird, der die Aktion der Schaltfläche beschreibt
Sich der barrierefreie Name entsprechend ändert, wenn sich die Aktion der Schaltfläche ändert (zum Beispiel wenn sie angeklickt wird)
#1 und #2 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.
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 Ziel dieser Technik ist es, Untertitel (captions) für DataGrids durch Software zu verbinden, wenn Untertitel in der Darstellung zur Verfügung gestellt werden. Normalerweise ist die Caption für eine Tabelle ein Tabellen-Identifier und verhält sich wie ein Titel oder eine Überschrift für die Tabelle.
Flash hat kein caption-Element für die DataGrid-Komponente, aber man kann den gleichen Effekt durch die folgende Vorgehensweise erzielen :
Platzieren Sie eine label-Komponente oder ein Textfeld, das den Caption-Text des Grids enthält, über dem DataGrid.
Duplizieren Sie den Caption-Text und fügen Sie es als barrierefreien Namen des Grids hinzu. Sie können dies erreichen, indem Sie entweder einen Wert für das Feld "name" des Grids im Bedienfeld Eingabehilfen festlegen oder indem Sie die AccessibilityProperties.name-Eigenschaft des Grids festlegen.
Dies ist ein Beispiel eines Datagrid, das aus dem Komponenten-Bedienfeld zur Bühne in Flash Professional hinzugefügt wird. Ein Label-Element wird auch aus dem Bedienfeld Komponenten hinzugefügt, damit dieses den Caption-Text enthält und der Caption-Text wird im Bedienfeld Eingabehilfen in Flash benutzt, damit dieser als Barrierefreiheits-Name für das Datagrid dient.
Erstellen Sie eine neue Flash-Datei (.fla) oder öffnen Sie eine bestehende, um ein Datagrid hinzuzufügen.
Öffnen Sie das Fenster Flash-Komponenten aus dem Menü Fenster
Ziehen Sie die Datagrid-Komponente auf die Bühne und positionieren Sie diese wie gewünscht.
Ziehen Sie eine Label-Komponente auf die Bühne und positionieren Sie diese wie gewünscht.
Fügen Sie Text zu der Label-Komponente hinzu.
Wählen Sie die Datagrid-Komponente aus und fügen Sie den gleichen Text, so wie er in der Label-Komponente benutzt wird, zu dem Feld Name für das Datagrid hinzu, indem Sie das Bedienfeld Eingabehilfen benutzen.
Dies ist ein einfaches AS3-Beispiel eines Datagrids, das durch Scripting generiert wurde. Zusätzlich wird ein Label-Element erstellt, das den Caption-Text enthält und der Caption-Text wird zu dem Grid als barrierefreier Name hinzugefügt.
Code-Beispiel:
import fl.accessibility.DataGridAccImpl;
import fl.controls.DataGrid;
import fl.controls.Label;
import fl.data.DataProvider;
import flash.accessibility.Accessibility;
import flash.accessibility.AccessibilityProperties;
import flash.system.Capabilities;
// enable accessibility for the DataGrid
DataGridAccImpl.enableAccessibility();
createGrid();
// set the data grid caption text
var gridCaptionText: String = "Game Results";
gridCaption.text = gridCaptionText;
//add the caption text as the DataGrid's accessible name
var accProps: AccessibilityProperties = new AccessibilityProperties();
accProps.name = gridCaptionText;
aDg.accessibilityProperties = accProps;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();
function createGrid() {
//create and add the components
var aDg: DataGrid = new DataGrid();
var gridCaption: Label = new Label();
addChild(aDg);
addChild(gridCaption);
aDg.move(50, 50);
gridCaption.move(50, 20);
var captionFormat: TextFormat = new TextFormat();
captionFormat.size = 24;
gridCaption.setStyle("textFormat", captionFormat);
gridCaption.width = 300;
gridCaption.height = 100;
bldRosterGrid(aDg);
//prepare the data
var aRoster: Array = new Array();
aRoster =[
{Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"},
{Name: "Sylvia Munson", Bats: "R", Throws: "R", Year: "Jr", Home: "Pasadena, CA"},
{Name: "Carla Gomez", Bats: "R", Throws: "L", Year: "Sr", Home: "Corona, CA"},
{Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"},
];
aDg.dataProvider = new DataProvider(aRoster);
aDg.rowCount = aDg.length;
};
function bldRosterGrid(dg: DataGrid) {
dg.setSize(400, 300);
dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
dg.columns[0].width = 120;
dg.columns[1].width = 50;
dg.columns[2].width = 50;
dg.columns[3].width = 40;
dg.columns[4].width = 120;
};Anmerkungen zu diesem Code-Beispiel:
Für eine Demonstration sehen Sie sich die funktionierende Version von „Verknüpfung einer Caption mit einem Datagrid durch die Benutzung von ActiveScript 3“ an. Die Quelle von „Verknüpfung einer Caption mit einem Datagrid durch die Benutzung von ActiveScript 3“ steht zur Verfügung.
Der barrierefreie Name kann auch auf das DataGrid angewendet werden, indem man das Bedienfeld Eingabehilfen im Flash-Autorenwerkzeug benutzt.
Im oben stehenden Beispiel wird der Text, der für die dataGrid-Caption benutzt wird, zweimal gelesen, einmal als Text-Label, das für sehende Benutzer angeboten wird und noch einmal als barrierefreier Name für das dataGrid. Autoren können das doppelte Lesen vermeiden, indem sie die silent-Eigenschaft für den Label-Text auf wahr setzen.
Prüfen Sie, ob ein Flash-Film eine DataGrid-Komponente enthält.
Bestätigen Sie, dass jeder Caption-Text des DataGrid als barrierefreier Name zu der Komponente hinzugefügt wurde.
Schritt 2 ist 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.
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.
Mit Ausnahme der CheckBox- und RadioButton-Komponenten erhalten die eingebauten Flash-Komponenten nicht automatisch eine verknüpfte Beschriftung (Label). Für diese Komponenten muss der Beschriftungstext manuell neben ihrem Steuerelement platziert werden, indem die Label-Komponente benutzt wird. Wenn die ‚auto-label‘-Funktion (Funktion zur automatischen Bezeichnung) im Bedienfeld Eingabehilfen aktiviert ist, dann verknüpft der Flash-Player den Label-Text für die TextInput- und TextArea-Komponenten. Dies bedeutet, dass es bei diesen Komponenten nicht notwendig ist, den Label-Text für das Steuerelement im Bedienfeld Eingabehilfen zu duplizieren. Die ‚auto label‘-Funktion ist standardmäßig aktiviert.
Darüber hinaus versetzt die ‚auto label‘-Funktion den Flash-Player dazu in die Lage, Text, der in Schaltflächen-Symbolen enthalten ist, automatisch als barrierefreien Namen des Symbols hinzuzufügen. Dies funktioniert nur, wenn das Schaltflächen-Symbol nur aus einer Ebene beseht, die das Text-Label enthält.
Anmerkung: Da das ‚auto-labeling‘ Label ohne menschlichen Eingriff verknüpft, sollte die Richtigkeit der Verknüpfung verifiziert werden. Für vorhersehbarere Ergebnisse werden Autoren dazu angeregt, Label explizit zu allen Steuerelementen hinzuzufügen.
Für das ‚auto labeling‘ führen Sie die folgenden Schritte aus:
Stellen Sie sicher, dass die Beschreibungen in Textform für jedes Formular-Steuerelement innerhalb der Flash-Anwendung neben dem Steuerelement selber platziert werden. Text, der zur Verwendung für das ‚auto-labeling‘ geeignet ist, darf nicht so eingestellt sein, dass er vor assistierenden Techniken versteckt wird.
Wählen Sie die Film-Bühne aus und öffnen Sie das Bedienfeld ‚Eingabehilfen‘.
Stellen Sie sicher, dass die Option ‚Automatische Bezeichnung‘ (Auto Label) ausgewählt ist. Dadurch werden Label automatisch mit ihren TextInput- und TextArea-Steuerelementen verknüpft; fügen Sie innerhalb von individuell erstellten Schaltflächen-Symbolen Text als deren barrierefreien Namen hinzu.
Wenn das ‚auto label‘-Verhalten für Ihren Flash-Inhalt ungeeignet ist, dann deaktivieren Sie die ‚auto label‘-Option (Option zur automatischen Bezeichnung) und stellen Sie sicher, dass jedes Steuerelement einen bedeutungstragenden ‚Name‘-Wert im Bedienfeld ‚Eingabehilfen‘ erhält.
Um das ‚auto labeling‘ für ein bestimmtes Objekt nicht aber für den gesamten Film zu deaktivieren, konvertieren Sie den Text zum ‚dynamischen Text‘-Typ, indem Sie den ‚Eigenschafteninspektor‘ benutzen. Wählen Sie es dann aus und deaktivieren Sie dessen Option 'Objekt mit Eingabehilfen versehen' im Bedienfeld ‚Eingabehilfen‘.
Anmerkung: Als Alternative zur Benutzung des Bedienfeldes Eingabehilfen kann die ‚auto label‘-Funktion auch ausgeschaltet werden, indem man AccessibilityProperties.noAutoLabel für das Bühnen-Objekt auf wahr setzt.
Dieses Beispiel zeigt zwei TextInput-Komponenten, eine TextArea-Komponente und eine individuell erstellte Schaltflächen-Symbol-Instanz. Bei der TextInput-Komponente wurde ein separates Label-Element links neben dem Steuerelement platziert. Bei der TextArea-Komponente wurde das Label oberhalb des Steuerelementes platziert. Bei der individuell erstellten Schaltfläche wurde der Label-Text innerhalb des Schaltflächen-Symbols platziert. Da die Option „Auto Label“ (automatische Bezeichnung) im Bedienfeld Eingabehilfen aktiviert ist, bekommen all diese Steuerelemente einen auf ihrem Label basierenden barrierefreien Namen.
Das unten stehende Bildschirmfoto veranschaulicht das Beispiel:
Das Ergebnis dieser Technik können Sie in der funktionierenden Version von „Using the "Auto Label" option in the Accessibility Panel“ (Benutzung der Option „Auto Label“ (automatische Bezeichnung) im Bedienfeld Eingabehilfen) sehen. Die Quelle von „Benutzung der Option „Auto Label“ (automatische Bezeichnung) im Bedienfeld Eingabehilfen“ steht zur Verfügung.
Wenn ein Flash-Formular TextInput- oder TextArea-Komponenten oder individuell erstellte Schaltflächen-Symbole mit Text-Labeln enthält, bestätigen Sie, dass:
Die Option Auto Label (automatische Bezeichnung) im Bedienfeld Eingabehilfen des Films aktiviert ist
Benutzen Sie einen Screenreader oder MSAA-Checker um sicherzustellen, dass der Label-Text tatsächlich als barrierefreier Name des Steuerelementes gezeigt wird
#1 und #2 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.
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 Ziel dieser Technik ist es, die Breite und/oder Höhe eines eingebetteten Flash-Objektes in relativen Einheiten wie beispielsweise em-Werte festzulegen. Die Größe des Flash-Objektes kann sich ausdehnen, um die Größe des Containers auszufüllen (ein parent-Element) indem die Film-Breite und -Höhe auf 100% gesetzt wird. Die Breite und Höhe des Containers wird mit relativen Einheiten festgelegt. Damit wird es Benutzeragenten, die Größenänderungen von Text unterstützen, ermöglicht, das Flash-Objekt in Einklang mit mit Änderungen in den Einstellungen zur Textgröße in der Größe zu verändern. Wenn die Dimensionen des Flash-Objektes angepasst werden, wird dessen Inhalt skaliert, wodurch er für Benutzer mit geringem Sehvermögen leichter zu lesen ist.
Anmerkung: Diese Technik ist nicht notwendig zur Unterstützung von Benutzern, welche die Zoom-Funktion in ihren Browsern benutzen.
In diesem Beispiel wird ein Flash-Objekt in ein HTML-Dokument geladen, indem die SWFObject's dynamic publishing-Methode benutzt wird. Das Container-Element des Flash-Objektes bekommt den Klassen-Namen „flashPlaceHolder“. Dieser Klassen-Name wird dann durch die Benutzung von CSS anvisiert, um dessen Breite und Höhe festzulegen, indem relative em-Werte benutzt werden. Wenn der Benutzer die Textgröße des Browsers verkleinert oder vergrößert, skaliert das Flash-Objekt entsprechend mit. Um sicherzustellen, dass das Objekt nicht zu klein wird, wenn die Textgröße verringert wird, werden die Eigenschaften min-width und min-height auf die Standardmaße festgesetzt.
Code-Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Flash Resize example</title>
<script src="swfobject/swfobject.js" type="text/javascript"/>
<script type="text/javascript">
swfobject.embedSWF("scale_movie_dimensions_on_text_resize_as3.swf",
"flashPlaceHolder", "100%", "100%", "8")
</script>
<style type="text/css">
#flashPlaceHolder {
width: 20em;
height: 15em;
min-width: 320px;
min-height: 240px;
}
</style>
</head>
<body id="header">
<h1>Flash Resize Demonstration</h1>
<p>When the browser's text size is changed, the Flash movie will be
resized accordingly.</p>
<p id="flashPlaceHolder">Flash needs to be installed for this
example to work</p>
</body>
</html>Das Ergebnis dieser Technik können Sie in der funktionierenden Version von „Scaling text while keeping a minimum size“ (Skalierung von Text unter Beibehaltung einer Mindest-Größe) sehen. Die Quelle von „Skalierung von Text unter Beibehaltung einer Mindest-Größe“ steht zur Verfügung.
Öffnen Sie eine Webseite, die ein eingebettetes Flash-Objekt enthält
Sehen Sie sich das HTML an um zu bestätigen, dass die Maße für Breite und Höhe des Objekts, welches das Flash-Objekt enthält, unter Benutzung von relativen Einheiten wie zum Beispiel em oder Prozent (%) festgelegt wurden.
Test #2 ist 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.
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.
Der Zweck dieser Technik ist es, das Abspielen von Ton zu vermeiden, wenn der Flash-Film geladen wird. Das ist nützlich für all jene, die assistierende Techniken einsetzen (wie z.B. Screenreader, Vergrößerungssoftware, Schaltermechanismen usw.) und für diejenigen, die dies nicht tun (wie z.B. diejenigen mit kognitiven, Lern- und Sprachbehinderungen). Standardmäßig wird der Ton automatisch abgespielt. Wenn allerdings ein Screenreader wie beispielsweise JAWS erkannt wird, muss der Ton manuell gestartet werden.
Um die Screenreader-Erkennung auszuführen stellt Flash die flash.accessibility.Accessibility.active-Eigenschaft zur Verfügung. Wenn diese Eigenschaft auf wahr gesetzt wird, bedeutet das, dass der Flash-Player laufende assistierende Techniken erkannt hat. Basierend auf diesem Merker („flag“) kann sich der Flash-Entwickler dazu entscheiden, unterschiedliche Funktionalitäten ausführen zu lassen.
Anmerkung 1: Der Flash-Player benötigt ein wenig Zeit, um assistierende Techniken zu erkennen und die Accessibility.active-Eigenschaft zu setzen. Um korrekte Ergebnisse zu erhalten, überprüfen Sie diese Eigenschaft nicht unmittelbar beim ersten Frame des Films. Führen Sie Sie die Überprüfung stattdessen 5 Frames weiter oder basierend auf einem zeitlich festgelegten Event aus.
Anmerkung 2: Durch die Benutzung dieses Mechanismus wird nicht jeder Screenreader erkannt. Im Allgemeinen wird diese Eigenschaft auf wahr gesetzt, wenn irgendein MSAA-Client ausgeführt wird.
Anmerkung 3: Andere assistierende Techniken einschließlich Vergrößerungssoftware oder Werkzeuge, die nicht als assistierende Techniken benutzt werden, können MSAA ebenfalls auf eine Art und Weise benutzen, die dazu führt, dass Accessibility.active auf wahr gesetzt wird.
Eine Klasse genannt SoundHandler wird erstellt, die nur dann eine mp3-Datei automatisch abspielt, wenn Accessibility.active auf falsch gesetzt wird. Beachten Sie, dass dieses Beispiel auch die Eigenschaft flash.system.Capabilities.hasAccessibility überprüft. Diese Eigenschaft prüft nicht, ob ein Screenreader läuft, sondern gibt stattdessen an, ob ein Flash-Player in einer Umgebung, die MSAA unterstützt, läuft (was im Grunde genommen das Windows Betriebssystem bedeutet).
Code-Beispiel:
package wcagSamples {
import flash.accessibility.Accessibility;
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.system.Capabilities;
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
import fl.controls.Label;
import flash.events.MouseEvent;
public class SoundHandler extends Sprite {
private var snd: Sound = new Sound();
private var button: Button = new Button();
private var req: URLRequest = new URLRequest(
"http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3");
private var channel: SoundChannel = new SoundChannel();
private var statusLbl: Label = new Label();
public function SoundHandler() {
snd.load(req);
ButtonAccImpl.enableAccessibility();
button.x = 10;
button.y = 10;
statusLbl.autoSize = "left";
statusLbl.x = 10;
statusLbl.y = 40;
addChild(statusLbl);
button.addEventListener(MouseEvent.CLICK, clickHandler);
this.addChild(button);
if (! Capabilities.hasAccessibility || ! Accessibility.active) {
channel = snd.play();
button.label = "Stop Sound";
statusLbl.text = "No Assistive technology detected. \
Sound will play automatically";
} else {
button.label = "Start Sound";
statusLbl.text = "Assistive technology detected. \
Sound will not play automatically";
}
}
private function clickHandler(e: MouseEvent): void {
if (button.label == "Stop Sound") {
button.label = "Start Sound";
channel.stop();
} else {
channel = snd.play();
button.label = "Stop Sound";
}
}
}
}Diese Technik kann in der funktionierenden Version von „A SoundHandler class“ (Eine SoundHandler-Klasse) angesehen werden. Die Quelle für „Eine SoundHandler-Klasse“ steht zur Verfügung.
Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Starten Sie einen Screenreader, der MSAA unterstützt.
Öffnen Sie eine Seite, die einen Flash-Film enthält, der Audio automatisch abspielt, wenn kein Screenreader läuft
Bestätigen Sie, dass das Audio angehalten wird.
#3 ist 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.
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 Ziel dieser Technik ist es, Benutzern eines Möglichkeit zu geben, scrollende Inhalte anzuhalten, wenn das Scrollen von einem Skript erstellt wird. Scrollende Inhalte können für Benutzer mit geringem Sehvermögen oder kognitiven Behinderungen schwer oder unmöglich zu lesen sein. Die Bewegung kann auch einige Menschen ablenken, was es schwierig für sie macht, sich auf andere Teile der Webseite zu konzentrieren.
In diesem Beispiel scrollt der Text von links nach rechts. Es wird eine Umschalt-Schaltfläche zur Verfügung gestellt, die es dem Benutzer erlaubt, das Scroll-Verhalten anzuhalten und wieder aufzunehmen. Darüber hinaus wird ein Kontrollkästchen bereitgestellt, das benutzt werden kann, um die Scroll-Geschwindigkeit zu reduzieren.
Anmerkung: Es kann sein, dass Benutzer eine größere Auswahl bei den Optionen zur Scroll-Geschwindigkeit haben möchten, als in diesem Beispiel angeboten werden. Entwickler können sich dazu entscheiden, verschiedene Wahlmöglichkeiten zur Geschwindigkeit mit einem Schieberegeler- oder einem Aufklapp-Listen-Steuerlement anzubieten, um dies zu erreichen.
Code-Beispiel:
import fl.accessibility.ButtonAccImpl;
import fl.accessibility.CheckBoxAccImpl;
ButtonAccImpl.enableAccessibility();
CheckBoxAccImpl.enableAccessibility();
var scrollInterval: int;
var intervalLength: int = 15;
var expandedViewer: MovieClip = exampleScroller.expandedViewer;
var scrollText: MovieClip = exampleScroller.scrollText;
var scrollViewer: MovieClip = exampleScroller.scrollViewer;
var scrollingPaused: Boolean = true;
scrollStopper.addEventListener(MouseEvent.CLICK, handleBtnClick, false);
slowDown_chk.addEventListener(MouseEvent.CLICK, handleChkClick, false);
function handleBtnClick(e) {
toggleScroll(false);
e.target.label = scrollingPaused? "Resume Scrolling": "Stop Scrolling";
}
//slow down scrolling speed
function handleChkClick(e) {
intervalLength = e.target.selected? 50: 15;
if (! scrollingPaused) {
clearTimeout(scrollInterval);
toggleScroll(true);
}
}
//pause or resume scrolling
function toggleScroll(noToggle: Boolean) {
if (noToggle || scrollingPaused)
scrollInterval = setInterval(moveText, intervalLength); else
clearTimeout(scrollInterval);
if (! noToggle)
scrollingPaused = ! scrollingPaused;
}
function moveText() {
if (scrollText.x + scrollText.width < scrollViewer.x)
scrollText.x = scrollViewer.x + scrollViewer.width;
scrollText.x -= 1;
}
//initiate scrolling
toggleScroll(false);Diese Technik wird in der funktionierenden Version von „A toggle button to pause and resume scrolling“ (Eine Umschalt-Schaltfläche, um das Scrollen anzuhalten und wieder aufzunehmen) demonstriert. Die Quelle von „Eine Umschalt-Schaltfläche, um das Scrollen anzuhalten und wieder aufzunehmen“ steht zur Verfügung.
Wenn ein Flash-Film scrollende Inhalte enthält:
Bestätigen Sie, dass eine Schaltfläche zur Verfügung gestellt wird, die es Benutzern erlaubt, das Scroll-Verhalten anzuhalten und wieder aufzunehmen
Bestätigen Sie, dass das Drücken der Schaltfläche das scrollen stoppt
Bestätigen Sie, dass das erneute Drücken der Schaltfläche das Scrollen wieder neu startet
Tests #1, #2 und #3 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.
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 Ziel dieser Technik ist es, das Blinken per Skript zu steuern, so dass es so eingestellt werden kann, dass es durch das Skript in weniger als fünf Sekunden aufhört. Die ActionScript setTimeout()-Method wird benutzt, um das Blink-Verhalten des MovieClips in weniger als 5 Sekunden zu stoppen.
In diesem Beispiel benutzt ein MovieClip (blinkingTextMC) seine Zeitleiste, um einen blinkenden Effekt zu generieren. Bevor 5 Sekunden vergangen sind, wird die gotoAndStop()-Methode des MovieClips aufgerufen, die den blinkenden Effekt stoppt.
Code-Beispiel:
setTimeout(stopBlinking, 4500);
function stopBlinking() {
var blinkingTextMC = getChildByName('blinkingTextMC');
blinkingTextMC.gotoAndStop(1);
}Für eine Demonstration sehen Sie die funktionierende Version von „Stopping blinking after a timeout“ (Stoppen des Blinkens nach einer zeitlichen Begrenzung). Die Quelle von „Stoppen des Blinkens nach einer zeitlichen Begrenzung“ steht zur Verfügung.
Für jedes Instanz von blinkendem Inhalt:
Starten Sie einen Kurzzeitmesser für 5 Sekunden zu Beginn des Blink-Effekts.
Stellen Sie fest, ob das Blinken aufgehört hat, wenn der Kurzzeitmesser abläuft.
Für jede Instanz des blinkenden Inhalts ist #2 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.