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

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 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 2015
Contenu
1. Rappels, vite fait !
2. Que voulons nous faire ?!
3. Pratiquons, pratiquons…
4. Et enfin, c’est presque fini !

4. 4 2015
Rappels,
vite fait !

5. 5 2015
Accessibilité
définition de l’accessibilité

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 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 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 2015
Que voulons-nous faire ?!
Où va-t-on ?

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 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 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 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 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 2015
Pratiquons ?!
Pratiquons…

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 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 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 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 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 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 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 2015
2- Qualité de code front - correction

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 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 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 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 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 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 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 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 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 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 2015
Merci
merci également à Fabien Legris pour son aide
et aux autres acteurs de la chaine qualité Orange