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