1 Orange
Accessibilité numérique
et industrialisation
@Orange
Vincent Aniort, expert accessibilité numérique
23ième sémina...
2 Orange
Sommaire
1. Qui sommes-nous ?
2. Recommandations, méthodologies et formations
3. Boosted
4. Outils de tests
5. OS...
3 Orange
Qui sommes nous ?
4 Orange
EASE : qui sommes nous?
• Confort +
• SARA
• OSAi
• recommandations
• framework de
développement
• automatisation...
5 Orange
Recommandations, méthodologies
et formations
6 Orange
Méthodologie d’audit
Audit technique
WCAG 2 AA
Tests utilisateurs
Audit complet
Phase exploratoire
combine techni...
7 Orange
- Critères iOS
- Recommandations techniques iOS
- Guide d’utilisation de VoiceOver
- Critères Android
- Recommand...
8 Orange
Démonstrateur d’Accessibilité Numérique sur mobile (mDAN)
Ce démonstrateur est une application mobile qui décrit ...
9 Orange
Formations accessibilité pour (presque) tous les métiers
• Sensibilisation à l'accessibilité numérique (tout publ...
10 Orange
Constats
 rendre autonome les acteurs du projet
 libérer les experts des bases pour se concentrer sur des prob...
12 Orange
BOOSTED
Des composants open source prêts à l’usage pour construire des IHMs chartées, accessibles et responsive ...
13 Orange
Responsive design & Web accessible
Responsive framework
• Open source
• Communauté importante
• Bon niveau d’acc...
14 Orange
L’open source a changé le contexte d’utilisation de Boosted
Share
Use
Contribute
Pull
request
Share
Créé et main...
15 Orange
Constats
100 projets en interne Orange utilisent Boosted !
 Meilleure prise en compte des bases de l’accessibil...
16 Orange
Outils de tests
17 Orange
Tests d’accessibilité en intégration continu
(*) Qualité de code :
— htmllint, csslint, eslint
Tests spécifiques...
18 Orange
Pa11y Dashboard : audit de site
• Permet la remontée d’indicateurs sur des sites (gestion macro de l’accessibili...
19 Orange
Constats
 Il nous faut des outils différents pour des besoins différents
 Il manque un outillage de tests clé ...
20 Orange
L’initiative Open Source
(OSAi)
21 Orange
profiter du modèle de travail de l’open source
collaborationinnovation
dans le cadre d’un consortium de l’open s...
22 Orange
Une initiative annoncée au mois de mai
communiqué de presse
https://www.ow2.org/bin/download/Press_Releases/OW2_...
23 Orange
Co-construction démarrée
participants
• France
• Italie
• USA
… et vous ?
Direction interministérielle du numéri...
24 Orange
Constats
 L’initiative se met en place, d’importants acteurs sont présents d’autres doivent
arriver
 Les proje...
25 Orange
Conclusion
26 Orange
Conclusion
 Il faut rendre autonome les acteurs projets
 l’accessibilité ne doit pas être une affaire uniqueme...
27 Orange
Merci,
Des questions ?
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
...
Prochain SlideShare
Chargement dans…5
×

Accessibilité numérique et Industrialisation @Orange

407 vues

Publié le

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

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
407
Sur SlideShare
0
Issues des intégrations
0
Intégrations
23
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 3
  • pas d’obligation de mise en a11y sauf pour appli RH (congés com) appli permettant de classiquement tenir son poste (poste info, tééphonie, réservation salle, conf tel…) et appli déjà accessible ou avec un TH identifié, pour les autres sur demande du proje
  • 5
  • 6
  • sensib, test, reco et formation, outil pédagogique, on applique ce qu’on dit et on peu voir avant après
  • travail de fond indispensable car la formatin initiale ne comporte généralement pas d ’A11y
  • culture d’entreprise tout le monde et massivement par service de dev
  • 11
  • >10 composants spécifiques : nav, footer, tuile…
    boosted open source comme son papa
    faciliter le travail des dév
  • base solide, reste le compliqué et là on intervient, les projet font de l’accessiiblité sans même le savoir
    boosted outil de maquettage html mais pas que
  • 16
  • pour les dev lors des commits
    avec Jenkins permet à tous de voir le niveau et corriger
  • pour nous afin de voir l’amélioration progressive sur des sites ou des parcs de sites
  • 20
  • orange à l’initiative de cette initiative open source suite à de forte pression interne de la part de salariés
    mutualiser les savoirs, expériences, resources finacières et humaines
    rassembler des acteurs sur un sujet commum et donc avancer plus vite
    OW2 consortium reconnu neutre qui structure, organise et assure la promotion de l’initiative
  • 25
  • Accessibilité numérique et Industrialisation @Orange

    1. 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. 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. 3 Orange Qui sommes nous ?
    4. 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. 5 Orange Recommandations, méthodologies et formations
    6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. 16 Orange Outils de tests
    16. 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. 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. 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. 19. 20 Orange L’initiative Open Source (OSAi)
    20. 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. 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. 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. 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. 24. 25 Orange Conclusion
    25. 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. 26. 27 Orange Merci, Des questions ?
    27. 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

    ×