accessibilitéFlex
Stéphane Deschamps – Accessibilité du SI17 novembre 2007, Paris Web
copyright Groupe France Télécom – Orangetous droits réservés
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
3 copyright Groupe France Télécom – Orangetous droits réservés
L’accessibilité chez France Telecom
Projet Accessibilité piloté par FT R&D depuis 1999
Objectif du projet :
Satisfaire les besoins de tous les clientsGénéralisation de la démarche de Design for all
Intégration des personnes handicapées dans l’entreprise
Décision niveau Groupe :
Accessibilité du web = priorité au niveau européen
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
5 copyright Groupe France Télécom – Orangetous droits réservés
Flex par rapport à Flash
Flash = plugin d’animation
Flex
– basé sur Flash 9
– pour développeurs (Eclipse)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
6 copyright Groupe France Télécom – Orangetous droits réservés
Flex : vue « Design »
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
7 copyright Groupe France Télécom – Orangetous droits réservés
Flex : vue « Source »
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
8 copyright Groupe France Télécom – Orangetous droits réservés
Flex : définition technique
MXML (Macromedia XML)<mx:Button id="btn" x="10" y="10" label="Ceci est un bouton cliquable." click="clic()"/>
ActionScript 3 : JavaScript fortement typé, proche de Java avec une couche de DOM
monParent.removeChild(monEnfant);
var tmpTI:TextInput = new TextInput();
if(maValeur != "") {
tmpTI.text = maValeur;
}
monParent.addChild(tmpTI);
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
10 copyright Groupe France Télécom – Orangetous droits réservés
Qu’est-ce que l’accessibilité ?définition de base
C’est la propriété d‘un produit ou service d’être utilisable par tous et dans tous les contextes
Rendre un produit ou service accessible, ce n’est pas :
réduire ses qualités (exemple : qualités graphiques d’un site Web)
créer un produit spécifique
Au contraire, c’est rendre ce produit plus riche
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
11 copyright Groupe France Télécom – Orangetous droits réservés
Flex n’est pas universel
C’est la propriété d‘un produit ou service d’être utilisable par tous et dans tous les contextes
Rendre un produit ou service accessible, ce n’est pas :
réduire ses qualités (exemple : qualités graphiques d’un site Web)
créer un produit spécifique
Au contraire, c’est rendre ce produit plus riche
Flex = Flash 9
adoption pas immédiate
Flash inséré par Javascript
Cas Eolas
Firefox : intégration différente des plugins
Debian ?
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
12 copyright Groupe France Télécom – Orangetous droits réservés
Flex est très visuel
C’est la propriété d‘un produit ou service d’être utilisable par tous et dans tous les contextes
Rendre un produit ou service accessible, ce n’est pas :
réduire ses qualités (exemple : qualités graphiques d’un site Web)
créer un produit spécifique
Au contraire, c’est rendre ce produit plus riche
Qualités graphiques excellentes
« Philosophie du gris moyen »
Drag’n’drop
faut-il des équivalents ?
Règle WCAG
alternative accessible
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
13 copyright Groupe France Télécom – Orangetous droits réservés
Flex est pauvre en « ancres »
C’est la propriété d‘un produit ou service d’être utilisable par tous et dans tous les contextes
Rendre un produit ou service accessible, ce n’est pas :
réduire ses qualités (exemple : qualités graphiques d’un site Web)
créer un produit spécifique
Au contraire, c’est rendre ce produit plus riche
Pas de structures
titres ?(en HTML : h1, h2, …)
tableaux ?(en HTML : th, td, …)
listes ?(en HTML : ol, ul, …)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
15 copyright Groupe France Télécom – Orangetous droits réservés
Accessibility : définition
Gère les allers-retours avec MSAA
Initialisation dans ActionScript
import flash.accessibility.Accessibility;
implicite en Flash
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
16 copyright Groupe France Télécom – Orangetous droits réservés
Accessibility : diagnostics
Test : assistance présente ?
Accessibility.active;
en AS2 : Accessibility.isActive()
renvoie vrai si une revue d’écran est détectée
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
17 copyright Groupe France Télécom – Orangetous droits réservés
Accessibility : notifications
Notifier systématiquement des changements
Accessibility.updateProperties();
Attention : pas de notifications en rafale !
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
19 copyright Groupe France Télécom – Orangetous droits réservés
Cet objet est une propriété de n’importe quel objet.
pas d’import ActionScript<mx:Button id="btn" label="ok" />
btn.accessibilityProperties.description = "Envoyer le formulaire de contact. ";
en AS2 : btn._accProps
accessibilityProperties : définition
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
20 copyright Groupe France Télécom – Orangetous droits réservés
accessibilityProperties : usage
Cacher un élément :btn.accessibilityProperties.silent = true;
Rendre plus verbeux :<mx:Button label="Rendre ce formulaire
accessible" click="rendreAccessible()"/>
btn.accessibilityProperties.description = "Ce formulaire utilise des champs incompatibles avec une synthèse vocale, cliquez ici pour le rendre accessible.";
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
21 copyright Groupe France Télécom – Orangetous droits réservés
accessibilityProperties : autres propriétés
Rendre tous les enfants silencieuxbtn.accessibilityProperties.forceSimple
Nommer un élément btn.accessibilityProperties.name
Affecter un raccourci clavierbtn.accessibilityProperties.shortcut
Ne pas étiqueter automatiquementbtn.accessibilityProperties.noAutoLabeling
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
23 copyright Groupe France Télécom – Orangetous droits réservés
Compiler accessible
une préférencedans Eclipse
un paramètre dans flex-config.xml
<accessible>true</accessible>
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
24 copyright Groupe France Télécom – Orangetous droits réservés
Rendre tous les composants lisibles
Boîtes d’alerte
// rendre le contenu de l'alert accessible
import mx.accessibility.AlertAccImpl;
AlertAccImpl.enableAccessibility();
Images verbeuses (voir plus loin)
À l’inverse : décoration silencieuse
btn.accessibilityProperties.silent = true;
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
25 copyright Groupe France Télécom – Orangetous droits réservés
Structurer le code MXML
Pas bien<mx:Label text="Nom :" x="10" width="75"
y="40" />
<mx:TextInput id="userName" y="38" right="10" left="90" />
Bien !<mx:FormItem label="Nom">
<mx:TextInput id="userName" />
</mx:FormItem>
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
26 copyright Groupe France Télécom – Orangetous droits réservés
Images : texte alternatif
Un tooltip (info-bulle)
<mx:Imagesource="assets/bestiolerose.jpg"toolTip="Une bestiole rose" />
Problème esthétique possible
S’appuyer sur la description accessible
<mx:Image id="noire" source="assets/bestiolenoire.jpg" creationComplete="noire.accessibilityProperties.description='Une bestiole noire'" />
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
27 copyright Groupe France Télécom – Orangetous droits réservés
Cases à cocher, boutons radio
Obligatoire : intitulé (label)
<mx:CheckBox
id="hideEmail"
label="Cacher mon adresse mail"
selected="true"
/>
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
29 copyright Groupe France Télécom – Orangetous droits réservés
Accessibles(peu ou pas d’effort)
Champs de saisie (TextArea, TextInput)
Cases à cocher (Checkbox)
Boutons radio (RadioButton)
Boutons (Button), Barre de bouton (ButtonBar)
Listes déroulantes (ComboBox)
Liste (List)
Table (DataGrid)
Vue en arbre (Tree)
Zones de texte (Label, Text)
Barre d’onglets (TabBar)
Vues (ViewStack)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
30 copyright Groupe France Télécom – Orangetous droits réservés
Moyennement accessibles(ou avec des aménagements)
Boutons liens (LinkButton)
Boîte de saisie numérique (NumericStepper)
Listes (HorizontalList, TileList)
Accordéon (Accordion)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
31 copyright Groupe France Télécom – Orangetous droits réservés
Pas accessibles
Palette de couleur (ColorPicker)
Choix de date (DateChooseret DateField)
Potentiomètres (HSlider, VSlider)
Boutons popup(PopupButton)
Barre de menu (MenuBar)
Barre de boutons-bascule (ToggleButtonBar)
Boutons de menu (PopUpMenuButton)
Éditeur de texte riche (RichTextEditor)
Graphes (AreaChart, BarChart, BubbleChart, CandlestickChart, ColumnChart, HLOCChart, LineChart, PieChart, PlotChart)
Barre de liens (LinkBar)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
32 copyright Groupe France Télécom – Orangetous droits réservés
Pas encore testés
Vidéo (VideoDisplay)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
34 copyright Groupe France Télécom – Orangetous droits réservés
Remplacement automatique
Mettre automatiquement des composants accessibles à la place des composants bloquants si une assistance est détectée.
mauvaise idée !par exemple ZoomText avec Jaws
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
35 copyright Groupe France Télécom – Orangetous droits réservés
Aménagement à la demande
Si une assistance est détectée
<mx:Button visible="false" label="Rendre ce formulaire accessible" click="rendreAccessible()"/>
ActionScript :btn.visible = true;
btn.accessibilityProperties.description = "Ce formulaire utilise des champs incompatibles avec une synthèse vocale, cliquez ici pour le rendre accessible.";
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
37 copyright Groupe France Télécom – Orangetous droits réservés
Adaptation progressive d’une animation
1. état de base
2. strict minimum : structuration
3. produit fini : à la demande
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
38 copyright Groupe France Télécom – Orangetous droits réservés
État de base
Pas de lien label/champ
Couleurs Flex par défaut : pas de contraste
« Pourquoi choisir un prix » : un bouton LinkButton pas repérable
Inutilisables au clavier ou avec Jaws
– « Prix maximal » : curseur (HSlider)
– « Date de départ » : date (DateField)
– « Nombre de personnes » : NumericStepper
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
39 copyright Groupe France Télécom – Orangetous droits réservés
Le strict minimum
Couleurs remaniées
Structure en champs de formulaire (FormField)
LinkButton transformé en Button
une info-bulle (toolTip) ajoutée sur le bouton « OK »
La touche « entrée » marche comme dans un formulaire traditionnel
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
40 copyright Groupe France Télécom – Orangetous droits réservés
Le produit fini : à la demande
Détection de revue d’écran : bouton de proposition d’aménagement
Remplacement de tous les éléments bloquants par des champs texte
Descriptions plus complètes + toolTips
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
42 copyright Groupe France Télécom – Orangetous droits réservés
Linéariser le contenu
Pas de titres, pas de liens, juste des boutons et des champs
Utiliser le tabIndex pour ordonner le contenu comme il faut
Tester !
1. Mon suivi conso
2. Détail de ma conso
3. Achats et abos multimédia
4. Dernière facturation : 30 décembre 2006
5. Analyse
(etc.)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
43 copyright Groupe France Télécom – Orangetous droits réservés
Cas particulier : Alert
Alert : boîte de dialogue simple
Mode formulaire : on ne lit que le bouton « OK »
en HTML toute la boîte est lue
Quitter le mode formulaire et revenir au mode curseur virtuel
Contraignant
accompagner l’utilisateur !
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
45 copyright Groupe France Télécom – Orangetous droits réservés
Accompagnement
En préambule à l’animation : prévenir
– « veuillez réactiver Flash le cas échéant »
– effort d’accessibilité
Fournir un mode d’emploi
– HTML ou téléchargeable
– expliquer les combinaisons de touches
(control+flèche bas au lieu de alt+flèche bas)
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
47 copyright Groupe France Télécom – Orangetous droits réservés
Intégrer les préconisations : avantages
Meilleure stabilité de la synthèse vocale
fréquemment les animations Flash « plantent » les synthèses vocales
L’application sera accessible nativement dans une certaine proportion (n%) sans avoir besoin de recourir à une version alternative.
Possibilité de faire une intégration hybride
en partie HTML, en partie Flex
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
48 copyright Groupe France Télécom – Orangetous droits réservés
Limites
Problèmes d’intégration de l’accessibilité
– limitent pour l’instant le déploiement des applications Flex
– certains composants ne sont pas accessibles
– intégration des préconisations d’accessibilitépas triviale, et donc coûteuse
Continuer à produire un code alternatif accessible en HTML pour chaque fonctionnalité qu’on n’aura pas pu rendre accessible
Paris Web 2007 – accessibilité : Flex – 17 novembre 2007Stéphane Deschamps
49 copyright Groupe France Télécom – Orangetous droits réservés
Appliquer les recommandations dès maintenant
Appliquer dès maintenant les préconisations
minimiser les intégrations de recommandations futures
Contact direct avec Adobe
remontée des problèmes
pris en compte dans les versions futures
Utiliser le plus possibles les structures Flex identifiées comme accessibles
en prévision des versions prochaines de revues d’écran (qui embarqueront sans doute une meilleure compatibilité à Flex)