1 2015
Node, Grunt et leurs copains qui font
de l’accessibilité tout seuls !
Vincent Aniort (@sanvin) et Loïc Laussel
3 Oc...
2 2015
qui c’est ces gens là ?
Service d’accessibilité numérique interne
Outils, recommandations et méthodes
Vincent, bioc...
3 2015
Contenu
1. Rappels, vite fait !
2. Que voulons nous faire ?!
3. Pratiquons, pratiquons…
4. Et enfin, c’est presque ...
4 2015
Rappels,
vite fait !
5 2015
Accessibilité
définition de l’accessibilité
6 2015
Accessibilité
référentiels d’accessibilité
recommandations internationales édictés par le W3C/WAI
— WAI (Web Access...
7 2015
Intégration continue
Une méthode pour :
 tester les modifications,
 déceler rapidement et systématiquement les er...
8 2015
Git, Node, Grunt et les autres
Git : gestion de versions décentralisée.
Node.js :
∆une plateforme basée sur le mote...
9 2015
Que voulons-nous faire ?!
Où va-t-on ?
10 2015
Qualité de code (front), performance (front), accessibilité et tests
automatisés
Utiliser des outils pour mettre e...
11 2015
Accessibilité, tests et automatisation
 30% des critères d’accessibilité automatisables, plus de 50% des erreurs
...
12 2015
Accessibilité et automatisation
outils étudiés
Nombreux outils identifiés :
grunt-accessibility, Pa11y, a11y, ache...
13 2015
Accessibilité et automatisation
tests et résultats
Outil Type a11y global commentaires
a11y chrome accessibility d...
14 2015
Accessibilité et automatisation
choix de l’outil d’accessibilité
Choix de aXe de Deque, car :
 complet au niveau ...
15 2015
Pratiquons ?!
Pratiquons…
16 2015
Intégrons l’accessibilité dans notre chaine de développement
ce que vous apprendrez …
1. vous serez initiés à l’en...
17 2015
Intégrons l’accessibilité dans notre chaine de développement
sommaire
1. utiliser l’extension axe dans Firefox
2. ...
18 2015
Environnement de l’atelier
Node, Grunt et Bower
Node environnement d’exécution de JavaScript
 exécute le JavaScri...
19 2015
Fichier Gruntfile.js
module.exports = function(grunt) { // wrapper d’encapsulation de la config de grunt
…
grunt.i...
20 2015
Environnement de l’atelier
Une VM préconfigurée, tous les modules Npm et
les dépendances Bower sont installés,
Une...
21 2015
1- A vous de jouer !
Extension FireFox de aXe - Le site ParisWeb
L’extension FF de aXe à tester sur :
1.http://www...
22 2015
2- Qualité de code front , tâches : csslint, htmllint, bootlint et jshint
1. Faire de même avec :
• csslint  src ...
23 2015
2- Qualité de code front - correction
24 2015
2- Enchainer les tâches pour la qualité de code front - correction
grunt.registerTask('testfront', [ // register t...
25 2015
3- Un linter graphique dans la page
1. lancer la tâche grunt serve
2. regarder la page bootlint-gui.html
tout se p...
26 2015
4- Injecter automatiquement axe pour une sortie console
1. Créer dans la tâche scriptinject, la sous-tâche devAxe ...
27 2015
4- Injecter automatiquement axe pour une sortie console - correction
1. Page html
<!-- scriptinject begin -->
//ev...
28 2015
5- Lancer axe-webdriver
1. Créer la tâche axe-webdriver (https://github.com/dequelabs/grunt-axe-webdriver)
avec co...
29 2015
5- Lancer axe-webdriver - correction
'axe-webdriver': {
firefox: { // lance FireFox et insère axe-core
options: {}...
30 2015
Aller plus loin,
axe, une sortie html dans la page
Il y a moyen de jouer sur le formatage pour la sortie du JSON d...
31 2015
Test multi navigateurs avec BrowserSync couplé à LiveReload
1. lancer une commande grunt serve
browserSync est app...
32 2015
Conclusion
Automatisation de l’a11y dans un environnement Node/Grunt :
nombreuses solutions
rien de prêt à l’emp...
33 2015
Conclusion
aller plus loin !
Retour d’expérience chez Orange :
osortie Xunit
ointégration dans Jenkins
 tableau d...
34 2015
Merci
merci également à Fabien Legris pour son aide
et aux autres acteurs de la chaine qualité Orange
Prochain SlideShare
Chargement dans…5
×

Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !

497 vues

Publié le

avec NodeJS, Grunt on fait de l'accessibilité automatisée, la mise en place de test automatique de qualité de code et d'accessibilité grâce à Grunt

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
497
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • d’intégration, les régressions,
  • tests de la qualité de code
  • Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !

    1. 1. 1 2015 Node, Grunt et leurs copains qui font de l’accessibilité tout seuls ! Vincent Aniort (@sanvin) et Loïc Laussel 3 Octobre 2015
    2. 2. 2 2015 qui c’est ces gens là ? Service d’accessibilité numérique interne Outils, recommandations et méthodes Vincent, biochimiste, développeur , a11y numérique + de 10 ans Loïc, développeur , a11y numérique 5 ans
    3. 3. 3 2015 Contenu 1. Rappels, vite fait ! 2. Que voulons nous faire ?! 3. Pratiquons, pratiquons… 4. Et enfin, c’est presque fini !
    4. 4. 4 2015 Rappels, vite fait !
    5. 5. 5 2015 Accessibilité définition de l’accessibilité
    6. 6. 6 2015 Accessibilité référentiels d’accessibilité recommandations internationales édictés par le W3C/WAI — WAI (Web Accessibility Initiative) groupe de travail du W3C — WCAG (Web Content Accessibility Guidelines)  WCAG 1 (1999)  WCAG 2 (2008), devenu une norme ISO/IEC 40500:2012 —RGAA v3 méthode d’application des WCAG 2.0 en France —ARIA 1.0 (Accessible Rich Internet Application) 3 niveaux d'accessibilité :  niveau A : environ 1/3 des critères  niveau AA : environ 2/3 des critères  niveau AAA : TOUS les critères
    7. 7. 7 2015 Intégration continue Une méthode pour :  tester les modifications,  déceler rapidement et systématiquement les erreurs,  améliorer les performances et la qualité de code Basée sur des Outils :  le code source partagé (Git)  intégration rapide des modifications  des tests d'intégration  l’application est construite en continu Basée sur l’automatisation des tâches : de tests (unitaires, fonctionnels…), de compilation, de build…
    8. 8. 8 2015 Git, Node, Grunt et les autres Git : gestion de versions décentralisée. Node.js : ∆une plateforme basée sur le moteur Javascript V8 (Chrome) ∆plateforme de construction logicielle (web) ∆modules installables avec le gestionnaire de paquets NPM (Node Package Manager ). NodeJS est ici utilisé pour la partie outillage du développeur. Grunt : gestion de tâches pour créer et exécuter des tâches de build Tout cet environnement est Open Source et libre, adapté à l’automatisation des tâches, très utilisé dans la communauté des développeurs et évolue rapidement et fréquemment.
    9. 9. 9 2015 Que voulons-nous faire ?! Où va-t-on ?
    10. 10. 10 2015 Qualité de code (front), performance (front), accessibilité et tests automatisés Utiliser des outils pour mettre en place une chaine complète et gérer l’amélioration progressive Qualité de code : CSS : csslint, HTML : htmllint, JS : JS hint ou lint, autre : bootlint, lessLint RWD : phantomJS Optimisation des performances :  concaténation, minification, uglification... Enfin, valider l’Accessibilité
    11. 11. 11 2015 Accessibilité, tests et automatisation  30% des critères d’accessibilité automatisables, plus de 50% des erreurs  Convaincre et diffuser l’accessibilité :  automatiser au maximum  intégration dans une chaine de tests cohérente  Il faut tester le code interprété par le navigateur, et pas seulement le code statique Il existe des outils :  dans les navigateurs à l’aide des extensions, the Wave (webaim)  des applications, Opquast, Tanaguru, Ocawa  des frameworks de test a11y pour l’intégration continue
    12. 12. 12 2015 Accessibilité et automatisation outils étudiés Nombreux outils identifiés : grunt-accessibility, Pa11y, a11y, achecker, arialinter, Quail, accesslint, axe, Tota11y, AATT Parmi ces outils on cherche un moyen de test : •complet au niveau des critères WCAG 2.0 automatisable (avec de l’ARIA) •léger et facilement intégrable dans un environnement Node/Grunt •Open Source et gratuit (démarche volontaire interne)
    13. 13. 13 2015 Accessibilité et automatisation tests et résultats Outil Type a11y global commentaires a11y chrome accessibility developper tool - - - Site statique, sortie console AATT WCAG 2, HTML_CodeSniffer + - A intégrer dans framework de test accessLint (Ruby) chrome accessibility developper tool - - - Utilisable uniquement sur environnement Ruby ariaLinter chrome accessibility developper tool - - - - Tâche Grunt, tests basiques grunt-accessibility AccessSniff, HTML_CodeSniffer + - sortie console, n’arrête pas le build aXe-core Référentiel dédié (47 tests) + + + + Intégré dans de nombreux environnements (Chrome, Firefox, webdriverjs, selenium, Cucumber…) Pa11y HTML_CodeSniffer, tableau de bord + + + complexe à mettre en œuvre Quail Référentiel dédié + + - Régressions au fil des versions Tota11y chrome accessibility developper tool - + résultats affichés dans la page
    14. 14. 14 2015 Accessibilité et automatisation choix de l’outil d’accessibilité Choix de aXe de Deque, car :  complet au niveau test d’a11y intégrable (fonctionne dans de nombreux env. et framework de test) modulaire (output objet js, paramétrage) contextuel (règles en fonction du contexte à tester) extensible (rajout de règles) Manifeste d’aXe, les règles d’a11y automatisées de aXe : ne génèrent aucun faux positif sont légères et s’exécutent rapidement sont interopérables dans les UA modernes sont elles-mêmes testables automatiquement
    15. 15. 15 2015 Pratiquons ?! Pratiquons…
    16. 16. 16 2015 Intégrons l’accessibilité dans notre chaine de développement ce que vous apprendrez … 1. vous serez initiés à l’environnement NodeJS (Bower, Grunt…) pour le développer des applications Web 2. vous aurez les bases pour mettre en place une chaine entière de qualité de code front 3. vous serez sensibilisés aux outils de tests automatiques d’accessibilité à travers aXe
    17. 17. 17 2015 Intégrons l’accessibilité dans notre chaine de développement sommaire 1. utiliser l’extension axe dans Firefox 2. une chaine de tests front cohérente : csslint, htmllint, bootlint, jshint 3. un linter gui : bootlint-gui 4. injecter automatiquement axe pour une sortie console 5. lancer axe-webdriver, bloquer le build
    18. 18. 18 2015 Environnement de l’atelier Node, Grunt et Bower Node environnement d’exécution de JavaScript  exécute le JavaScript  permet d’installer des modules (npm) gère les dépendances des outils de développement … Grunt lance des tâches qui exécute les modules installés que l’on configure à sa guise pour construire l’application (build) … Bower gère les dépendances de l’application  Jquery, Bootstrap,…
    19. 19. 19 2015 Fichier Gruntfile.js module.exports = function(grunt) { // wrapper d’encapsulation de la config de grunt … grunt.initConfig({ // initialisation de l’objet de configuration … jshint: { // objet de configuration d’une tâche files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { globals: { jQuery: true } } }, … }); };
    20. 20. 20 2015 Environnement de l’atelier Une VM préconfigurée, tous les modules Npm et les dépendances Bower sont installés, Une application Bootstrap toute prête générée avec Yeoman (tâche de build, framework de test…) Les fichiers de l’atelier npm install –g yo npm install -g generator-webapp yo webapp
    21. 21. 21 2015 1- A vous de jouer ! Extension FireFox de aXe - Le site ParisWeb L’extension FF de aXe à tester sur : 1.http://www.paris-web.fr/ 2.http://www.paris-web.fr/lieux/
    22. 22. 22 2015 2- Qualité de code front , tâches : csslint, htmllint, bootlint et jshint 1. Faire de même avec : • csslint  src : fichiers css dans app/ https://github.com/gruntjs/grunt-contrib-csslint • htmllint  all : fichiers html dans app/ https://www.npmjs.com/package/grunt-html • bootlint  options: stoponerror: false et files : fichiers html dans app/ https://github.com/twbs/grunt-bootlint • jshint  all : fichiers JS dans scripts/ https://github.com/gruntjs/grunt-contrib-jshint 1. Lancer les tâches une à une, puis les regrouper dans une seule tâche « testfront » tout se passe dans le terminal mais la sortie peut bien sûr être customisée moyennant des développements
    23. 23. 23 2015 2- Qualité de code front - correction
    24. 24. 24 2015 2- Enchainer les tâches pour la qualité de code front - correction grunt.registerTask('testfront', [ // register task code quality, une tâche qui lance des sous-tâches 'csslint', 'htmllint', bootlint ,ʺ ʺ 'jshint' ]);
    25. 25. 25 2015 3- Un linter graphique dans la page 1. lancer la tâche grunt serve 2. regarder la page bootlint-gui.html tout se passe dans la page maintenant ! grâce à l’ajout : <link rel= stylesheet src= scripts/tools/bootlint-gui/bootlint-gui.css > dans le headʺ ʺ ʺ ʺ <script src= scripts/tools/bootlint-gui/bootlint-gui.js ></script> avant le /bodyʺ ʺ https://github.com/twbs/grunt-bootlint
    26. 26. 26 2015 4- Injecter automatiquement axe pour une sortie console 1. Créer dans la tâche scriptinject, la sous-tâche devAxe en faisant comme pour tota11y pour intégrer axe dans la page inject_script_axe.html au lancement de la tâche « serve » 2. lancer la tâche grunt serve
    27. 27. 27 2015 4- Injecter automatiquement axe pour une sortie console - correction 1. Page html <!-- scriptinject begin --> //everything here will be replace by all script loaded. You can run this task many times you want. <!-- scriptinject end --> 2. Gruntfile.js scriptinject: { devAxe: { srcs: ['.tmp/scripts/tools/axe/*.js'], html: '.tmp/inject_script_axe.html', without: ‘.tmp/' }, devTota11y:{ … } }
    28. 28. 28 2015 5- Lancer axe-webdriver 1. Créer la tâche axe-webdriver (https://github.com/dequelabs/grunt-axe-webdriver) avec comme : • browser : FireFox • url : http://localhost:9000/index.html • fichier de sortie : output.json 1. Lancer la tâche, avec un grunt serve lancé puis regarder dans le terminal la liste des erreurs est là ! 1. regarder le fichier output.json puis 4. ajouter la page about.html 5. relancer la tâche
    29. 29. 29 2015 5- Lancer axe-webdriver - correction 'axe-webdriver': { firefox: { // lance FireFox et insère axe-core options: {}, urls: ['http://localhost:9000/index.html', 'http://localhost:9000/about.html'], dest: 'output.json' } }
    30. 30. 30 2015 Aller plus loin, axe, une sortie html dans la page Il y a moyen de jouer sur le formatage pour la sortie du JSON de axe Un exemple de sortie dans la page html page html dans la vmobjet axe inséré dans la page html avec identifications des erreurs
    31. 31. 31 2015 Test multi navigateurs avec BrowserSync couplé à LiveReload 1. lancer une commande grunt serve browserSync est appelé dans la tâche serve 1. ouvrir deux navigateurs (FF et Browse) http://localhost:9000 2. naviguer dans l‘application ou/et modifier vos html, img, css ou js browserSync: { options: { notify: false, background: true }, livereload: { options: { files: [ '<%= config.app %>/{,*/}*.html', '.tmp/styles/{,*/}*.css', '<%= config.app %>/images/{,*/}*', '.tmp/scripts/{,*/}*.js' ], port: 9000, server: { baseDir: ['.tmp', config.app], routes: { '/bower_components': './bower_components' } } } },
    32. 32. 32 2015 Conclusion Automatisation de l’a11y dans un environnement Node/Grunt : nombreuses solutions rien de prêt à l’emploi adaptables à vos habitudes de travail à intégrer dans la chaine de tests Par exemple : sortie d’une page HTML, JSON,… (tableau de bord, suivi…) audit pour suivi au long cours de l’accessibilité
    33. 33. 33 2015 Conclusion aller plus loin ! Retour d’expérience chez Orange : osortie Xunit ointégration dans Jenkins  tableau de bord  détails des erreurs  statistique par commit o Open source
    34. 34. 34 2015 Merci merci également à Fabien Legris pour son aide et aux autres acteurs de la chaine qualité Orange

    ×