accessibilité : flex - paris web - accueil · pdf fileflex : définition...

accessibilitéFlex

Stéphane Deschamps – Accessibilité du SI17 novembre 2007, Paris Web

copyright Groupe France Télécom – Orangetous droits réservés

l’accessibilitédans le GroupeFrance Télécom Orange

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

Flex ?c’est quoi ?



Flex par rapport à Flash

Flash = plugin d’animation

Flex

– basé sur Flash 9

– pour développeurs (Eclipse)



Flex : vue « Design »



Flex : vue « Source »



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);

quelques freins



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



Flex n’est pas universel






Flex = Flash 9

adoption pas immédiate

Flash inséré par Javascript

Cas Eolas

Firefox : intégration différente des plugins

Debian ?



Flex est très visuel






Qualités graphiques excellentes

« Philosophie du gris moyen »

Drag’n’drop

faut-il des équivalents ?

Règle WCAG

alternative accessible



Flex est pauvre en « ancres »






Pas de structures

titres ?(en HTML : h1, h2, …)

tableaux ?(en HTML : th, td, …)

listes ?(en HTML : ol, ul, …)

l’objet Accessibility



Accessibility : définition

Gère les allers-retours avec MSAA

Initialisation dans ActionScript

import flash.accessibility.Accessibility;

implicite en Flash



Accessibility : diagnostics

Test : assistance présente ?

Accessibility.active;

en AS2 : Accessibility.isActive()

renvoie vrai si une revue d’écran est détectée



Accessibility : notifications

Notifier systématiquement des changements

Accessibility.updateProperties();

Attention : pas de notifications en rafale !

l’objet accessibilityProperties



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



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.";



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

les règles de base



Compiler accessible

une préférencedans Eclipse

un paramètre dans flex-config.xml

<accessible>true</accessible>



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;



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>



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'" />



Cases à cocher, boutons radio

Obligatoire : intitulé (label)

<mx:CheckBox

id="hideEmail"

label="Cacher mon adresse mail"

selected="true"

/>

composants :accessibles oubloquants



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)



Moyennement accessibles(ou avec des aménagements)

Boutons liens (LinkButton)

Boîte de saisie numérique (NumericStepper)

Listes (HorizontalList, TileList)

Accordéon (Accordion)



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)



Pas encore testés

Vidéo (VideoDisplay)

méthodes de contournement



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



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.";

cas concret



Adaptation progressive d’une animation

1. état de base

2. strict minimum : structuration

3. produit fini : à la demande



É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



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



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

applications complexes



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.)



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 !

vu de l’utilisateur



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)

conclusion



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



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



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)

accessibilité : flex - paris web - accueil · pdf fileflex : définition...

Documents