SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
Drupal, Accessibilité et RGAA
Retours d'expériences et bonnes pratiques
2019
1
SOMMAIRE
01. Présentations des intervenant(e)s
02. Les projets
03. C’est quoi l’accessibilité numérique ?
04. L’accessibilité dans chaque étape du projet
05. Comment tester l’accessibilité numérique ?
06. Conclusion
2
01.
Présentation des
intervenant(e)s
3
bonjour!
Julie PLENO
CHEF DE PROJET informatique CDC
4
bonjour!
Mathieu BOUILLOT
Lead Front-End Designer - Intégrateur
Référent en accessibilité numérique
@MatteoBZ
5
6
02.
Les projets
La création de sites grand public comme :
● Compte personnel d’activité (2016) – refonte en cours
● Ciclade - gestion des comptes et avoirs en déshérence (2017)
● Consignations (2018) - Labellisé e-accessible RGAA (niveau AA)
● La création du Portail Handicap (2019)
Nous a conduit à renforcer la prise en compte
de l’accessibilité numérique de nos sites.
03.
C’est quoi l’accessibilité
numérique ?
7
Quelle est la première chose à
laquelle vous pensez quand
vous entendez le mot
accessibilité ?
8
À la base, un gros cliché !
Une image faussée du handicap,
où l’on voit systématiquement une personne
aveugle, sourde, en fauteuil roulant...
9
“
Mais on ne va pas se mentir...
Les handicapés ne sont pas notre cible,
il n’est pas nécessaire de rajouter ça dans le projet
Qu’est-ce qu’on risque si on ne le fait pas ?
Quel est le retour sur investissement ?
Il est codé en braille ton site accessible !?!
10
Qu’est-ce qu’on risque
si on ne le fait pas ?
11
12
Qu’est-ce qu’on risque si on ne le fait pas ?
1er risque .
Empêcher des utilisateurs
d’utiliser vos services et donc
de perdre en audience.
3ème risque .
Si vous ne corrigez que les bugs pour les
valides et pas ceux affectant l’accès pour les
personnes handicapées, vous faites de la
discrimination, ce qui est passible d’une
sanction pénale.
Selon l’article 225-2 du code pénal :
◇ Entre 3 et 5 ans d'emprisonnement
◇ 45 000 à 75 000 euros d'amende.
2ème risque .
Une pénalité pouvant s’élever à
5000€ par an et par site ou
application + renouvelable
Loi de la République numérique -
article 106 de la loi n° 2016-1321
13
15 millions de personnes
en situation de handicap en France
21,5% de la population
Précision 1 :
Le handicap n’est pas lié à
un état mais à une situation
14
Une personne aveugle n’est pas handicapée
du fait qu’elle est aveugle (état), elle est
handicapée uniquement dans les situations où
la vue est nécessaire pour interagir (situation).
source
Précision 2 :
Tout le monde peut être en
situation de handicap
15
◇ On a oublié ses lunettes à la maison
◇ Clavier / souris qui ne fonctionnent pas
◇ Descendre d’un trottoir avec une poussette
ou des béquilles
◇ On s’est cassé un bras
◇ Smartphone en plein soleil
◇ etc.
C’est la possibilité pour toutes et tous (sans distinction de
sexe, d’âge, de situation ou de handicap), d’utiliser les outils
informatiques, les logiciels ou applications et de consulter
les ressources numériques, quelle que soit leur façon d’y
accéder.
Les contenus et services doivent être perceptibles,
utilisables, compréhensibles et robustes.
C’est un principe élémentaire d’égalité, une obligation
citoyenne.
source
16
Définition de l’accessibilité numérique
Les contenus et services doivent être :
Perceptible
Les éléments doivent être
distinguables visuellement, les
contenus non textuels comme
les images ou les vidéos doivent
avoir une alternative textuelle.
Utilisable
Le contenu doit être accessible
à la fois à la souris et au clavier,
l’utilisateur doit pouvoir
s’orienter et se situer dans le
site.
Compréhensible
Le contenu doit être lisible,
prévisible et le système doit
aider à corriger les erreurs de
saisie.
Robuste
Le contenu doit être accessible
quel que soit l’appareil utilisé et
ses évolutions futures.
17
04.
L’accessibilité dans
chaque étape du projet
18
04. L’accessibilité dans chaque étape du projet
19
BUILD RUN
04. L’accessibilité dans chaque étape du projet
20
Amont Projet Aval
Cadrage et
cahier des
charges
Conception
UX / UI
Développement
Front / Back
Intégration
des contenus
Mise à jour
& contribution
Prise en amont de la production technique, elle est plus simple et
moins coûteuse à mettre en œuvre qu'en fin de chaîne de production
- comme le responsive web design à l’époque -
Cadrage et cahier des
charges
21
● Un effort significatif
● Des impacts sur la charge et le
temps du projet
◇ +/- 30% de gestion de projet
◇ +/- 20% de conception (ux-ui)
◇ +/- 30% de dev front-end
◇ +/- 30% de dev back-end
Conception UX / UI
Structurer l’information
Navigations, niveau de titre, liens explicites...
Présenter l’information
Contraste de couleur, lisibilité typographique,
formulaire, tableau, focus clavier…
S’adapter à la charte client
22
Développement
back-end / front-end
◇ Sémantique
◇ Hiérarchie des titres
◇ Code valide W3C
◇ Formulaire en erreur
◇ Scripts
◇ Capacité du CMS
(webform, facette et wysiwyg)
23
Intégration des contenus
L’ossature peut être accessible, les
contenus doivent l’être également.
L’ennemi : le wysiwyg 😡
Attention : un contenu contribué de la
mauvaise façon fera perdre l’accessibilité
d’un site (lien non-explicite et image mal
contribué)
24
L’audit & corrections
Un audit en 2 phases.
◇ 1ère phase : à la fin du dev
◇ 2ème phase : suite aux
corrections
Besoin de sensibiliser les équipes
pour comprendre et mettre en oeuvre
les corrections.
Besoin d’une expertise pour être sûr
25
05.
Comment tester
l’accessibilité numérique ?
26
Le RGAA
Depuis 2009, la DINSIC* édite le RGAA qui regroupe les critères
et les tests permettant de vérifier la conformité d’un site
internet public.
Le RGAA** est basé sur les WCAG 2.0 (2008) et WCAG 2.1
(2018).
Les WCAG*** sont les règles internationales pour l’accessibilité
des contenus web (W3C).
Le RGAA permet de tester le respect de ces règles.
27
* DINSIC : Direction Interministérielle du Numérique et du Système d'Information et de Communication
** RGAA : Référentiel Général d’Accessibilité pour les Administrations
*** WCAG : Web Content Accessibility Guidelines (prononcer “ouécague”)
28
133 critères
dans le RGAA
3 niveaux dans le référentiel :
Niveau A : niveau minimum
82 critères..
Niveau AA : niveau d’amélioration
20 critères..
Niveau AAA : niveau d’optimisation
31 critères..
Pour qu’un site soit dit accessible, il doit
avoir le niveau AA minimum (soit 82 + 20)
29
Pour en
savoir plus
La DINSIC édite des guides
d’initiation au RGAA :
● design
● développement
● intégration
● édito
● Et un guide des impacts utilisateurs
des défauts d’accessibilité
30
Côté outils
Différents plugins / addons :
● Sémantique HTML : Landmarks pour
Chrome ou Firefox pour tester la
structure HTML5 + ARIA
● Hiérarchie de titre : HeadingsMap
Firefox et Chrome
● Pour tester avec le RGAA : Assistant
RGAA pour Chrome et Firefox
06.
Conclusion
31
Conclusion
32
● Ne pas perdre l’objectif premier (pour qui on fait tout ça).
● L’accessibilité numérique est un vaste sujet, parfois d’expert
mais quand on le prend dès le début du projet, les efforts
sont lissés sur les différents pôles métiers.
● Former / sensibiliser les équipes
● Sur les projets qui se suivent ou dans le même écosystème :
○ Bien penser à conserver une chaîne complète
d’accessibilité pour ne pas rompre l’expérience
utilisateur
● Suivre les évolutions de l’accessibilité (constante et rapide)
Merci !
33

Contenu connexe

Tendances

Anatomy of female reproductive organs in domestic animals
Anatomy of female reproductive organs in domestic animalsAnatomy of female reproductive organs in domestic animals
Anatomy of female reproductive organs in domestic animalsDrGovindNarayanPuroh
 
Dog vaginal cytology by Dr.mehdi moradi
Dog vaginal cytology by Dr.mehdi moradiDog vaginal cytology by Dr.mehdi moradi
Dog vaginal cytology by Dr.mehdi moradimehdi moradi
 
Seminiferous Epithelial cycle
Seminiferous Epithelial cycleSeminiferous Epithelial cycle
Seminiferous Epithelial cycleFalana Benedict
 
Lecture 5 follicular dynamics in domestic animals
Lecture 5 follicular dynamics in domestic animalsLecture 5 follicular dynamics in domestic animals
Lecture 5 follicular dynamics in domestic animalsDrGovindNarayanPuroh
 
The estrous cycle
The estrous cycleThe estrous cycle
The estrous cycleLeo Benn
 
Male reproductive organs anatomy and physiology
Male reproductive organs  anatomy and physiologyMale reproductive organs  anatomy and physiology
Male reproductive organs anatomy and physiologyDrGovindNarayanPuroh
 
Practical 2 07
Practical 2 07Practical 2 07
Practical 2 07medik.cz
 
Pd gyanecology aashish tanwar
Pd gyanecology aashish tanwarPd gyanecology aashish tanwar
Pd gyanecology aashish tanwarAashish Tanwar
 
Veterinary Histology of Blood
Veterinary Histology of BloodVeterinary Histology of Blood
Veterinary Histology of BloodSina Taefehshokr
 
Hereditary causes of infertility 1
Hereditary causes of infertility 1Hereditary causes of infertility 1
Hereditary causes of infertility 1Ayman Atef
 
Reproductive traits in sheep and cyclic ovarian activity
Reproductive traits in sheep and cyclic ovarian activityReproductive traits in sheep and cyclic ovarian activity
Reproductive traits in sheep and cyclic ovarian activityILRI
 
Seasonality of reproduction in sheep
Seasonality of reproduction in sheepSeasonality of reproduction in sheep
Seasonality of reproduction in sheepILRI
 
Andrology lecture 18 impotetia generandi part 1
Andrology lecture 18 impotetia generandi  part 1Andrology lecture 18 impotetia generandi  part 1
Andrology lecture 18 impotetia generandi part 1DrGovindNarayanPuroh
 
Comparative Reproductive Anatomy
Comparative Reproductive AnatomyComparative Reproductive Anatomy
Comparative Reproductive AnatomynthompsonDVM15
 

Tendances (20)

Anatomy of female reproductive organs in domestic animals
Anatomy of female reproductive organs in domestic animalsAnatomy of female reproductive organs in domestic animals
Anatomy of female reproductive organs in domestic animals
 
5 Primates
5 Primates5 Primates
5 Primates
 
Dog vaginal cytology by Dr.mehdi moradi
Dog vaginal cytology by Dr.mehdi moradiDog vaginal cytology by Dr.mehdi moradi
Dog vaginal cytology by Dr.mehdi moradi
 
Fetal monster
Fetal monsterFetal monster
Fetal monster
 
Chick wholemount
Chick wholemountChick wholemount
Chick wholemount
 
Seminiferous Epithelial cycle
Seminiferous Epithelial cycleSeminiferous Epithelial cycle
Seminiferous Epithelial cycle
 
Prostate hyperplasia of Dog
Prostate hyperplasia of DogProstate hyperplasia of Dog
Prostate hyperplasia of Dog
 
Practical Manual of Comp.Ani.Physiology
Practical Manual of Comp.Ani.PhysiologyPractical Manual of Comp.Ani.Physiology
Practical Manual of Comp.Ani.Physiology
 
Lecture 5 follicular dynamics in domestic animals
Lecture 5 follicular dynamics in domestic animalsLecture 5 follicular dynamics in domestic animals
Lecture 5 follicular dynamics in domestic animals
 
The estrous cycle
The estrous cycleThe estrous cycle
The estrous cycle
 
Male reproductive organs anatomy and physiology
Male reproductive organs  anatomy and physiologyMale reproductive organs  anatomy and physiology
Male reproductive organs anatomy and physiology
 
Practical 2 07
Practical 2 07Practical 2 07
Practical 2 07
 
Pd gyanecology aashish tanwar
Pd gyanecology aashish tanwarPd gyanecology aashish tanwar
Pd gyanecology aashish tanwar
 
Veterinary Histology of Blood
Veterinary Histology of BloodVeterinary Histology of Blood
Veterinary Histology of Blood
 
Hereditary causes of infertility 1
Hereditary causes of infertility 1Hereditary causes of infertility 1
Hereditary causes of infertility 1
 
Reproductive traits in sheep and cyclic ovarian activity
Reproductive traits in sheep and cyclic ovarian activityReproductive traits in sheep and cyclic ovarian activity
Reproductive traits in sheep and cyclic ovarian activity
 
Seasonality of reproduction in sheep
Seasonality of reproduction in sheepSeasonality of reproduction in sheep
Seasonality of reproduction in sheep
 
Andrology lecture 18 impotetia generandi part 1
Andrology lecture 18 impotetia generandi  part 1Andrology lecture 18 impotetia generandi  part 1
Andrology lecture 18 impotetia generandi part 1
 
Comparative Reproductive Anatomy
Comparative Reproductive AnatomyComparative Reproductive Anatomy
Comparative Reproductive Anatomy
 
Urino genitial system of vertebrates
Urino genitial system of vertebratesUrino genitial system of vertebrates
Urino genitial system of vertebrates
 

Similaire à Drupagora 2019 : Drupal, accessibilité et RGAA

Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ? Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ? FFFOD
 
#compublique Connaître et développer les outils de mise en accessibilité de s...
#compublique Connaître et développer les outils de mise en accessibilité de s...#compublique Connaître et développer les outils de mise en accessibilité de s...
#compublique Connaître et développer les outils de mise en accessibilité de s...Cap'Com
 
Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ? Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ? FFFOD
 
Accessibilite numérique 03122012
Accessibilite numérique 03122012Accessibilite numérique 03122012
Accessibilite numérique 03122012domburger
 
Accessibilite numérique : où en est-on ? webinar FFFOD 151207
Accessibilite numérique : où en est-on ? webinar FFFOD 151207Accessibilite numérique : où en est-on ? webinar FFFOD 151207
Accessibilite numérique : où en est-on ? webinar FFFOD 151207FFFOD
 
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...FFFOD
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Technology
 
Nice tramconnect pictoaccess
Nice tramconnect pictoaccessNice tramconnect pictoaccess
Nice tramconnect pictoaccessFrançois MONIE
 
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008Association Paris-Web
 
Retrospective Web2 Corsica 20091215
Retrospective Web2 Corsica 20091215Retrospective Web2 Corsica 20091215
Retrospective Web2 Corsica 20091215Valerie Serpaggi
 
Audit, Conseil et Accompagnement Accessibilite numérique
Audit, Conseil et Accompagnement Accessibilite numériqueAudit, Conseil et Accompagnement Accessibilite numérique
Audit, Conseil et Accompagnement Accessibilite numériqueNathalieAlbertelli2
 
Présentation PFE Mastère PRO
Présentation PFE Mastère PROPrésentation PFE Mastère PRO
Présentation PFE Mastère PROahmedmiha
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueChristophe Villeneuve
 
Conférence Accessibilité Intuiti [Dossier de presse]
Conférence Accessibilité Intuiti [Dossier de presse]Conférence Accessibilité Intuiti [Dossier de presse]
Conférence Accessibilité Intuiti [Dossier de presse]Arnaud BRIAND
 
Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012Le Moulin Digital
 
Accessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle NumériqueAccessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle NumériqueLe Moulin Digital
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 Niji
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform MobileGabriel DUPONT
 

Similaire à Drupagora 2019 : Drupal, accessibilité et RGAA (20)

Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ? Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ?
 
#compublique Connaître et développer les outils de mise en accessibilité de s...
#compublique Connaître et développer les outils de mise en accessibilité de s...#compublique Connaître et développer les outils de mise en accessibilité de s...
#compublique Connaître et développer les outils de mise en accessibilité de s...
 
Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ? Accessibilité numérique : où en est-on ?
Accessibilité numérique : où en est-on ?
 
Accessibilite numérique 03122012
Accessibilite numérique 03122012Accessibilite numérique 03122012
Accessibilite numérique 03122012
 
Accessibilite numérique : où en est-on ? webinar FFFOD 151207
Accessibilite numérique : où en est-on ? webinar FFFOD 151207Accessibilite numérique : où en est-on ? webinar FFFOD 151207
Accessibilite numérique : où en est-on ? webinar FFFOD 151207
 
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...Jean-Philippe Simonnet (Centre Inffo) :  le RGAA, un outil précieux pour prog...
Jean-Philippe Simonnet (Centre Inffo) : le RGAA, un outil précieux pour prog...
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend web
 
Nice tramconnect pictoaccess
Nice tramconnect pictoaccessNice tramconnect pictoaccess
Nice tramconnect pictoaccess
 
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
Accessibilité : persuader tous les maillons - Jean Marc Bassin - Paris Web 2008
 
Retrospective Web2 Corsica 20091215
Retrospective Web2 Corsica 20091215Retrospective Web2 Corsica 20091215
Retrospective Web2 Corsica 20091215
 
Audit, Conseil et Accompagnement Accessibilite numérique
Audit, Conseil et Accompagnement Accessibilite numériqueAudit, Conseil et Accompagnement Accessibilite numérique
Audit, Conseil et Accompagnement Accessibilite numérique
 
Présentation PFE Mastère PRO
Présentation PFE Mastère PROPrésentation PFE Mastère PRO
Présentation PFE Mastère PRO
 
Numérique et handicap 2017 journée détude montpellier intervention zenoni
Numérique et handicap 2017  journée détude montpellier intervention  zenoniNumérique et handicap 2017  journée détude montpellier intervention  zenoni
Numérique et handicap 2017 journée détude montpellier intervention zenoni
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Conférence Accessibilité Intuiti [Dossier de presse]
Conférence Accessibilité Intuiti [Dossier de presse]Conférence Accessibilité Intuiti [Dossier de presse]
Conférence Accessibilité Intuiti [Dossier de presse]
 
Formation Accessibilite Web
Formation Accessibilite WebFormation Accessibilite Web
Formation Accessibilite Web
 
Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012Accessibilite du web Collectif filière 13112012
Accessibilite du web Collectif filière 13112012
 
Accessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle NumériqueAccessibilite des sites Internet - Accessiweb - Pôle Numérique
Accessibilite des sites Internet - Accessiweb - Pôle Numérique
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
 

Plus de ALTER WAY

#sharingLille : L'Open Source pour une société numérique ouverte, transparent...
#sharingLille : L'Open Source pour une société numérique ouverte, transparent...#sharingLille : L'Open Source pour une société numérique ouverte, transparent...
#sharingLille : L'Open Source pour une société numérique ouverte, transparent...ALTER WAY
 
Flyer promotions Alter Way Formation Avril Mai 2015
Flyer promotions Alter Way Formation Avril Mai 2015Flyer promotions Alter Way Formation Avril Mai 2015
Flyer promotions Alter Way Formation Avril Mai 2015ALTER WAY
 
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker  : des conteneurs pour tout faire ? Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker : des conteneurs pour tout faire ? ALTER WAY
 
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?ALTER WAY
 
Open World Forum 2014 : From ES6 to Javascript 2.0. What use today ? par Jon...
Open World Forum 2014  : From ES6 to Javascript 2.0. What use today ? par Jon...Open World Forum 2014  : From ES6 to Javascript 2.0. What use today ? par Jon...
Open World Forum 2014 : From ES6 to Javascript 2.0. What use today ? par Jon...ALTER WAY
 
Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent
Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent
Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent ALTER WAY
 
Séminaire Big Data Alter Way - Elasticsearch - octobre 2014
Séminaire Big Data Alter Way - Elasticsearch - octobre 2014Séminaire Big Data Alter Way - Elasticsearch - octobre 2014
Séminaire Big Data Alter Way - Elasticsearch - octobre 2014ALTER WAY
 
Meetup Drupal Paris : Connexion Drupal et Elasticsearch
Meetup Drupal Paris : Connexion Drupal et Elasticsearch Meetup Drupal Paris : Connexion Drupal et Elasticsearch
Meetup Drupal Paris : Connexion Drupal et Elasticsearch ALTER WAY
 
Solutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSA
Solutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSASolutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSA
Solutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSAALTER WAY
 
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...ALTER WAY
 
Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF
Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF
Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF ALTER WAY
 
Elasticsearch : petit déjeuner du 13 mars 2014
Elasticsearch : petit déjeuner du 13 mars 2014Elasticsearch : petit déjeuner du 13 mars 2014
Elasticsearch : petit déjeuner du 13 mars 2014ALTER WAY
 
Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014ALTER WAY
 
Présentation Drupal - Global Training Days
Présentation Drupal - Global Training DaysPrésentation Drupal - Global Training Days
Présentation Drupal - Global Training DaysALTER WAY
 
OpenStack havana tour d'horizon
OpenStack havana tour d'horizonOpenStack havana tour d'horizon
OpenStack havana tour d'horizonALTER WAY
 
H2O, le Cloud par Alter Way
H2O, le Cloud par Alter WayH2O, le Cloud par Alter Way
H2O, le Cloud par Alter WayALTER WAY
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php ALTER WAY
 
Reprise sur incident , par Jean Marc Fontaine
Reprise sur incident , par Jean Marc FontaineReprise sur incident , par Jean Marc Fontaine
Reprise sur incident , par Jean Marc FontaineALTER WAY
 
Organiser efficacement son depot de code par Jean Marc Fontaine
Organiser efficacement son depot de code par Jean Marc FontaineOrganiser efficacement son depot de code par Jean Marc Fontaine
Organiser efficacement son depot de code par Jean Marc FontaineALTER WAY
 
Objets patterns et genie logiciel , par Julien Pauli
Objets patterns et genie logiciel , par Julien PauliObjets patterns et genie logiciel , par Julien Pauli
Objets patterns et genie logiciel , par Julien PauliALTER WAY
 

Plus de ALTER WAY (20)

#sharingLille : L'Open Source pour une société numérique ouverte, transparent...
#sharingLille : L'Open Source pour une société numérique ouverte, transparent...#sharingLille : L'Open Source pour une société numérique ouverte, transparent...
#sharingLille : L'Open Source pour une société numérique ouverte, transparent...
 
Flyer promotions Alter Way Formation Avril Mai 2015
Flyer promotions Alter Way Formation Avril Mai 2015Flyer promotions Alter Way Formation Avril Mai 2015
Flyer promotions Alter Way Formation Avril Mai 2015
 
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker  : des conteneurs pour tout faire ? Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
 
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?Alter Way's digitalks - Docker  : des conteneurs pour tout faire ?
Alter Way's digitalks - Docker : des conteneurs pour tout faire ?
 
Open World Forum 2014 : From ES6 to Javascript 2.0. What use today ? par Jon...
Open World Forum 2014  : From ES6 to Javascript 2.0. What use today ? par Jon...Open World Forum 2014  : From ES6 to Javascript 2.0. What use today ? par Jon...
Open World Forum 2014 : From ES6 to Javascript 2.0. What use today ? par Jon...
 
Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent
Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent
Open World Forum 2014 : Guerre des IAAS par Stéphane Vincent
 
Séminaire Big Data Alter Way - Elasticsearch - octobre 2014
Séminaire Big Data Alter Way - Elasticsearch - octobre 2014Séminaire Big Data Alter Way - Elasticsearch - octobre 2014
Séminaire Big Data Alter Way - Elasticsearch - octobre 2014
 
Meetup Drupal Paris : Connexion Drupal et Elasticsearch
Meetup Drupal Paris : Connexion Drupal et Elasticsearch Meetup Drupal Paris : Connexion Drupal et Elasticsearch
Meetup Drupal Paris : Connexion Drupal et Elasticsearch
 
Solutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSA
Solutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSASolutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSA
Solutions Linux 2014 – Alter Way : Révélations sur les pratiques de la NSA
 
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
Solutions Linux 2014 – Alter Way : Industrialisation des développements en Ja...
 
Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF
Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF
Solutions Linux 2014 - Alter Way : Évolutions des back offices des CMS/CMF
 
Elasticsearch : petit déjeuner du 13 mars 2014
Elasticsearch : petit déjeuner du 13 mars 2014Elasticsearch : petit déjeuner du 13 mars 2014
Elasticsearch : petit déjeuner du 13 mars 2014
 
Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014
 
Présentation Drupal - Global Training Days
Présentation Drupal - Global Training DaysPrésentation Drupal - Global Training Days
Présentation Drupal - Global Training Days
 
OpenStack havana tour d'horizon
OpenStack havana tour d'horizonOpenStack havana tour d'horizon
OpenStack havana tour d'horizon
 
H2O, le Cloud par Alter Way
H2O, le Cloud par Alter WayH2O, le Cloud par Alter Way
H2O, le Cloud par Alter Way
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php
 
Reprise sur incident , par Jean Marc Fontaine
Reprise sur incident , par Jean Marc FontaineReprise sur incident , par Jean Marc Fontaine
Reprise sur incident , par Jean Marc Fontaine
 
Organiser efficacement son depot de code par Jean Marc Fontaine
Organiser efficacement son depot de code par Jean Marc FontaineOrganiser efficacement son depot de code par Jean Marc Fontaine
Organiser efficacement son depot de code par Jean Marc Fontaine
 
Objets patterns et genie logiciel , par Julien Pauli
Objets patterns et genie logiciel , par Julien PauliObjets patterns et genie logiciel , par Julien Pauli
Objets patterns et genie logiciel , par Julien Pauli
 

Drupagora 2019 : Drupal, accessibilité et RGAA

  • 1. Drupal, Accessibilité et RGAA Retours d'expériences et bonnes pratiques 2019 1
  • 2. SOMMAIRE 01. Présentations des intervenant(e)s 02. Les projets 03. C’est quoi l’accessibilité numérique ? 04. L’accessibilité dans chaque étape du projet 05. Comment tester l’accessibilité numérique ? 06. Conclusion 2
  • 4. bonjour! Julie PLENO CHEF DE PROJET informatique CDC 4
  • 5. bonjour! Mathieu BOUILLOT Lead Front-End Designer - Intégrateur Référent en accessibilité numérique @MatteoBZ 5
  • 6. 6 02. Les projets La création de sites grand public comme : ● Compte personnel d’activité (2016) – refonte en cours ● Ciclade - gestion des comptes et avoirs en déshérence (2017) ● Consignations (2018) - Labellisé e-accessible RGAA (niveau AA) ● La création du Portail Handicap (2019) Nous a conduit à renforcer la prise en compte de l’accessibilité numérique de nos sites.
  • 8. Quelle est la première chose à laquelle vous pensez quand vous entendez le mot accessibilité ? 8
  • 9. À la base, un gros cliché ! Une image faussée du handicap, où l’on voit systématiquement une personne aveugle, sourde, en fauteuil roulant... 9
  • 10. “ Mais on ne va pas se mentir... Les handicapés ne sont pas notre cible, il n’est pas nécessaire de rajouter ça dans le projet Qu’est-ce qu’on risque si on ne le fait pas ? Quel est le retour sur investissement ? Il est codé en braille ton site accessible !?! 10
  • 11. Qu’est-ce qu’on risque si on ne le fait pas ? 11
  • 12. 12 Qu’est-ce qu’on risque si on ne le fait pas ? 1er risque . Empêcher des utilisateurs d’utiliser vos services et donc de perdre en audience. 3ème risque . Si vous ne corrigez que les bugs pour les valides et pas ceux affectant l’accès pour les personnes handicapées, vous faites de la discrimination, ce qui est passible d’une sanction pénale. Selon l’article 225-2 du code pénal : ◇ Entre 3 et 5 ans d'emprisonnement ◇ 45 000 à 75 000 euros d'amende. 2ème risque . Une pénalité pouvant s’élever à 5000€ par an et par site ou application + renouvelable Loi de la République numérique - article 106 de la loi n° 2016-1321
  • 13. 13 15 millions de personnes en situation de handicap en France 21,5% de la population
  • 14. Précision 1 : Le handicap n’est pas lié à un état mais à une situation 14 Une personne aveugle n’est pas handicapée du fait qu’elle est aveugle (état), elle est handicapée uniquement dans les situations où la vue est nécessaire pour interagir (situation). source
  • 15. Précision 2 : Tout le monde peut être en situation de handicap 15 ◇ On a oublié ses lunettes à la maison ◇ Clavier / souris qui ne fonctionnent pas ◇ Descendre d’un trottoir avec une poussette ou des béquilles ◇ On s’est cassé un bras ◇ Smartphone en plein soleil ◇ etc.
  • 16. C’est la possibilité pour toutes et tous (sans distinction de sexe, d’âge, de situation ou de handicap), d’utiliser les outils informatiques, les logiciels ou applications et de consulter les ressources numériques, quelle que soit leur façon d’y accéder. Les contenus et services doivent être perceptibles, utilisables, compréhensibles et robustes. C’est un principe élémentaire d’égalité, une obligation citoyenne. source 16 Définition de l’accessibilité numérique
  • 17. Les contenus et services doivent être : Perceptible Les éléments doivent être distinguables visuellement, les contenus non textuels comme les images ou les vidéos doivent avoir une alternative textuelle. Utilisable Le contenu doit être accessible à la fois à la souris et au clavier, l’utilisateur doit pouvoir s’orienter et se situer dans le site. Compréhensible Le contenu doit être lisible, prévisible et le système doit aider à corriger les erreurs de saisie. Robuste Le contenu doit être accessible quel que soit l’appareil utilisé et ses évolutions futures. 17
  • 19. 04. L’accessibilité dans chaque étape du projet 19 BUILD RUN
  • 20. 04. L’accessibilité dans chaque étape du projet 20 Amont Projet Aval Cadrage et cahier des charges Conception UX / UI Développement Front / Back Intégration des contenus Mise à jour & contribution Prise en amont de la production technique, elle est plus simple et moins coûteuse à mettre en œuvre qu'en fin de chaîne de production - comme le responsive web design à l’époque -
  • 21. Cadrage et cahier des charges 21 ● Un effort significatif ● Des impacts sur la charge et le temps du projet ◇ +/- 30% de gestion de projet ◇ +/- 20% de conception (ux-ui) ◇ +/- 30% de dev front-end ◇ +/- 30% de dev back-end
  • 22. Conception UX / UI Structurer l’information Navigations, niveau de titre, liens explicites... Présenter l’information Contraste de couleur, lisibilité typographique, formulaire, tableau, focus clavier… S’adapter à la charte client 22
  • 23. Développement back-end / front-end ◇ Sémantique ◇ Hiérarchie des titres ◇ Code valide W3C ◇ Formulaire en erreur ◇ Scripts ◇ Capacité du CMS (webform, facette et wysiwyg) 23
  • 24. Intégration des contenus L’ossature peut être accessible, les contenus doivent l’être également. L’ennemi : le wysiwyg 😡 Attention : un contenu contribué de la mauvaise façon fera perdre l’accessibilité d’un site (lien non-explicite et image mal contribué) 24
  • 25. L’audit & corrections Un audit en 2 phases. ◇ 1ère phase : à la fin du dev ◇ 2ème phase : suite aux corrections Besoin de sensibiliser les équipes pour comprendre et mettre en oeuvre les corrections. Besoin d’une expertise pour être sûr 25
  • 27. Le RGAA Depuis 2009, la DINSIC* édite le RGAA qui regroupe les critères et les tests permettant de vérifier la conformité d’un site internet public. Le RGAA** est basé sur les WCAG 2.0 (2008) et WCAG 2.1 (2018). Les WCAG*** sont les règles internationales pour l’accessibilité des contenus web (W3C). Le RGAA permet de tester le respect de ces règles. 27 * DINSIC : Direction Interministérielle du Numérique et du Système d'Information et de Communication ** RGAA : Référentiel Général d’Accessibilité pour les Administrations *** WCAG : Web Content Accessibility Guidelines (prononcer “ouécague”)
  • 28. 28 133 critères dans le RGAA 3 niveaux dans le référentiel : Niveau A : niveau minimum 82 critères.. Niveau AA : niveau d’amélioration 20 critères.. Niveau AAA : niveau d’optimisation 31 critères.. Pour qu’un site soit dit accessible, il doit avoir le niveau AA minimum (soit 82 + 20)
  • 29. 29 Pour en savoir plus La DINSIC édite des guides d’initiation au RGAA : ● design ● développement ● intégration ● édito ● Et un guide des impacts utilisateurs des défauts d’accessibilité
  • 30. 30 Côté outils Différents plugins / addons : ● Sémantique HTML : Landmarks pour Chrome ou Firefox pour tester la structure HTML5 + ARIA ● Hiérarchie de titre : HeadingsMap Firefox et Chrome ● Pour tester avec le RGAA : Assistant RGAA pour Chrome et Firefox
  • 32. Conclusion 32 ● Ne pas perdre l’objectif premier (pour qui on fait tout ça). ● L’accessibilité numérique est un vaste sujet, parfois d’expert mais quand on le prend dès le début du projet, les efforts sont lissés sur les différents pôles métiers. ● Former / sensibiliser les équipes ● Sur les projets qui se suivent ou dans le même écosystème : ○ Bien penser à conserver une chaîne complète d’accessibilité pour ne pas rompre l’expérience utilisateur ● Suivre les évolutions de l’accessibilité (constante et rapide)