SlideShare une entreprise Scribd logo
1  sur  34
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
Contenu
1. 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 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 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 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 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 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 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 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 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’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é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 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 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 yo
npm install -g generator-webapp
yo 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
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 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.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 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 - 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 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 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 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 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 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 2015
Merci
merci également à Fabien Legris pour son aide
et aux autres acteurs de la chaine qualité Orange

Contenu connexe

Tendances

JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à Achilles
Ippon
 
JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924
Gregory Boissinot
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec Jenkins
Hugo Hamon
 
Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016
Ippon
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
Eric SIBER
 

Tendances (20)

Quand java prend de la vitesse, apache maven vous garde sur les rails
Quand java prend de la vitesse, apache maven vous garde sur les railsQuand java prend de la vitesse, apache maven vous garde sur les rails
Quand java prend de la vitesse, apache maven vous garde sur les rails
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à Achilles
 
Sonar-Hodson-Maven
Sonar-Hodson-MavenSonar-Hodson-Maven
Sonar-Hodson-Maven
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
 
JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924
 
Des tests modernes pour Drupal
Des tests modernes pour DrupalDes tests modernes pour Drupal
Des tests modernes pour Drupal
 
What's Next Replay - IC / Jenkins
What's Next Replay - IC / JenkinsWhat's Next Replay - IC / Jenkins
What's Next Replay - IC / Jenkins
 
Support formation vidéo : Construire et administrer vos conteneurs avec Docker
Support formation vidéo : Construire et administrer vos conteneurs avec DockerSupport formation vidéo : Construire et administrer vos conteneurs avec Docker
Support formation vidéo : Construire et administrer vos conteneurs avec Docker
 
CRaSH @ JUGSummerCamp 2012 - Quickie
CRaSH @ JUGSummerCamp 2012 - QuickieCRaSH @ JUGSummerCamp 2012 - Quickie
CRaSH @ JUGSummerCamp 2012 - Quickie
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec Jenkins
 
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsPetit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
 
Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016Quoi de neuf pour JHipster en 2016
Quoi de neuf pour JHipster en 2016
 
Intégration continue
Intégration continueIntégration continue
Intégration continue
 
Jenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagnerJenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagner
 
Jenkins Workflow
Jenkins WorkflowJenkins Workflow
Jenkins Workflow
 
Formation GIT gratuite par ippon 2014
Formation GIT gratuite par ippon 2014Formation GIT gratuite par ippon 2014
Formation GIT gratuite par ippon 2014
 
NightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery AvancéNightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery Avancé
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
 
JENKINS_BreizhJUG_20111003
JENKINS_BreizhJUG_20111003JENKINS_BreizhJUG_20111003
JENKINS_BreizhJUG_20111003
 

En vedette

Oficina de relaciones internacionales uax
Oficina de relaciones internacionales uaxOficina de relaciones internacionales uax
Oficina de relaciones internacionales uax
Marianassa
 
FN Photocatalytic Technology
FN Photocatalytic TechnologyFN Photocatalytic Technology
FN Photocatalytic Technology
Pavel Šefl
 
Porque desaprobamos los exámenes
Porque desaprobamos los exámenesPorque desaprobamos los exámenes
Porque desaprobamos los exámenes
Oscar Ivan Barrero
 
Testing NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoverageTesting NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoverage
mlilley
 

En vedette (20)

Node & Express as Workflow Tools
Node & Express as Workflow ToolsNode & Express as Workflow Tools
Node & Express as Workflow Tools
 
Media tools to express understanding
Media tools to express understandingMedia tools to express understanding
Media tools to express understanding
 
Oficina de relaciones internacionales uax
Oficina de relaciones internacionales uaxOficina de relaciones internacionales uax
Oficina de relaciones internacionales uax
 
Faites vous du bien et prenez soin de vos utilisateurs
Faites vous du bien et prenez soin de vos utilisateursFaites vous du bien et prenez soin de vos utilisateurs
Faites vous du bien et prenez soin de vos utilisateurs
 
historico
historicohistorico
historico
 
Ecommerce mobile marketing trends for 2016
Ecommerce mobile marketing trends for 2016Ecommerce mobile marketing trends for 2016
Ecommerce mobile marketing trends for 2016
 
Hola
HolaHola
Hola
 
Horario
HorarioHorario
Horario
 
2016 SDMX Experts meeting, SDMX system in the Banco de España, Eduardo Bollo
2016 SDMX Experts meeting, SDMX system in the Banco de España, Eduardo Bollo2016 SDMX Experts meeting, SDMX system in the Banco de España, Eduardo Bollo
2016 SDMX Experts meeting, SDMX system in the Banco de España, Eduardo Bollo
 
4 shared
4 shared4 shared
4 shared
 
FN Photocatalytic Technology
FN Photocatalytic TechnologyFN Photocatalytic Technology
FN Photocatalytic Technology
 
Neoclasicisme
NeoclasicismeNeoclasicisme
Neoclasicisme
 
Porque desaprobamos los exámenes
Porque desaprobamos los exámenesPorque desaprobamos los exámenes
Porque desaprobamos los exámenes
 
Testing Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and ChaiTesting Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and Chai
 
Презентация 1.10 - Система электроснабжения
Презентация 1.10 - Система электроснабженияПрезентация 1.10 - Система электроснабжения
Презентация 1.10 - Система электроснабжения
 
Escultura segle xix
Escultura  segle xixEscultura  segle xix
Escultura segle xix
 
Créer, Pousser et Lancer un serveur RESTful en 10 min.
Créer, Pousser et Lancer un serveur RESTful en 10 min.Créer, Pousser et Lancer un serveur RESTful en 10 min.
Créer, Pousser et Lancer un serveur RESTful en 10 min.
 
JavaScript Testing: Mocha + Chai
JavaScript Testing: Mocha + ChaiJavaScript Testing: Mocha + Chai
JavaScript Testing: Mocha + Chai
 
Bloque 1. paleolítico neolítico- edad de los metales
Bloque 1. paleolítico neolítico- edad de los metalesBloque 1. paleolítico neolítico- edad de los metales
Bloque 1. paleolítico neolítico- edad de los metales
 
Testing NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoverageTesting NodeJS with Mocha, Should, Sinon, and JSCoverage
Testing NodeJS with Mocha, Should, Sinon, and JSCoverage
 

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

La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
PimpMySharePoint
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
PimpMySharePoint
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
Christophe HERAL
 

Similaire à Node, Grunt et leurs copains qui font de l’accessibilité tout seuls ! (20)

At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville Public
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
Gdd07 Gwt Dig
Gdd07 Gwt DigGdd07 Gwt Dig
Gdd07 Gwt Dig
 
Paris Web 2015 - Atelier desendettement javascript
Paris Web 2015 - Atelier desendettement javascriptParis Web 2015 - Atelier desendettement javascript
Paris Web 2015 - Atelier desendettement javascript
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiques
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Les méthodes agiles dans TFS
Les méthodes agiles dans TFSLes méthodes agiles dans TFS
Les méthodes agiles dans TFS
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange Labs
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Spring boot anane maryem ben aziza syrine
Spring boot anane maryem ben aziza syrineSpring boot anane maryem ben aziza syrine
Spring boot anane maryem ben aziza syrine
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
 
20081023 - Paris Vi Master STL TA - Initiation Maven
20081023 - Paris Vi Master STL TA - Initiation Maven20081023 - Paris Vi Master STL TA - Initiation Maven
20081023 - Paris Vi Master STL TA - Initiation Maven
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
 
Agile lille 2015 devops etapres
Agile lille 2015 devops etapresAgile lille 2015 devops etapres
Agile lille 2015 devops etapres
 

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

  • 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 !
  • 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
  • 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

Notes de l'éditeur

  1. d’intégration, les régressions,
  2. tests de la qualité de code