node, grunt et leurs copains qui font de l’accessibilité tout seuls !
TRANSCRIPT
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 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 2015
Contenu1.Rappels, vite fait !
2.Que voulons nous faire ?!
3.Pratiquons, pratiquons…
4.Et enfin, c’est presque fini !
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 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 2015
Intégration continueUne 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 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 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 en place une chaine complète et gérer l’amélioration progressiveQualité de code : CSS : csslint, HTML : htmllint, JS : JS hint ou lint, autre : bootlint, lessLintRWD : phantomJS
Optimisation des performances : concaténation, minification, uglification...
Enfin, valider l’Accessibilité
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 2015
Accessibilité et automatisationoutils é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 2015
Accessibilité et automatisationtests et résultats
Outil Type a11y globa
lcommentaires
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 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 positifsont légères et s’exécutent rapidementsont interopérables dans les UA modernessont elles-mêmes testables automatiquement
15 2015
Pratiquons ?!Pratiquons…
16 2015
Intégrons l’accessibilité dans notre chaine de développementce 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 2015
Intégrons l’accessibilité dans notre chaine de développementsommaire
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 2015
Environnement de l’atelierNode, 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âchesqui exécute les modules installésque l’on configure à sa guisepour construire l’application (build)…Bower gère les dépendances de l’application
Jquery, Bootstrap,…
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 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 yonpm install -g generator-webappyo webapp
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 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
2. 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 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 task code quality, une tâche qui lance des sous-tâches
'csslint', 'htmllint',ʺbootlintʺ,'jshint' ]);
25 2015
3- Un linter graphique dans la page
1. lancer la tâche grunt serve
2. regarder la page bootlint-gui.htmltout 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 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 2015
4- Injecter automatiquement axe pour une sortie console - correction1. 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 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
2. Lancer la tâche, avec un grunt serve lancé puis regarder dans le terminalla liste des erreurs est là !
3. regarder le fichier output.jsonpuis4. ajouter la page about.html
5. relancer la tâche
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 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 2015
Test multi navigateurs avec BrowserSync couplé à LiveReload
1. lancer une commande grunt servebrowserSync 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 2015
ConclusionAutomatisation de l’a11y dans un environnement Node/Grunt :nombreuses solutionsrien de prêt à l’emploiadaptables à 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 2015
Conclusion aller plus loin !
Retour d’expérience chez Orange :osortie Xunitointégration dans Jenkins
tableau de bord détails des erreurs statistique par commito Open source
34 2015
Merci
merci également à Fabien Legris pour son aide
et aux autres acteurs de la chaine qualité Orange