Création d'une présentation animée accessible en Flash, Adobe Developer Connection
Optimisation de l'accessibilité pour les utilisateurs ayant une déficience visuelle
Lorsque vous développez des présentations Flash accessibles pour les utilisateurs handicapés, vous devez consacrer une bonne partie du travail à faire en sorte que le contenu de votre fichier SWF peut être lu par un logiciel de lecture d'écran. Nous avons mis les fonctionnalités d'accessibilité suivantes.
L'ordre de lecture
Les navigateurs compatibles avec le logiciel MSAA (Microsoft Active Accessibility) permettent un logiciel de lecture d'écran pour atteindre l'intérieur de la présentation et tirer son contenu. Le lecteur d'écran scanne le fichier SWF à partir du côté supérieur gauche de la scène et sort tous les éléments qu'il trouve, y compris les champs de texte, des boutons et des clips vidéo. On appelle cela l'ordre de lecture, mais contrairement à son nom, il n'a pas toujours le résultat dans un ordre logique à droite à gauche. Vous pouvez changer cela en utilisant ActionScript et définir la propriété d'index de tabulation de tous les éléments que vous souhaitez que l'utilisateur d'accéder. Le code pour la mise en œuvre est simple, et il est la même syntaxe dans ActionScript 2 et 3:
access_txt.tabIndex = 1; header.title_txt.tabIndex = 2; header.logo_mc.tabIndex = 3;
Vous pouvez laisser des espaces dans les numéros d'index de tabulation. Cela peut être une stratégie utile qui vous permet de laisser un espace pour les articles que vous voudrez peut-être insérer plus tard, comme un menu en expansion.
Lorsque vous testez l'ordre de lecture avec un lecteur d'écran, il pourrait y avoir des éléments à lire que vous préférez cacher. Pour cette présentation, nous nous cachions le champ de texte nommé slideNum_txt, qui indique le numéro de la diapositive en cours 1/5 en bas à côté de la navigation fil d'Ariane. Le lecteur d'écran lire ce texte comme « 1 barre oblique 5. »
Vous pouvez utiliser le code suivant pour supprimer des éléments de l'ordre de lecture:
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;
Ajout d'un message de bienvenue pour les lecteurs d'écran
Au moment où nous écrivons ces lignes, il n'y a pas beaucoup accessibles présentations sur SWF sur le Web encore. Pour cette raison, il est utile d'ajouter un lecteur d'écran message de bienvenue à votre présentation, ce qui rassure les utilisateurs de lecteurs d'écran que le fichier SWF est entièrement accessible. Le message peut également inclure d'autres informations importantes qui sont accessibles aux utilisateurs voyants un coup d'oeil, comme la structure de la page ou la disponibilité des raccourcis clavier. Vous pouvez placer le texte du message dans un champ de texte qui se cache derrière l'arrière-plan ou en-tête de la page.
Pour cette présentation, nous avons ajouté le message suivant:
Assurez-vous de donner ce message de bienvenue un numéro d'index de tabulation de 1 pour qu'il soit la première chose que le lecteur d'écran lit (voir la figure 2).
Figure 2. Lecteur d'écran texte du message de bienvenue caché derrière la barre d'en-tête noir
Mise à jour des boutons avec des équivalents texte
Dans Flash, vous pouvez utiliser ActionScript pour ajouter des équivalents texte aux boutons et des clips vidéo. Si un bouton ou un clip est laissé sans équivalent texte, le lecteur d'écran affiche « bouton » ou « graphique » sans aucune description. Il est donc essentiel d'attribuer les équivalents de texte à tous les boutons et des clips vidéo. Vous pouvez ajouter des équivalents texte avec le code ActionScript suivant:
ActionScript 2
next_btn._accProps = new Object (); next_btn._accProps.name = # 034; # 034 ;; suivante
var accessProps: AccessibilityProperties = new AccessibilityProperties (); accessProps.name = # 034; # 034 ;; suivante next_btn.accessibilityProperties = accessProps;
Lorsque vous travaillez avec des boutons à bascule, comme la touche de lecture / pause et sur le bouton marche / arrêt de la description audio, il est également important d'exposer l'état de ces boutons. Nous avons utilisé attribut la description pour ce faire:
ad_btn._accProps = new Object (); ad_btn._accProps.name = # 034; Description audio On, Off # 034 ;; ad_btn._accProps.description = # 034; Description audio sont off # 034 ;;
Une fois que vous modifiez la description sur les boutons à bascule à l'intérieur de leurs gestionnaires, appelez toujours les Accessibility.updateProperties (); Procédé pour mettre à jour les attributs.
De plus, il est essentiel d'ajouter des descriptions pour toutes les images, même celles qui ne sont pas directement pertinents, mais mettre l'ambiance ou ajouter à l'atmosphère de la présentation. Nous aurions pu ajouter sautée la description de M. Accessible dans cette présentation, mais en ajoutant un équivalent texte pour décrire l'illustration, nous avons amélioré l'expérience pour l'utilisateur:
mraccess_mc._accProps = new Object (); mraccess_mc._accProps.name = # 034; Un présentateur illustré est debout sur le côté gauche de l'écran. Il porte des lunettes rondes, un costume noir et une cravate rouge. # 034 ;;
Il est bien d'ajouter des descriptions de couleurs aux équivalents texte. Nous avons l'habitude également indiquer à l'utilisateur si une image est une illustration, animation, ou la photo numérique
Le bouton description audio dans la barre de navigation définit une valeur de bascule. Lorsque la valeur true. la description audio joue dans la Timeline. Lorsque la valeur false. la tête de lecture, il saute. Nous avons également ajouté un effet sonore à ce bouton à bascule, ce qui rend audible lorsque les descriptions audio sont activées (voir Figure 3).
Figure 3. Description audio lus par une voix féminine en contraste avec la voix de présentation mâle
Note: La différence entre les deux voix permet aux utilisateurs ayant une déficience visuelle font la distinction entre la présentation et les narrations de description.
Dans les situations où vous ne parvenez pas à diviser la piste vocale dans une présentation, vous pouvez également ajouter un équivalent texte descriptif. Dans ce scénario, vous pouvez prendre la piste vocale et insérer les descriptions entre les lignes appropriées. Les descriptions peuvent être incorporées dans un fichier texte séparé ou dans un champ de texte caché à la fin de la présentation.
Conseils pour offrir de meilleures expériences pour tous les utilisateurs
Cette section offre certaines des meilleures pratiques proposées qui peuvent vous aider à atteindre votre objectifs d'accessibilité du projet. Dans de nombreux cas, des modifications mineures au code et mises à jour des éléments de navigation peuvent faire une différence significative dans la façon dont le contenu est affiché et comment il peut être consulté.
En utilisant la méthode MovieClipLoader au lieu de LoadMovie
En fonction de la nature de votre présentation, vous pouvez utiliser la méthode loadMovie pour charger dans différentes parties de la présentation. Il est important de se rappeler que si vous avez des équivalents de texte attribués au chargeur clip, sont effacés des équivalents de texte affecté à ce clip lors de son chargement. Pour cette raison, il est préférable d'utiliser toujours la méthode MovieClipLoader plus récente.
Par exemple, plutôt que d'utiliser cette syntaxe pour charger un fichier SWF:
var mcListener: Object = new Object (); mclListener.onLoadComplete = function () < // assign alt text here when finished loading > chargeur var: MovieClipLoader = new MovieClipLoader (); loader.addListener (mclListener); Loader.loadClip (# 034; external.swf # 034 ;, holder_mc);
Dans cette présentation, nous avons choisi de rendre le contenu du clip de support inaccessible jusqu'à ce que la dernière diapositive, qui contient des liens et d'autres informations. Toutes les informations de diapositives est exprimée dans les descriptions audio, et nous ne voulions pas de champs de texte en conflit soient lus par le lecteur d'écran. Nous avons utilisé les forceSimple attribut pour rendre le lecteur d'écran ignorer le contenu des diapositives en mettant à true. Sur la dernière diapositive nous avons mis à faux. Voici un exemple du code:
holder_mc._accProps = new Object (); holder_mc._accProps.forceSimple = true;
Dans les dernières diapositives de la partie 5 de la présentation, nous avons changé les forceSimple attribuent revenir à faux. Nous avons également ajouté des indices de l'onglet des éléments de cette diapositive qui a continué à partir du dernier index de tabulation de la coque principale. Cette approche permet au lecteur d'écran pour accéder au contenu de la dernière diapositive et lire les informations de dernière ressource.
liens HTML dans les champs de texte Flash
Dans Flash, vous pouvez ajouter un lien HTML en sélectionnant tout ou partie du texte dans un champ de texte dynamique et en ajoutant la trajectoire souhaitée. Cependant, un lecteur d'écran, ne peut pas comprendre ces types de liens de texte. Pour les rendre accessibles, créer des boutons séparés pour chacun de ces liens texte. Si le texte fait partie d'un champ de texte mis en forme CSS, vous pouvez également ajouter des boutons séparés cachés à la fin du texte qui sont accessibles par un lecteur d'écran, tout en laissant les liens texte à l'intérieur du texte de la présentation (voir la figure 4 ).
Figure 4. liens HTML ajoutés sous forme de boutons séparés dans la présentation plutôt que d'utiliser des liens texte inline
En utilisant le menu contextuel pour zoomer
Pas tous les utilisateurs ayant une déficience visuelle utilisent des lecteurs d'écran pour accéder au contenu Web; de nombreux utilisateurs basse vision utilisent une loupe d'écran. Pour cette raison, il est important de ne pas désactiver la fonction de menu de zoom clic droit parce que cela permet aux utilisateurs de zoomer en mode natif dans et hors du contenu SWF.
ActionScript 3
Après avoir ajouté ce code, cliquez droit sur le contenu SWF dans un navigateur pour voir les changements au menu Flash Player affiché (voir Figure 5).
Figure 5. Caractéristiques de zoom sont activés dans le menu contextuel
ActionScript 3
stage.addEventListener (KeyboardEvent.KEY_DOWN, checkTab); stage.addEventListener (MouseEvent.MOUSE_MOVE, checkMouse); // vérifier si l'utilisateur est fonction publique checkTab touche de tabulation (event: KeyboardEvent)< tabON = true; > // vérifier si la souris est déplacée la fonction publique checkMouse (event: MouseEvent)< tabON = false; >
Considérations pour les utilisateurs malentendants
Tout le contenu audio et sonore pertinentes doivent être sous-titrés pour les utilisateurs ayant une déficience auditive. Nous avons choisi d'ajouter le sous-titrage ouvert, qui apparaît à l'écran par défaut, à notre présentation. Tous les apprenants visuels (à la fois ceux qui éteint l'audio et ceux qui sont malentendants) bénéficient de voir des sous-titres à l'écran.
Ajout de légendes
Figure 8. Présentation des légendes activée
Figure 9. Présentation des sous-titres désactivée
Le bouton marche / arrêt du haut-parleur reste à l'écran à tout moment. Les différents états de cet utilisateur d'alerte bouton qui sont malentendants, et ceux qui ont leurs haut-parleurs éteints, qu'il ya lecture audio.
Ajout d'avantages, texte à l'écran des utilisateurs malentendants, et il peut également profiter à d'autres apprenants. En donnant à l'utilisateur un contrôle total sur l'audio et de faire la présentation segmentée et axée sur l'utilisateur, l'expérience d'apprentissage est plus efficace pour tous les différents types d'utilisateurs. Les apprenants visuels peuvent désactiver et lire l'audio à leur propre rythme, alors que les apprenants auditifs peuvent désactiver les sous-titres et écouter l'audio tout en suivant la présentation.
Avoir plein texte à l'écran peut aussi aider tous les utilisateurs absorbent mieux le contenu, car ils peuvent le lire à nouveau après un segment a fini de jouer. Par conséquent, il est recommandé de rendre le texte à l'écran une partie importante de vos présentations e-learning.
Où aller en partant d'ici
Passez en revue les ressources en ligne suivantes à la recherche de plus: