Le Comptoir OCTO - Accessibilité en agilité : REX sur IDF Mobilités

2. 2 Thereisabetterway OCTO Part of Accenture © 2020 - All rights reserved Romy Duhem-Verdière Designer UX & a11y certifiée AccessiWeb 2016 anciennement dev front 20 ans d’expérience web Chez OCTO Technology rdv@octo.com twitter : @tetue Virgile Chloë Jean Malek+

3. 3 Thereisabetterway OCTO Part of Accenture © 2020 - All rights reserved IDFM = Île-de-France Mobilités Portail de tous les transports en commun d’Île-de-France https://www.iledefrance-mobilites.fr 11 millions de franciliens se déplacent au moins une fois par jour. 35 k de visiteurs / jour sur le portail IDFM. 20 à 30 % des internautes ont un accès difficile, partiel ou impossible aux informations et services en ligne. a11y = accessibilité (abréviation numéronyme de « accessibility ») RGAA = Référentiel Général d’Amélioration de l’Accessibilité = 106 critères (version 4 - 2019) Obligations légales pour IDFM (secteur public) : - conformité à 100 % (loi de 2005) - publication du niveau (décret de 2019) Le RGAA n’est qu’une grille de recette = intervient donc trop tard = ne nous dit pas comment faire encore moins de façon agile

4. Thereisabetterway 4 OCTO Part of Accenture © 2020 - All rights reserved À nous d’apporter notre méthode de mise en œuvre : agilité + a11y + coaching Référentiel Général d’Amélioration de l’Accessibilité RGAA = tous les profils sont concernés + c’est un travail d’équipe (et non pas d’expert solo) 61 % développement front HTML/JS/ARIA 26 % productions des contenus (textes, images, graphiques, PDF, vidéos, transcripts…) 13 % design (UX+UI) inclusif et accessible 106 critères 335 tests = sert à vérifier la conformité à la norme internationale d’accessibilité (WCAG) Ce n’est qu’une grille de recette - qui intervient donc trop tard - qui ne dit pas comment faire (encore moins en agilité)

5. OCTO Part of Accenture Digital © 2020 - All rights reserved 100 % 50 % 0 % = ancien niveau AA 5 non conforme partiellement conforme totalement conforme Objectif très ambitieux car, bien que ce soit le niveau légalement requis, dans les faits, celui-ci est rarement atteint. La mise en accessibilité est une ascension longue et escarpée Niveau d’accessibilité (pourcentage de conformité au RGAA) et mention textuelle correspondante à afficher sur l’écran d’accueil m ise en conform ité (auditetsescorrectifs) O C TO accom pagne la m ise en accessibilité

6. Thereisabetterway 6 OCTO Part of Accenture © 2020 - All rights reserved => besoin de sensibiliser/former/aligner tout le monde On part de loin… audit RGAA (hors périmètre) Conformité RGAA septembre 2019 ➔ Sensibilisation de toute l’équipe à l’accessibilité + alignement sur un objectif atteignable ➔ Formations express (3hx2) ◆ Bases du design accessible ◆ Initiation au dev accessible (mais incomplètes et insuffisantes) ➔ Mise en place de tests auto

7. Thereisabetterway 7 OCTO Part of Accenture © 2020 - All rights reserved Tests auto 1. Valider le HTML https://validator.w3.org 2. Tests auto d’accessibilité https://pa11y.org Web Accessibility Evaluation Tools List : https://www.w3.org/WAI/ER/tools/

8. 8 Thereisabetterway OCTO Part of Accenture © 2020 - All rights reserved 25 % Seuls 25 % environ des tests d’accessibilité sont automatisables. Le reste doit être vérifié humainement, par des tests manuels. Cela signifie qu’un score de 100 % aux tests auto équivaut à environ 25 % de conformité RGAA.

9. Thereisabetterway 9 OCTO Part of Accenture © 2020 - All rights reserved Au cœur des itérations atelier 3 amigos recette UX + UI + a11y notices AcceDe Web https://www.accede-web.com tous les 15 jours audit RGAA (hors périmètre) Conformité RGAA

10. Thereisabetterway 10 OCTO Part of Accenture © 2020 - All rights reserved Atelier « 3 amigos » pour éviter les loupés, les aller-retours entre dev et designers… et faciliter la rédactions des US Quand ? 1h en début de sprint pour chaque nouveau sujet 1. Pitch de 10 minutes Présentation des maquettes (UX et/ou UI), du besoin utilisateur auxquelles elles répondent, leur narration, contexte et points d’attention (UX, UI et a11y) 2. Questions / réponses Échanges avec les développeurs pour s’assurer de la bonne compréhension des enjeux, de la faisabilité, sans oublier les exigences d’accessibilité. 3. Après - Ajustements consécutifs des maquettes - Rédaction consécutive des US - Fournir les ressources pour le dev ➔ Garantir la compréhension de l’expérience utilisateur y compris a11y design accessibilité dev front

11. Thereisabetterway 11 OCTO Part of Accenture © 2020 - All rights reserved Notices AcceDe Web Voir en ligne : https://www.accede-web.com Conception fonctionnelle et graphique pour le design Intégration HTML & CSS pour le dev front Interfaces riches pour le dev JS Accessibilité éditoriale pour les contenus À utiliser en conception et dans la rédaction des users stories (US) pour guider les développements.

12. 12 Recette triple : UX + UI + a11y Inspection manuelle en 10 tests simples : naviguer au clavier, agrandir les caractères, mesurer les contrastes, vérifier les titres, les alternatives textuelles aux images, vidéo, etc. Voir en ligne : Easy Checks – A First Review of Web Accessibility, by Web Accessibility Initiative (WAI) : https://www.w3.org/WAI/test-evaluate/preliminary/

14. Thereisabetterway 14 OCTO Part of Accenture © 2020 - All rights reserved Palette accessible Palette des couleurs du portail IDFM, aux contrastes vérifiés Créer facilement une palette de couleurs accessibles, AlsaCréations : https://www.alsacreations.com/tuto/lire/1619-creer-facilement-une-palette-de-couleurs-accessibles.html

15. Thereisabetterway 15 OCTO Part of Accenture © 2020 - All rights reserved Alternatives textuelles Description détaillée (si besoin) sous chaque « média complexe » (infographie, vidéo, etc.) Possibilité d’afficher des transcriptions textuelles pour les (nombreuses) infographies du site (et les vidéos). Voir un exemple en ligne : https://www.iledefrance-mobilites.fr/decouvrir/financements

16. Thereisabetterway 16 OCTO Part of Accenture © 2020 - All rights reserved Naviguer au clavier Faciliter la navigation au clavier par des raccourcis de retour au sommaire suffisamment fréquents dans la page. Voir en ligne : https://www.iledefrance-mobilites.fr/titres-et-tarifs/detail/forfait-navigo-mois

17. Thereisabetterway 17 OCTO Part of Accenture © 2020 - All rights reserved Attention C’est en ligne (depuis mars 2020) : https://www.iledefrance-mobilites.fr l’accessibilité, ÇA NE SE VOIT PAS, ça se manipule ! => naviguez au clavier, sans image, agrandissez les caractères, etc. pour constater que le site est robuste et reste praticable dans toutes les situations de consultation.

19. Thereisabetterway 19 19 audit RGAA = 40 pages Word, 1300 lignes Excel… (c’est aussi 10 jours de travail d’expert RGAA qui effectue 335 tests par page sur un échantillon représentatif de 20 pages)

20. 20 Thereisabetterway OCTO Part of Accenture © 2020 - All rights reserved 41 % L’audit du site, réalisé par la société Temesis, révèle une conformité globale au RGAA de 41 % au 25/02/2020. « accessibilité non conforme »

21. OCTO Part of Accenture Digital © 2020 - All rights reserved 21 Correctifs Après répartition par profil : - une grosse part des correctifs relèvent du dev front (estimés à 5 à 10J) - l’autre grosse part relève de la saisie des contenus (non estimé)

22. 22 Thereisabetterway OCTO Part of Accenture © 2020 - All rights reserved 70 % Après correctifs, la contre-visite révèle une conformité globale au RGAA de 70 % au 01/06/2020. « accessibilité partiellement conforme »

23. OCTO Part of Accenture Digital © 2020 - All rights reserved 100 % 50 % 0 % = ancien niveau AA 23 non conforme partiellement conforme totalement conforme Reste à faire ❏ Problèmes relatifs aux images (alternatives incorrectes) et aux structures de contenu (titres, liens…) ❏ Manque d’alternative accessible aux contenus au format PDF. ❏ Former l’équipe de rédaction. juin 2020 contre-visite : 70 % février 2020 premier audit : 41 % sept. 2019 début du projet ~ 1 an Afficher le niveau pour répondre à l’obligation légale de publication (déclaration de conformité, schéma pluriannel, etc.) Maintenir sur la durée ❏ Maintenir les tests (auto & manuels) ❏ Perpétuer les bonnes pratiques ❏ Consolider via design system ❏ Sensibiliser les nouveaux venus et les autres équipes ❏ Sur un périmètre qui s’agrandit

24. Thereisabetterway 24 OCTO Part of Accenture © 2020 - All rights reserved 24 Thereisabetterway Ce que nous avons appris ➔ On part tou-tes de loin : même si c’est une préoccupation aussi ancienne que le Web, aujourd’hui pleinement maîtrisée, l’accessibilité n’est toujours pas enseignée et reste largement méconnue. ◆ Il y a beaucoup à faire, mais beaucoup de petites choses simples ; la difficulté est qu’elles sont méconnues. ◆ Prévoir de former l’équipe en début de projet n’est pas un luxe ! ➔ En accessibilité, le mieux est l’ennemi du bien : ◆ ne pas être trop ambitieux (ne pas viser le top niveau d’emblée) ; ◆ avancer progressivement, en fixant des objectifs intermédiaires ; ◆ et en consolidant chaque étape. ➔ L’accessibilité est un travail d’équipe : ◆ La réussite ne peut être portée par la seule intervention d’un(e) expert(e) ; ◆ car tous les profils sont concernés, y compris le commanditaire, y compris les rédacteurs.

26. OCTO Part of Accenture Digital © 2020 - All rights reserved 100 % 50 % 0 % 26 non conforme partiellement conforme totalement conforme Pas à pas : gravir progressivement les paliers d’accessibilité Tests d’utilisabilité (avec handicapés) et correctifs finaux Auditer la conformité au RGAA Tester avec assistances techniques (synthèse vocale…) Inspecter manuellement : 10 Easy Checks Appliquer les notices AcceDe Web Mettre en place de tests automatisés Appliquer les bonnes pratiques Opquast Valider le code HTML Recruter un dev front HTML/JS/ARIA

27. 27 Thereisabetterway OCTO Part of Accenture © 2020 - All rights reserved 7 Checks quali périodiques - Audit rapide (tous les 3 à 6 mois) - Revue de code accessible (4 x 1/2J par dev front) 6Conformité - Audit de conformité - Correctifs (5 à 10J) - Visite de contrôle - Affichage du niveau - Rédaction et publication de la déclaration de conformité et du schéma pluriannuel 1 Bootstrap de l’ équipe produit 1J tous les 6 à 3 mois - Sensibilisation aux fondamentaux de l’accessibilité : difficultés utilisateurs, cadre légal, normes, méthode, ressources… - Audit rapide - Capacités de l’équipe - Détermination des objectifs - Plan d’actions (quick wins) 2Formations - au design accessible (2J) - au dev accessible (2J à 5J) - au PO accessible (1J) - à la contribution accessible (1 à 2J) Voir les formations au catalogue : https://www.octo.academy/fr/nos-formation s/115-numerique-responsable Organisation du delivery - Prévoir une colonne dédiée dans le Kanban - Adapter le format des US - Choisir des metrics Recette accessible - Tests automatisés d’accessibilité dans la CI - Inspection manuelle d’accessibilité (Easy Checks) 4Rituels - Atelier 3 amigos - Co-rédaction des US - Live design 6Démo accessible - Avec synthèse vocale, en mobilité, en naviguant au clavier, en vision daltonienne, etc. Fabriquer accessible : delivery agile a11y

28. 28 Thereisabetterway OCTO Part of Accenture © 2020 - All rights reserved Référent accessibilité pilote l’application de la politique d’accessibilité Profils à recruter ou à former La bonne équipe Dev Front maîtrisant HTML/JS/ARIA accessibles coPO sachant prioriser et recetter l’accessibilité Expert RGAA (si nécessaire) pour vérifier la conformité Rédacteurs formés à la production accessible de contenus Designer formé au design inclusif accessible