Connaître et développer les outils de mise en accessibilité de son site internet

1. 15 ET 16 SEPTEMBRE 2022 • ISSY-LES-MOULINEAUX
14e Rencontres nationales de la communication numérique
Atelier
Accessibilité Web
Philippe Trotin
Directeur inclusion & accessibilité Numérique
Microsoft France
ptrotin@microsoft.com
Juliette Neau
Community web manager
Communauté d’agglomération du Sicoval
juliette.neau@sicoval.fr
#comnumérique

2. Introduction à
l’accessibilité numérique

3. Nous sommes tous différents

4. Nous devons fournir des solutions pour tous
Mettre à disposition des solutions numériques assurant une utilisation
indépendamment des capacités ou des préférences des utilisateurs.
ACCESSIBILITÉ NUMÉRIQUE

5. L’Accessibilité Numérique regroupe de nombreux sujets

6. Accessibilité
des applications

7. Accessibilité Numérique | Des obligations pour les applications
Externe
Accessibilité des sites
Internet
Interne
Accessibilité des outils
pour les employés
Internet
Déclaration d’accessibilité
ou Schéma directeur
Internet
Respect des standards
RGAA / WCAG
Communication
Accessibilité des
documents
Vérif. Accessibilité M365
Page « accessibilité »
Emploi
Loi anti-discrimination en
France
Applications
Rapport de conformité des
éditeurs logiciels
Communication
Communication accessible
aux employés
http://aka.ms/msacr Vérif. Accessibilité M365
Solutions numériques
accessibles
Que l’on soit en externe ou en interne, il est important de se pencher
sur l’accessibilité des applications pour se conformer aux règlementations.

8. WCAG : Web Content Accessibility Guidelines
Les standards du web

9. Les grands principes WCAG
Les informations et les
composants de l'interface
doivent être présentés à
l'utilisateur de façon à ce
qu'il puisse les percevoir.
Les informations et
l'utilisation de l'interface
utilisateur doivent être
compréhensibles.
Les composants de l'interface
utilisateur et de navigation
doivent être utilisables.
Le contenu doit être
suffisamment robuste pour
être interprété de manière
fiable par une large variété
de technologies d'assistance.

10. WCAG : Web Content Accessibility Guidelines
• Descriptions des images et tableaux
• Couleur, contraste
• Orientation écran
• Control du son
• Fournir aux aides techniques les
informations suffisantes
• Accès aux fonctionnalités de manière
prévisibles
• Assistance à la saisie
• Pilotage au clavier
• Délai suffisant pour l’utilisateur
• Eléments pour se repérer sur le site
• Compatibilité avec les technologies
d’assistance
• Evolutivité de la solution

11. La législation
en France

12. Handicap | La réglementation en France (loi de 2005)
Une inclusion basée sur la loi du
11 février 2005 pour l’égalité
des droits et des chances, la
participation et la citoyenneté
des personnes handicapées.
5 grands principes sont énoncés :
1. Le droit à la compensation financière
2. Le droit à la scolarité en milieu ordinaire
3. Le droit à la non-discrimination au travail
4. Le droit à l’accessibilité, un environnement pour tous
5. La création des MDPH
6%

13. Accessibilité | Les dernières réformes
Source : https://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXT000038811937&categorieLien=id
Décret n° 2019-768 du 24 juillet 2019
Accessibilité aux personnes handicapées des services de communication au public en ligne.
Sanctions
(par service numérique non accessible)
• Pour le Secteur Public et les grandes Entreprises
(CA > 250 millions d’euros) :
20.000 euros
• Pour les communes et établissements publics de
moins de 5 000 habitants… :
2.000 euros

14. Accessibilité | Exemple de page accessibilité

15. Exemple d’outil de tests
pour l’accessibilité

16. Accessibility Insights | Des outils de tests
Accessibility Insights
https://accessibilityinsights.io/

17. Accessibility Insights | Méthodologie en deux étapes

18. Témoignage
Communauté
d’agglomération du Sicoval

19. • Refonte de l’écosystème digital du SICOVAL
Février 2022 : site institutionnel,
site d’attractivité économique,
site touristique
• Forte exigence en matière d’accessibilité :
volet RGAA important
dans la conduite du projet
• Taux de conformité RGAA : 88%

20. L’accessibilité du site Sicoval.fr
• Un engagement politique en faveur de l’inclusion numérique :
Territoire d'actions pour un numérique inclusif (TANI)
Un souhait d’exemplarité
• Le respect du cadre légal :
Loi de 2005 pour l’égalité des droits et des chances
Des sanctions financières jusqu’à 20 000 € par an et par site
• Les bonnes pratiques d’accessibilité profitent à tous les publics :
Essentielle pour certains, l’accessibilité apporte du confort et améliore l’expérience utilisateur de tou·te·s :
- sous-titres et transcription textuelle des vidéos : dans un lieu bruyant
- bon contraste de couleurs : en cas de lumière vive
- bonne hiérarchisation des contenus : une information plus lisible pour tou·te·s
• Un cercle vertueux pour le référencement :
les alternatives textuelles des images

21. L’accessibilité des sites web - RGAA
• 12 millions de personnes en situation de handicap en France
Le RGAA :
• Garantir l’accès et l’utilisation des contenus et services des sites web pour tous
quels que soient leur situation, leur handicap ou le matériel utilisé
• 106 critères :
de 50 à 99% de critères conformes : conformité partielle
100% de critères conformes : conformité totale
• Publier en ligne une déclaration indiquant l’état d’accessibilité du site
Afficher la conformité dès la page d’accueil

22. L’accessibilité des sites web - RGAA
Exemples de critères
• Bon usage de la hiérarchie des titres
• Les images porteuses d’information (infographies, logos)
possèdent un texte alternatif pertinent et adapté
• Les images décoratives possèdent une alternative vide
• Transcription des vidéos
• Intitulés de liens explicites (bannir « cliquez ici »)
• Les contrastes de couleur sont suffisamment élevés
• Pas de sauts de lignes multiples à des fins de
présentation
• Les iframes sont correctement identifiées
• Les scripts sont contrôlables au clavier

23. L’accessibilité, une expertise transverse qui doit être partagée :
• par tous les acteurs qui interviennent sur le projet :
qu’ils soient internes ou externes
• à chaque étape : design, spécifications, développement front-end et back-end,
intégration, recette, éditorial…

24. Les acteurs du projet
En interne (pilotage et socle éditorial) :
• Les équipes doivent être sensibilisées et formées
• Décideurs, chef de projet, contributeurs
• Sensibilisation et découverte de l’accessibilité numérique :
documentations et webinaires DINUM
½ journée de formation
• Gestion de projet accessible pour le pilote de projet web :
1 à 3 jours de formation
• Produire des contenus accessibles :
2 à 3 jours de formation

25. Les acteurs du projet
Le prestataire (socle technique et audit) :
• Etre accompagné par un prestataire :
dont les équipes maitrisent l’accessibilité
chefferie de projet, UX / UI, webdesigner, développeurs frontend et backend…
-> une accessibilité intégrée dès la phase de conception et à toutes les étapes réduit considérablement
le nombre d’anomalies
• Projet Sicoval mené avec l’agence STRATIS reconnue pour son expertise RGAA
expert certifié qui supervise les équipes en mode Agile
• Importance de la phase de consultation
références, certifications, exemples de rapport d’audit, méthodologie

26. Les étapes clefs
1-Cahier des charges +
préparation du budget
•Chapitre dédié au RGAA
2-Appel d’offres
•Un des critères
d’évaluation des offres
3- Conception et
développement du site +
Production et intégration des
contenus
•Volet technique RGAA
•Volet éditorial RGAA

27. 4- Réalisation de l’audit
d’accessibilité initial
• Échantillon de 17 pages
testé par un expert
accessibilité
• Réalisation de l’audit 1
mois après la mise en
ligne
• Conformité partielle
avant correctifs -> très
bon score brut de
conception
5- Campagne corrective
(éditorial et technique)
• STRATIS et l’équipe
SICOVAL
• 29 correctifs de
contenus, 23 correctifs
techniques Backend et
Frontend
6- Audit de contrôle, note
définitive, déclaration de
conformité
• 88%
• Classe Sicoval.fr parmi
les sites les plus
vertueux en matière
d’accessibilité
10% du budget total de conception
Temps agent de production et saisie des éléments RGAA

28. Et maintenant ? Le pilotage continu
• L'audit n'est pas une fin au soi, il reflète le taux de conformité à l'instant T
-> s’inscrire dans la durée,
-> intégrer les bonnes pratiques accessibilité à chaque saisie de contenus,
-> attention aux nouvelles fonctionnalités
• Continuer à sensibiliser et former les contributeurs
• Tests utilisateurs avec un panel varié de personnes en situation de handicap
• Sensibilisation et accompagnement des communes – déploiement usine à sites
• Schéma pluriannuel d’accessibilité sur 3 ans décliné en plan annuel d’actions (feuille de route pour la
mise en accessibilité de vos services)
• Mise en conformité de l’application mobile, portail usagers, site intranet etc.
-> Une démarche d’amélioration continue

29. Quelques outils (DINUM)
• Le diagnostic flash : estimer la qualité, l’accessibilité, le design d’un site ou d’une démarche en ligne
avoir un avis sur le livrable d’un fournisseur par exemple
• Le jeu de l’OAA : un jeu de cartes dépliable qui vous guide dans la mise en accessibilité de vos services. Plein d’étapes
pour vous accompagner.
• Les fiches métiers : les actions et outils pour bien prendre en compte l’accessibilité. Fiches développeurs, décideurs,
experts, référents accessibilité, designers, contributeurs.
• L’assistant RGAA : extension de navigateur, apporte une assistance à la réalisation des audits d’accessibilité. Pour chaque
critère du RGAA, il indique les tests de vérification à effectuer.
Des exemples de sites totalement conformes :
• https://www.service-public.fr/
• https://www.numerique.gouv.fr/
• https://www.monparcourshandicap.gouv.fr/
• https://handicap.gouv.fr

30. Accessibilité
des documents

31. Créez du contenu accessible
Créez des documents accessibles
• Vérifiez l’accessibilité des documents
• Structurez vos documents
Créez des vidéos accessibles
• Sous-titrez les vidéos
• Donner un titre et une description

32. Créez plus rapidement vos documents

33. Créez des documents accessibles avec le vérificateur d’accessibilité
Utilisez le vérificateur d’accessibilité avant de finaliser vos documents.

34. Ils nous accompagnent toute l’année
Merci pour votre attention
RESTEZ CONNECTÉS
ET RETROUVEZ LES PRÉSENTATIONS SUR CAP-COM.ORG
#comnumérique