Quand on parle d’accessibilité, on fait souvent référence à la loi dite « loi Handicap » de 2005. En 2016, la loi République Numérique est venue mettre à jour cette réglementation en s’appuyant sur le RGAA, le Référentiel Général d’Accessibilité pour les Administrations. La Caisse des Dépôts a apporté un soin particulier pour rendre un maximum de ses sites Drupal accessibles, quels que soient les techniques, périphériques, navigateurs utilisés, pour tous les utilisateurs en n'excluant personne, en particulier les personnes en situation de handicap. Alter Way a pu accompagner la Caisse des Dépôts dans cette dynamique de mise en conformité au RGAA, qui impacte toute la chaîne de production d’un site internet, depuis sa conception jusqu’à sa contribution.

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

3. 01.
Présentation des
intervenant(e)s
3

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.

7. 03.
C’est quoi l’accessibilité
numérique ?
7

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

18. 04.
L’accessibilité dans
chaque étape du projet
18

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

26. 05.
Comment tester
l’accessibilité numérique ?
26

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

31. 06.
Conclusion
31

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)

33. Merci !
33