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

1
Thereisabetterway
OCTO Part of Accenture © 2020 - All rights reserved
Accessibilité
en agilité
Retour d’expérience sur Île-de-France Mobilités
Comptoir OCTO du 26/11/2020

2
Thereisabetterway
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
Thereisabetterway
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

Thereisabetterway
4
À 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é)

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é

Thereisabetterway
6
=> 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

Thereisabetterway
7
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
Thereisabetterway
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.

Thereisabetterway
9
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

Thereisabetterway
10
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

Thereisabetterway
11
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
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/

Thereisabetterway
13
Exemples

Thereisabetterway
14
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

Thereisabetterway
15
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

Thereisabetterway
16
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

Thereisabetterway
17
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.

Thereisabetterway
18
Le projet est désormais prêt
à se confronter au RGAA
février
2020
audit RGAA
(hors périmètre)
Conformité
RGAA

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
Thereisabetterway
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 »

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
Thereisabetterway
70 %
Après correctifs, la contre-visite révèle une conformité globale au RGAA de 70 % au 01/06/2020.
« accessibilité partiellement conforme »

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

Thereisabetterway
24
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.

Thereisabetterway
25
Méthodo
recommandée
À retenir

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
Thereisabetterway
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
Thereisabetterway
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

Thereisabetterway
29

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

Recommandé

Recommandé

Contenu connexe

Plus de OCTO Technology

Plus de OCTO Technology (20)

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