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.