les principales actions chez Orange pour industrialiser l'accessibilité numérique : Outils, méthodes, recommandations, Boosted, initiative open source accessibilité 23ième Séminaire GTA AccessiWeb 29 septembre 2016

1. 1 Orange
Accessibilité numérique
et industrialisation
@Orange
Vincent Aniort, expert accessibilité numérique
23ième séminaire AccessiWeb, 28/09/2016

2. 2 Orange
Sommaire
1. Qui sommes-nous ?
2. Recommandations, méthodologies et formations
3. Boosted
4. Outils de tests
5. OSAi, initiative open source accessibilité

3. 3 Orange
Qui sommes nous ?

4. 4 Orange
EASE : qui sommes nous?
• Confort +
• SARA
• OSAi
• recommandations
• framework de
développement
• automatisation des tests
• audits et livraison de
solutions
• sensibilisation et
formations
• mDAN
Support aux
projets et
formation
Méthodes et
outils
Innovation
Partenariat,
réglementation et
normalisation

5. 5 Orange
Recommandations, méthodologies
et formations

6. 6 Orange
Méthodologie d’audit
Audit technique
WCAG 2 AA
Tests utilisateurs
Audit complet
Phase exploratoire
combine technique
et vue utilisateur, max 2h
Compte-rendu
Réunion de qualification
Que lorsqu’unniveauminimal
d’accessibilité estatteintet que les
parcourssontdéfinis
Interlocuteurstechniques
identifiés
Codedisponible
Vérificationdes pointsdéfaillants
Labelou
Pagededéclarationd’accessibilité
Design Clinic
Maquettes fournies

7. 7 Orange
- Critères iOS
- Recommandations techniques iOS
- Guide d’utilisation de VoiceOver
- Critères Android
- Recommandations techniques Android
- Guide d’utilisation de Talkback
Documents et recommandations Web et mobile
http://a11y-guidelines.orange.com : un site de recommandations à usage des projets
- Critères fondamentaux,
version technique et non technique
- Des exemples de mise en oeuvre
- Guide d’utilisation des outils (Jaws et NVDA, outils
de tests…)
Mobile
La synthèse et la simplification par Orange facilitent l’acceptation par le projet !
Web

8. 8 Orange
Démonstrateur d’Accessibilité Numérique sur mobile (mDAN)
Ce démonstrateur est une application mobile qui décrit les règles et recommandations pour
développer des apps mobiles accessibles. Elle est disponible sous Android et iOS.
Contient :
 les règles d’accessibilité mobile (images, couleurs, alternatives textuelles…) avec des
exemples
 les options d’accessibilité (agrandissement des caractères, augmentation des contrastes,
zoom, inversion des couleurs…)
 un guide pour les développeurs
 l’accessibilité chez Orange
Publication Open Source à venir (octobre 2016)

9. 9 Orange
Formations accessibilité pour (presque) tous les métiers
• Sensibilisation à l'accessibilité numérique (tout public)
• Principales exigences d’accessibilité mobile et web , et comment les tester (CP, PO, concepteur, qualifieur)
• Formation à l’accessibilité pour les développeurs apps mobiles et web (développeur)
• Formation PDF, Word ou Powerpoint (tout public, communicant, rédacteurs)
• Formation pushmail, vidéo (tout public, communicant, rédacteur)
• Rédaction accessible pour le web (rédacteur, communicant)
• Conception des interfaces accessibles mobiles et web (concepteur, ergonomes, UX designer)
Plusieurs modes d’apprentissage sont utilisés : présentiel, vidéo conférence, téléconférence, e-learning…

10. 10 Orange
Constats
 rendre autonome les acteurs du projet
 libérer les experts des bases pour se concentrer sur des problèmes complexes
 favoriser une meilleure appropriation et compréhension des aspects techniques
 pour être efficace il faut utiliser tous les moyens à disposition
(méthodologies, recommandations et formations)
 nécessité d’enrichissements et d’évolutions réguliers
 manque de formation initiale des développeurs, turn-over…
Il faut donc former massivement des équipes entières : 300 dév. en 2015, >500 dév. en 2016
Mais pour s’assurer de la mise en pratique de l’accessibilité, il faut fournir des outils

11. 12 Orange
BOOSTED
Des composants open source prêts à l’usage pour construire des IHMs chartées, accessibles et responsive web
design basés sur Bootstrap
http://boosted.orange.com/

12. 13 Orange
Responsive design & Web accessible
Responsive framework
• Open source
• Communauté importante
• Bon niveau d’accessibilité
• Documentation importante
Fork de Bootstrap
• Composants spécifiques Orange
• À la charte Orange
• Amélioration du niveau d’accessibilité
• Documentation des composants spécifiques
• Open source
Bootstrap
Boosted

13. 14 Orange
L’open source a changé le contexte d’utilisation de Boosted
Share
Use
Contribute
Pull
request
Share
Créé et maintenu par la core team
Synchronisé avec les évolutions de Bootstrap
Use
Utilisé en l’état par des projets
Contribute
Améliorations proposées par des projets
Pull request
Soumission par des projets
Accessibilité validée par la core team

14. 15 Orange
Constats
100 projets en interne Orange utilisent Boosted !
 Meilleure prise en compte des bases de l’accessibilité
 Les experts se focalisent sur des tâches de haut niveau
 Autonomisation des équipes projets (acteurs des évolutions)
 Outil pivot de la communication entre Concepteurs & Développeurs (Axure , Creative
Suite)
 Une phase d’apprentissage pour les développeurs (Bootstrap)
 Des demandes nombreuses d’évolutions et de nouveaux composants
 L’obligation de suivre rapidement les évolutions de Bootstrap
Boosted
Développeur
DesignerBrand

15. 16 Orange
Outils de tests

16. 17 Orange
Tests d’accessibilité en intégration continu
(*) Qualité de code :
— htmllint, csslint, eslint
Tests spécifiques :
— bootlint, lesslint ou scsslint
Optimisation des performances :
— concaténation, minification, uglification...
Tests d’accessibilité :
— aXe core de Deque
(**) On est capable de faire tourner Axe dans l’environnement NodeJS avec Jenkins sur une plateforme de développement
continu, donc Axe via Jenkins peut tourner pour n’importe quelle technologie (Java, PHP…)
• environnement NodeJS
(PhantomJS, CasperJS)
• enregistement des sources
• identification des erreurs
d’accessiblité dans la page
• à destination du développeur
• tests d’accessibilité du code interprété en continu
• tests intégrés dans une chaîne de tests de bout en bout de qualité du code (*)
• solution utilisable pour n’importe quelle technologie (**)

17. 18 Orange
Pa11y Dashboard : audit de site
• Permet la remontée d’indicateurs sur des sites (gestion macro de l’accessibilité)
• Basé sur Pa11y (fork) qui teste l’accessibilité avec html code sniffer
• Nos apports
• ajout de Axe core
• dédoublons des tests
• ajout de la fonction crawl à partir d’une URL de base (plusieurs centaines de pages)
• au niveau technique : injection dans navigateur headless, interprétation des résultats : phantomJS ajout
casperJS (screenshoot, sauvegarde des sources) et spookyJS (piloter casper depuis NodeJS)
• Future publication open source

18. 19 Orange
Constats
 Il nous faut des outils différents pour des besoins différents
 Il manque un outillage de tests clé en main pour valider le niveau d’accessibilité
et donc rendre autonome les développeurs et les autres acteurs projets
 Il faut avoir toujours des jeux de tests cohérents et reproductibles dans toute la
chaine (même jeu de test et même résultat)
 Il est aussi nécessaire de pouvoir observer l’amélioration dans le temps d’un site
ou d’un ensemble de sites
 Il faut tester, toujours tester, le plus tôt possible, par morceaux, sans oublier les
tests utilisateurs

19. 20 Orange
L’initiative Open Source
(OSAi)

20. 21 Orange
profiter du modèle de travail de l’open source
collaborationinnovation
dans le cadre d’un consortium de l’open source
réduire les CAPEX
formats et APIs ouverts
contrôler les roadmapscommunauté
Open Source Accessibility initiative
lobbying
événementsreprésentation
expérience
outils matures
forum neutre
partage de compétences

21. 22 Orange
Une initiative annoncée au mois de mai
communiqué de presse
https://www.ow2.org/bin/download/Press_Releases/OW2_announces_new_open_source_acc
essibility_initiative/PR-1605-Accessibility-Initiative-v8.1.pdf

22. 23 Orange
Co-construction démarrée
participants
• France
• Italie
• USA
… et vous ?
Direction interministérielle du numérique et du
système d'information et de communication de
l'État
DINSIC
Support du gourvernement
membre
fondateur
International
projets identifiés
domaines de collaboration
 Référentiels
 Outils de mesure
 Formation
 Ressources de communication
 Outils de développement
 Interface utilisateur
 Navigation et géolocalisation
https://www.ow2.org/bin/view/OSAi/

23. 24 Orange
Constats
 L’initiative se met en place, d’importants acteurs sont présents d’autres doivent
arriver
 Les projets en collaboration sont à démarrer

24. 25 Orange
Conclusion

25. 26 Orange
Conclusion
 Il faut rendre autonome les acteurs projets
 l’accessibilité ne doit pas être une affaire uniquement de spécialistes
 l’outillage est un facteur important d’autonomisation
 L’accessibilité doit s’inscrire comme un indispensable dans tous les projets
 l’accessibilité concerne tous les acteurs : fournisseurs, acheteurs; chef de produits, designers,
ergonomes, développeurs, testeurs, décideurs, sponsors…
 elle est décrite dans les exigences et le système qualité au même titre que la sécurité, l’exploitabilité…
 L’accessibilité numérique est encore insuffisamment connue et les solutions « de
masse » sont à construire
Nous croyons à l’open source, la co-construction et au partage,
par exemple via l’OSAi

26. 27 Orange
Merci,
Des questions ?

27. 28 Interne Orange
Palette de couleur
RVB
80/190/135
RVB
145/100/205
Couleurs secondaires
RVB
75/180/230
RVB
255/220/0
RVB
255/180/230
Couleurs de base
RVB
214/214/214
RVB
255/102/0
RVB
143/143/143
RVB
89/89/89
RVB
255/255/255
RVB
0/0/0