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.