Erstellen eine zugängliche animierte Präsentation in Flash, Adobe Developer Connection
Optimierung der Zugänglichkeit für Sehbehinderte
Wenn Sie zugänglich Flash-Präsentationen für Benutzer mit Behinderungen zu entwickeln, müssen Sie sicherstellen, dass der Inhalt der SWF-Datei eine angemessene Menge der Arbeit widmen kann durch Screenreader-Software gelesen werden. Wir führten die folgenden barrierefrei ausgestattet.
Lesereihenfolge
Browser aktiviert mit MSAA (Microsoft Active Accessibility) Software ermöglicht Bildschirm-Reader-Software innerhalb der Präsentation und ziehen Sie seinen Inhalt zu erreichen. Der Bildschirmleser scannt die SWF-Datei von der oberen linken Seite der Bühne und zieht alle Elemente, die es, einschließlich Textfelder, Schaltflächen und Movieclips findet. Dies wird die Lesereihenfolge genannt, aber im Gegensatz zu seinem Namen ist es nicht immer ergibt eine logischen links nach rechts um. Sie können dies durch Actionscript ändern verwenden und die Registerkarte Index Eigenschaft aller Elemente einstellen, die der Benutzer zugreifen möchten. Der Code, dies zu implementieren ist einfach, und es ist die gleiche Syntax in Actionscript 2 und 3:
access_txt.tabIndex = 1; header.title_txt.tabIndex = 2; header.logo_mc.tabIndex = 3;
Sie können Lücken in der Registerkarte Indexzahlen lassen. Dies kann eine nützliche Strategie sein, dass Sie Raum für Einzelteile lassen, die Sie später einfügen möchten vielleicht, wie ein expandierendes Menü.
Wenn Sie die Lesereihenfolge mit einem Screenreader testen, kann es Elemente, die lesen, dass Sie sich zu verstecken bevorzugen. Für diese Präsentation, versteckten wir uns auf das Textfeld namens slideNum_txt, die die aktuelle Folie Nummer 1/5 an der Unterseite neben dem Brotkrumennavigation angegeben. Der Bildschirmleser lesen Sie diesen Text aus, als „1 Strich 5.“
Sie können den folgenden Code verwenden, um Elemente aus der Lesereihenfolge zu entfernen:
Actionscript 2
slideNum_txt._accProps = new Object (); slideNum_txt._accProps.silent = true;
Actionscript 3
var accessProps: AccessibilityProperties = new AccessibilityProperties (); accessProps.silent = true; slideNum_txt.accessibilityProperties = accessProps;
Hinzufügen einer Begrüßungsnachricht für Screenreader
Zum Zeitpunkt des Schreibens dieses Artikels, gibt es nicht viele zugänglichen SWF-basierte Präsentationen im Web vor. Aus diesem Grunde ist es hilfreich, einen Screenreader Begrüßungsnachricht zu Ihrer Präsentation hinzufügen, die Screenreader-Nutzer versichert, dass die SWF-Datei vollständig zugänglich ist. Die Nachricht kann auch andere wichtige Informationen, die zu sehenden Benutzern auf einem Blick zur Verfügung steht, wie zum Beispiel der Seitenstruktur oder die Verfügbarkeit von Tastenkombinationen. Sie können den Nachrichtentext in einem Textfeld platzieren, die hinter dem Hintergrund oder der Seite des Kopf verborgen ist.
Für diese Präsentation, haben wir die folgende Meldung:
Seien Sie sicher, dass diese erfreuliche Nachricht eine Registerkarte Indexzahl von 1 zu geben, so dass es die erste Sache ist, dass der Bildschirmleser liest (siehe Abbildung 2).
Abbildung 2. Bildschirmlesebegrüßungsnachricht Text hinter der schwarzen Kopfleiste versteckt
Aktualisieren von Tasten mit Textäquivalente
In Flash können Sie Actionscript verwenden, um Text-Äquivalente zu Schaltflächen und Movieclips hinzufügen. Wenn eine Schaltfläche oder Movieclip ohne Text-äquivalent gelassen wird, wird der Bildschirmleser „Taste“ oder „Grafik“ ohne Beschreibung lesen. Daher ist es von entscheidender Bedeutung Textäquivalente für alle Schaltflächen und Movieclips zuweisen. Sie können Text-Äquivalente mit dem folgenden Actionscript-Code hinzu:
Actionscript 2
next_btn._accProps = new Object (); next_btn._accProps.name = # 034; Weiter # 034 ;;
var accessProps: AccessibilityProperties = new AccessibilityProperties (); accessProps.name = # 034; Weiter # 034 ;; next_btn.accessibilityProperties = accessProps;
Wenn mit Umschaltflächen arbeiten, wie zum Beispiel der Wiedergabe / Pause-Taste und die Ein- / Aus-Taste der Audio-Beschreibung ist es auch wichtig, den Zustand dieser Tasten zu belichten. Wir verwenden die Beschreibung Attribut, dies zu tun:
ad_btn._accProps = new Object (); ad_btn._accProps.name = # 034; Audio-Beschreibungen Ein, Aus # 034 ;; ad_btn._accProps.description = # 034; Audio-Beschreibungen sind aus # 034 ;;
Sobald Sie die Beschreibung auf den Umschaltflächen in ihren Handler zu ändern, rufen immer die Accessibility.updateProperties (); Verfahren um die Attribute zu aktualisieren.
Darüber hinaus ist es wichtig, Beschreibungen für alle Bilder hinzufügen, auch diejenigen, die nicht direkt relevant sind, aber die Stimmung oder in der Atmosphäre der Präsentation hinzufügen. Wir konnten übersprungen haben die Beschreibung von Herrn Erreichbar in dieser Präsentation hinzufügen, sondern durch einen Text-äquivalent Hinzufügen der Abbildung zu beschreiben, verbessern wir die Erfahrung für den Anwender:
mraccess_mc._accProps = new Object (); mraccess_mc._accProps.name = # 034; Eine illustrierte Präsentator auf der linken Seite des Bildschirms steht. Er trägt runde Brille, einen schwarzen Anzug und eine rote Krawatte. # 034 ;;
Es ist in Ordnung Farbbeschreibungen zu Textäquivalente hinzuzufügen. Wir zeigen in der Regel auch für den Benutzer, ob ein Bild eine Darstellung ist, Animation oder digitale Foto
Die Audio-Beschreibungen Schaltfläche in der Navigationsleiste setzt einen Toggle-Wert. Wenn auf true gesetzt. die Audiodeskription spielt in der Timeline. Wenn auf false gesetzt. die Abspielposition überspringt er. Wir haben auch einen Soundeffekt zu dieser Umschaltknopf, hörbar zu machen, wenn Audio-Beschreibungen aktiviert sind (siehe Abbildung 3).
Abbildung 3. Audio-Beschreibungen von einer weiblichen Stimme lesen mit dem männlichen Präsentation Stimme, um den Kontrast
Hinweis: Der Unterschied in den beiden Stimmen hilft sehbehinderten Benutzer machen den Unterschied zwischen der Darstellung und der Beschreibung Narrationen.
In Situationen, in denen Sie nicht in der Lage sind, die Sprachspur in einer Präsentation zu zerlegen, können Sie auch einen beschreibenden Text-Äquivalent hinzuzufügen. In diesem Szenario können Sie die Sprachspur nehmen und die Beschreibungen zwischen den entsprechenden Zeilen einfügen. Die Beschreibungen können als separate Textdatei oder in einem versteckten Textfeld am Ende der Präsentation aufgenommen werden.
Tipps zur besseren Erfahrungen für alle Benutzer bereitstellt
Dieser Abschnitt enthält einige vorgeschlagen Best Practices, die Ihnen helfen, Ihr Projekt Zugänglichkeit Ziele zu erreichen. In vielen Fällen kleinere Änderungen an dem Code und Aktualisierungen der Navigationselemente kann einen wesentlichen Unterschied machen, wie der Inhalt angezeigt wird und wie gut es zugegriffen werden.
Mit Hilfe der Methode Moviecliploader anstelle von Loadmovie
Je nach Art der Präsentation, können Sie die Loadmovie-Methode verwenden, in verschiedenen Teilen der Präsentation zu laden. Es ist wichtig, sich daran zu erinnern, dass, wenn Sie irgendwelche Textäquivalente zum Lader Movieclip zugewiesen haben, werden alle Textäquivalente zu diesem Movieclip zugewiesen werden gelöscht, wenn es geladen wird. Aus diesem Grunde ist es eine bewährte Methode, um immer die aktuelle Moviecliploader-Methode zu verwenden.
Zum Beispiel, anstatt diese Syntax mit einer SWF-Datei zu laden:
var mcListener: Object = new Object (); mclListener.onLoadComplete = function () < // assign alt text here when finished loading > var loader: Moviecliploader = new Moviecliploader (); loader.addListener (mclListener); Loader.loadClip (# 034; # 034 ;, external.swf holder_mc);
In dieser Präsentation haben wir uns für die Inhalte des Halters Movieclip nicht zugänglich, bis der letzten Folie zu machen, die Links und andere Informationen enthält. Alle von der Rutsche Informationen sind in den Audio-Beschreibungen geäußert, und wir vom Screenreader gelesen werden nicht entgegenstehende Textfelder wollen. Wir benutzten die force Attribut der Bildschirmleser machen den Inhalt der Folien ignorieren, indem sie auf true setzen. Auf der letzten Folie haben wir es falsch. Hier ist ein Beispiel für den Code:
holder_mc._accProps = new Object (); holder_mc._accProps.forceSimple = true;
In den letzten Dias von Teil 5 der Präsentation, wechselten wir die force zurück auf false zuschreiben. Wir haben auch Tab-Indizes auf die Elemente in dieser Folie, die aus dem letzten Reiter Index der Hauptschale Fortsetzung. Dieser Ansatz ermöglicht es den Screenreader den Inhalt der letzten Folie für den Zugriff auf und die endgültige Ressourceninformationen ausgelesen.
HTML-Links in Flash Textfelder
In Flash können Sie einen HTML-Link durch einen Teil oder den gesamten Text in einem dynamischen Textfeld auswählen und Hinzufügen der gewünschten Pfad hinzufügen. Ein Screenreader kann aber nicht diese Art von Textlinks verstehen. Um sie zugänglich zu machen, erstellen Sie separate Tasten für jede dieser Textlinks. Wenn der Text Teil eines CSS-formatierten Textfeldes ist, dann können Sie auch separate versteckte Tasten am Ende des Textes hinzufügen, die von einem Screenreader zugänglich sind, während die Textlinks innerhalb des Textes der Präsentation zu verlassen (siehe Abbildung 4 ).
Abbildung 4. HTML-Links hinzugefügt als separates Schaltflächen in der Präsentation statt Inline-Textlinks
Mit der rechten Maustaste im Menü um es zu vergrößern
Nicht alle sehbehinderte Benutzer verwenden Screenreadern Webinhalte zuzugreifen; viele sehbehinderte Benutzer verwenden, um eine Bildschirmlupe. Aus diesem Grunde ist es wichtig, nicht die Rechtsklick-Menü Zoom-Funktion zu deaktivieren, da diese Benutzer in nativ zoomen und aus dem SWF-Inhalt.
Actionscript 3
Nach diesen Code Hinzufügen rechten Maustaste auf den SWF-Inhalt in einem Browser die Änderungen an der Flash Player-Menü zu sehen, angezeigt (siehe Abbildung 5).
Abbildung 5. Zoom-Funktionen sind im Kontextmenü aktiviert
Actionscript 3
stage.addEventListener (KeyboardEvent.KEY_DOWN, checkTab); stage.addEventListener (MouseEvent.MOUSE_MOVE, checkMouse); // überprüfen, um zu sehen, ob der Benutzer öffentliche Funktion checkTab ist Tabbing (event: Keyboardevent)< tabON = true; > // überprüfen, um zu sehen, ob die Maus public function checkMouse (event: Mouseevent) bewegt wird,< tabON = false; >
Überlegungen für hörgeschädigte Benutzer
Alle akustischen und relevante Audio-Inhalte sollten für Nutzer mit eingeschränktem Hörvermögen geuntertitelt werden. Wir entschieden uns für offene Untertitelung hinzuzufügen, die standardmäßig in unserer Präsentation auf dem Bildschirm erscheint. Alle visuellen Lerner (sowohl diejenigen, die aus dem Audio gedreht und diejenigen, die hörgeschädigt) profitieren von Beschriftungen auf dem Bildschirm zu sehen.
Hinzufügen von Bildunterschriften
Abbildung 8. Präsentation mit Bildunterschriften aktiviert
Abbildung 9. Präsentation mit Bildunterschriften ausgeschaltet
Die auf die Lautsprecher / Aus-Taste bleibt auf dem Bildschirm zu allen Zeiten. Die verschiedenen Zustände dieser Taste Alarm Benutzer, die hörgeschädigt sind, und diejenigen, die ihre Lautsprecher ausgeschaltet haben, dass es Audio-Wiedergabe ist.
Hinzufügen voll, Bildschirmtext Vorteile hörgeschädigten Benutzer, und es können auch andere Lernende profitieren. dem Benutzer die volle Kontrolle über die Audio-und machen die Präsentation segmentiert und benutzergesteuerte, ist die Lernerfahrung effektiver für alle verschiedenen Arten von Benutzern, indem sie. Visuelle Lerntypen können das Audio ausgeschaltet und in ihrem eigenen Tempo lesen, während auditiv Lernenden können die Beschriftungen ausschalten und auf das Audio hören, während mit der Präsentation folgen zusammen.
Mit voll, On-Screen-Hilfetext kann auch alle Benutzer den Inhalt besser zu absorbieren, weil sie es wieder lesen können, nachdem ein Segment abgespielt ist. Daher empfehlen wir, die auf dem Bildschirm angezeigten Text einen wichtigen Teil Ihrer E-Learning-Präsentationen.
Wo geht hier
Überprüfen Sie die folgenden Online-Ressourcen weiter zu erforschen: