SlideShare une entreprise Scribd logo
THERE
IS
A
BETTER
WAY
DIGITAL THINKERS & DOERS
OCTO TECHNOLOGY I PART OF ACCENTURE
4 Tech Trends du
Software Engineering
.2
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
OCTO
I
PART
OF
ACCENTURE
Une archipélisation des lieux de
travail post-Covid.
De forts enjeux sur le
Sustainable et la régulation IT.
Un contexte socio-
économique sous tensions.
Une année 2024
sous le signe de la
complexité, avec :
L’explosion de la Gen AI.
.3
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Le Hold-up de la GenAI
OCTO TALKS ! 4 Tech trends 2024 du Software Engineering.
Soufiane Keli
soufiane.keli@octo.com
- Lead AI apps
Architectures continues
et composables
Pierrette Bertrand
pierrette.bertrand@octo.com
- Lead Web apps
Le développement hybride :
pourquoi maintenant ?
Nicolas Laurent
nicolas.laurent@octo.com
- Lead Mobile apps
Accessibilité numérique :
il est temps de s'y mettre !
Romy Duhem-Verdière
romy.duhem-verdiere@octo.com
- Lead a11y, experte RGAA
9h15 9h45
10h30 11h00
.4
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved OCTO TECHNOLOGY I PART OF ACCENTURE
DIGITAL THINKERS & DOERS
THERE
IS
A
BETTER
WAY
.4
.5
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Le Hold-up de la GenAI
Les développeurs augmentés par l’IA.
La GenAI dans vos applications.
Deux sujets liés au Software Engineering en 2024 :
1
GenAI.
.6
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
L’IA excelle pour
les tâches simples,
répétitives, routinières
et fastidieuses.
.7
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Ce qui marche bien.
Compréhension du code
Apprentissage
> Découvrir de nouveaux frameworks ;
> Ghost “Pair programming” ;
> Explorer des solutions alternatives.
> Expliquer du code existant ;
> Expliquer des logs, des messages d’erreur ;
> Refactoring simple.
> Générer des petits bouts de code ;
> Générer de tests unitaires ;
> Générer des données de tests.
Les assistants GenAI marchent très bien pour :
● Faire des boilerplates ;
● Expliquer, résumer, traduire (code, log, config) ;
● Générer de la documentation.
Génération de code
.8
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Ce qui ne marche pas ou moins bien.
Gros refactoring
Designer une application
> Écouter le métier, poser des questions ;
> Faire du design applicatif ;
> Explorer des solutions alternatives.
> Limitation du contexte (Tokens) ;
> Prioriser ce qui marche ou pas ;
> Poser une stratégie de refactoring
(vision de la production, hot zone).
> Comprendre le contexte métier ;
> Intégrer les contraintes IT (choix par défaut) ;
> Déployer les pratiques de code ;
> Intégrer le code des autres développeurs.
Les assistants GenAI ne marchent pas très bien pour :
● Faire des applications ;
● Refactorer une application.
Créer une application
.9
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les gains de productivité sont réels, mais plutôt autour de 8%-12%
Source: McKinsey
Source: LesEchos
Source: BCG
Source: BAIN
40% Coder, représente au 30%à 40%d’une journée d’un software engineer.
Source: Microsoft
soit un gain théorique de 9% à 20% maximum.
.10
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les gains de productivité ne sont pas équi-répartis
0% 20% 50% 80% 100%
Percentile
Faible
Niveau
Niveau
Intermédiaire
Top
performers
Inflexion
Baisse
de qualité
Poche de
productivité
Gains
marginaux
Gains
marginaux
Efficacité
Productivité
.11
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Nous avons commencé le déploiement en janvier 2023.
Ceux qui
utilisent sont
satisfaits.
La ruée vers l’or ?
Tout le monde peut demander une licence
● 22 % des développeurs ont fait la demande ;
● 68 % l’utilisent beaucoup ou sont même accros ;
● Une Communauté de Pratique ;
● Un espace d’échange libre pour s’exprimer ;
● Le point de vue des détracteurs est important.
.12
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
0%
Aventuriers Adopteurs
précoces
Majorité
précoce
Suiveurs Retardataires
Opposants (20%)
Promoteurs (20%)
Temps
Utilisateurs
50%
100%
Gouffre
Neutres (60%)
Le change management une étape indispensable
Convaincre,
mais ne pas imposer.
Les assistants de
développement ont des
promoteurs et des
détracteurs. L’enjeu est de
convaincre la grande masse
neutre de les utiliser.
.13
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved OCTO TECHNOLOGY I PART OF ACCENTURE
DIGITAL THINKERS & DOERS
DATA
API
SECURITE
TEST
La formule magique pour intégrer la GenAI dans vos applications ?
.14
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
.14
Architecture pour introduire la GenAI dans vos applications.
Sur la base de l’exemple e-commerce.
Aujourd’hui
Stocks
API
Orders
API
Products
API
Web app
(front-end)
API Gateway
Contents API
(Headless
CMS)
IAM
Build
Buy
.15
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
.15
Architecture pour introduire la GenAI dans vos applications.
Sur la base de l’exemple e-commerce.
Demain
Build
Buy
Stocks
API
Orders
API
Products
API
Web app
(front-end)
API Gateway
Contents API
(Headless
CMS)
IAM
Quels impacts ?
๏ Mettre de la GenIA dans les application = chantier de développement et d'intégration ;
๏ Pas de révolution si on a déjà lancé son chantier d’ouverture & API’sation du SI avec les aspects sécuritaires afférents ;
๏ ⚠ Focus sur les tests pour valider les résultats non déterministes.
GenAI API
LLM as a Service
RAG
(optionnel)
Titan
Claude
Anthropic
Nouveau
.16
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Exemple de recherche sur un site e-commerce.
canapé bleu longueur 1,8m, max 2000€, dispo la semaine prochaine
.17
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Utiliser un LLM pour interpréter la requête utilisateur.
.18
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Internal
Applications
API Gateway
Back For Front
Orders
Payment
Partner
Products
Shipping
Partner
Stocks
User
Authent
Customers
Partners
Content
CMS
AI Facade
(Reasoner)
GenAI providers
Provider LLM
Web rendering engine
API Gateway / Reverse Proxy
LLM Adapter
Role Based
Access Control
Local LLM
Vector DB
E-commerce GenAI Augmented Application.
Build
Buy
Nouveau
.19
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
En 2024, l’architecture est continue.
En 2024 l’architecture est composable.
L’architecture :
Le levier stratégique pour
booster vos produits.
2
Archi.
.20
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pourquoi maintenant ?
#business
● Un contexte socio-économique
sous tensions → Efficience
opérationnelle ;
● La nécessité de répondre aux
enjeux d’agilité et d'innovation.
Pourquoi maintenant ?
#tech
● Maturité et stabilité des patterns
et technologies ;
● De forts enjeux :
○ interopérabilité ;
○ sécurité ;
○ scalabilité ;
○ résilience ;
○ cohérence.
En 2024, l’architecture est
Continue
& Composable
.21
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Ces architectures que nous croisons au quotidien
Events, APIs, CQRS, un
escalier… On ne sait jamais,
ça pourrait servir.
On utilise des ressources
parce qu'on peut, sans penser
aux coûts des services
managés.
On tire des flux, si possible
avec des protocoles et
technologies différents
à chaque fois.
Il est temps de remettre l’architecture au centre du village.
.22
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Qu’est-ce que
l’architecture ?
.23
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Des curseurs
Des gestes & pratiques
● DX ;
● maintenabilité ;
● SRE ;
● software craftsmanship.
● coûts ;
● sécurité ;
● TTM ;
● performance ;
● disponibilité.
● interropérabilité ;
● observabilité ;
● technologies ;
● cloud native.
● Stratégie technique
● Produit et UX
● Organisation
● Design et développement
● Infrastructure
Des enablers
L’architecture s’invite dans toutes les facettes du SI.
.24
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Qu’est-ce qui change
avec l’architecture
continue ?
.25
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pourquoi continue ?
● Le mode produit #évolution
perpétuelle.
● La concurrence #rien s’interdire.
● La réactivité et la flexibilité
#supporter le changement
#remettre de la cohérence.
L’architecture continue consiste à faire
évoluer et grandir sans rupture les
systèmes d’informations au fur et
à mesure des besoins avérés.
.26
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les rôles ont évolué
L’architecte tour d’ivoire
a été bunkerisé.
Le TL est devenu le
mouton à 7 pattes.
Le TL ne peut pas tout
porter : l’architecture et
le design.
.27
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
L’architecte :
● oriente/aide à la décision ;
● freine l’entropie ;
● fait profiter les équipes de
son expérience.
Le TL :
● contribue à la décision ;
● porte la qualité et la
maintenabilité du produit ;
● fait profiter les équipes de
sa connaissance produit et
son expertise.
“Les technologies changent,
les problèmes restent les mêmes.”
.28
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Je porte la stratégie technique :
● conception ;
● exigences d’architecture ;
● couverture des NFR ;
● j’assume mes responsabilités.
Je fais évoluer la prise de décision :
● L’impact sur la production ;
● La gestion de l’incertitude ;
● La complexité des design applicatifs ;
● Les enjeux métiers.
Je fluidifie et j’évangélise :
● documenter le strict nécessaire :
○ la cartographie du SI ;
○ la prise de décision.
● mettre en place des outils ;
● diffuser les patterns.
J’anticipe :
● accompagne cadrages fonctionnels ;
● coordination roadmap techniques ;
● résolution de dépendances ;
● priorisation d’améliorations techniques.
En tant qu’architecte continu,
ici
mettre
une
Photo
.29
OCTO
I
PART
OF
ACCENTURE©
2024-
All
rights
reserved
Formation : fondamentaux de la Continuous Architecture.
.30
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Qu’est-ce qu’une
architecture
composable ?
.31
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Chaque composant :
● est le meilleur pour porter les responsabilités
qui lui incombe #best of breed ;
● peut être assemblée / ré-assemblée SANS
nécessiter de reconstruction complète ou de
modification majeures.
L’architecture composable est flexible et adaptative.
.32
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les 6 piliers de l’architecture composable.
● isoler les
responsabilités ;
● DDD ;
● équipes autonomes.
● services ;
● messages ;
● IHM.
● performances ;
● résilience.
● servir plusieurs
contextes. Ex : une API
qui envoie des emails.
● ajouter / retirer avec
une complexité sous
contrôle.
● build vs buy ;
● java vs node vs… ;
● react vs angular.
Modularité Interropérabilité Scalabilité
Réutilisabilité Evolutivité Découplage technologique
.33
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
M
microservices
Monolith first,
majestic monolith,
modulith mon
amour !
A
API-first
L’API est un
produit
C
Cloud native
Twelve factor
app, stateless,
container,
services managés,
FinOps et vendor
lock-in
H
Headless
Front à l’état de
l’art
API-fication du
core business
Une déclinaison de l’architecture composable: MACH
.34
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Améliorer le Time to Market grâce au Headless : la recette pour y arriver
Retrouvez le Comptoir sur Youtube
.35
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les grands pièges, les grandes erreurs
lorsqu’on met en oeuvre une architecture composable.
Microservices
partout
Event Driven
pour tous
Mauvais
découpage
Perfect du
premier coup
“Hurt” - Nine Inch Nails puis
Johnny Cash
“Highway to hell” - AC-DC
“Under pressure” - Freddie
Mercury & David Bowie
“Je m’voyais déjà” - Charles
Aznavour
.36
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Ce qu’il faut retenir.
.37
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Ce qu’il faut retenir.
L’architecture composable
exemple : MACH, dont le
headless réunissent le
meilleur des mondes.
Pour un SI top gun, better
call OCTO.
L'architecture continue fixe
un CAP et accompagne le
produit.
Elle réconcilie l’intention
d’architecture et son
émergence lors du build.
L’architecte est le meilleur
allié du produit et du TL.
L'architecture intervient
dans toutes les facettes
d’un SI :
● curseurs ;
● enablers ;
● pratiques et gestes.
.38
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pourquoi maintenant ? #business
● Un contexte socio-économique sous tensions.
→ Efficience opérationnelle.
● La nécessité de répondre aux enjeux d’agilité
et d'innovation.
Pourquoi maintenant ? #tech
● Maturité et stabilité des patterns et
technologies.
● De forts enjeux
○ interopérable
○ sécurisée
M A C H
Microservices API-first Cloud native Headless
MACH
alliance
⚠ Microservices : pas de
micro-découpage, mais par
domaines métier.
En 2024, l’architecture est
Composable
○ scalable
○ résiliente
.39
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Zoom…
« Going Headless »
Core business
● Products
● Carts
● Orders
CMS Headless
● UI configuration
● Pages management
● Editorial content
Frontend sur mesure
Frontend intégré
CMS intégré
Core business
● Products
● Carts
● Orders
API API
Un chantier « Going headless » consiste à passer d’un monolithe à un écosystème « best of
breed » pour permettre de livrer de manière indépendante.
Solution vendor monolithique
intégrée.
Le coeur de métier reste dans la solution vendor et est exposé via
API. Le CMS est déporté pour être interopérable via API. Le front
est fait sur mesure.
Architecture existante Architecture headless
.40
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
En 2024, l’architecture est
Continue
Pourquoi en 2024 ?
Dans un système
d’information en
constante mutation et
avec le déploiement
quasi généralisé de
l’agilité à l’échelle et
de l’approche produit
Les architectes (qui semblent avoir été les grands
oubliés de cet élan pour l’agilité) sont remis au centre
du village.
La Continuous architecture consiste à transformer le
rôle de l'architecte pour faire évoluer et grandir - sans
rupture - les systèmes informatiques au fur et à
mesure des besoins avérés, avec un prisme terrain.
.41
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Reprise à 10h30.
Pause
.42
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Le développement hybride (ou multi-plateformes) consiste à utiliser un framework
de développement qui permet de créer des applications pour plusieurs plateformes
à partir d'une base de code unique.
Dans un contexte de stabilisation des écosystèmes techniques, la promesse de
l'hybride est particulièrement alléchante : rationaliser les filières de développement
mobile voire Web, et optimiser vos coûts en les divisant par deux ou par trois.
Alors, mythe ou réalité ?
Le développement
hybride : pourquoi
maintenant ?
3
Efficience opérationnelle.
.43
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
2011 2015 2024
Mobile
First.
La mort
annoncée
des apps.
Les apps
font de la
résistance
.
Un oeil dans le rétro.
.44
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
L'ascension du
cross-platform sur mobile.
.45
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
WEB
RESPONSIVE
Des pages web
encapsulées dans une
coquille d’app.
Une majorité de code
web, un peu de code
natif.
Des sites web au design
adapté pour le form
factor mobile.
Du code 100% web.
Des sites web
responsives avec des
capacités mobiles
(cache, pushs, présence
sur la home…).
Du code 100% web,
quelques spécificités par
plateforme.
Des apps de plus en plus
proches des capacités
natives.
Une majorité de code
partagé, un peu code
natif.
Des apps au plus
proches des capacités
des plateformes et des
devices.
Une codebase par
plateforme.
Panorama des technologies mobiles
SITE
NATIF
APP
HYBRIDE
NATIF
APP
HYBRIDE
WEB
APP
PWA
SITE/APP
.46
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
2010 - 2015
Le Far West du mobile, synonyme de cacophonie.
iOS
Android
Windows Phone
Des langages et
IDE qui changent
Le smartphone se
démocratise
WWDC - Google.IO
Des nouveautés
chaque année
Plein de
form factors
UX différentes Évolutions UI
fréquentes
.47
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Réconcilier l’inconciliable ?
Facebook
2013
.48
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
UX/UI
trop
différentes.
Différence
de ressenti
utilisateur.
Rentabilité
pas si
évidente.
Qualité
framework
discutable.
Acteurs
pas assez
solides.
5 freins qui expliquent des
débuts “difficiles” du cross-platform.
.49
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Depuis 2015
Stabilité et convergence.
iOS &Android
Un format qui s’impose
Flat Design
Des langages établis
Des IDE établis
Moins de grosses nouveautés
.50
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
On est mieux !
Youtube
2021
.51
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
2015 2018
Les technos ? 2 challengers hybride natif !
React Native
.52
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
AppBrain
Un peu de DATA
Tech Stack % new apps
30 days
Flutter 20%
RN 8%
Ionic 4%
Xamarin 0%
MAUI 0% (?)
.53
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
React Native
Dev Web Friendly Dev Mobile Friendly
.54
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
De bons
retours sur
les stores.
Une
diminution
avérée des
coûts.
Un accueil
contrasté
des devs.
Une bonne
developer
eXperience.
Des
communautés
très actives.
Nos REX de plus de 4 ans de missions hybrides
Flutter et React Native !
.55
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Et si l’avenir était le
cross chanel ?
.56
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Une même base de code qui cible différents devices.
Tabs
Phone
TV
Desktop
VR devices
Codebase
.57
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Limitation des
coûts.
Gain de productivité.
… et les mêmes
questions qu’il y a 10
ans.
Une même base de code Web, Mobile et Desktop ?
.58
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Ça existe déjà !
Pourtant, ~90% du temps est toujours passé dans les apps en 2024.
.59
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
React Native
Nos champions toujours là !
.60
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
1. Cross-platform / cross-channel
avec React Native (2017)
React Native React
��
.61
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pass Culture
React Native +
React Native for Web
.62
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Dans ce contexte,
1. Gros travail sur la navigation.
2. Composants custom pour avoir
une bonne sémantique web.
3. Quelques sujets UX/UI à régler.
Code en
commun
au prix de :
TTM
web
Côuts
build &
run
.63
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
2. Cross-platform / cross-channel
avec Flutter (2021)
��
web ?
.64
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
.65
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Même UX entre les devices, certainement
une forte mutualisation du code.
Semble très adapté pour des apps “outils”
mais qu’en est il du B2C ?
.66
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Alors, que faire ?
.67
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Avez vous vraiment vraiment (mais vraiment) besoin d’une
application mobile ?
Engagement
(++)
Récurrence
Différentiation
(+)
Stores
(-)
Coûts
(--)
.68
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Si la réponse est non …
Réalisez en priorité un
site web responsive.
.69
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Si la réponse est oui …
Considérez en priorité
une app hybride native.
(90% des Use Case, TTM, Coûts)
Si vous visez le TOP 10,
visez une app native.
(perfs, pérennité, proximité plateforme)
Voire même hybridez votre app existante.
.70
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Et pourquoi pas tester une solution cross channel sur un périmètre restreint ?
Flutter, pour un
système interne.
ReactNative Web,
pour une app et un site
B2C.
.71
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pourquoi on en parle autant en 2024 ? Parce que la loi française se renforce pour
suivre les directives européennes avec deux échéances majeures... Dès juin 2025,
tous les nouveaux produits et services des entreprises privées et les services publics
devront être accessibles. Et les parcs existants ? Des décrets imposent la mise
en conformité de tous vos parcs existants d'ici 2030. Oui, TOUS.
Les contrôles ont déjà commencé, avec des amendes salées à la clé. Investir
maintenant, c'est aussi limiter les coûts à venir. Il est donc temps de considérer
les opportunités offertes par l’accessibilité !
Accessibilité numérique :
il est temps de s'y mettre ! 4
Sustainable.
.72
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Sarah a roulé son siège
sous la table et utilise
le numérique sans difficulté.
Olivier est daltonien :
il ne perçoit pas toutes
les couleurs.
Chloé a une tendinite
au poignet : elle ne peut plus
utiliser sa souris.
Radka ne parle pas encore bien
français : elle a besoin
de textes simples.
OCTO
I
PART
OF
ACCENTURE
©
2024
-
All
rights
reserved
.73
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Sources : CSA/SPS / DITP / INSEE / OMS
20 à 40 % des internautes
ont un accès partiel, difficile ou impossible aux informations et services en ligne.
.74
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
2021
services
publics
Tous les services publics français
doivent être accessibles
depuis juillet 2021.
Échéances de mise en conformité. 󰏃 󰎾
Seules les entreprises employant moins de dix personnes et dont le chiffre d’affaires annuel n’excède pas deux millions d’euros sont dispensées.
2030
TOUS !
Tout site internet, intranet, extranet,
app mobile, progiciel, mobilier urbain numérique,
billetteries, livres numériques, etc.
de service public et des entreprises privées
fournissants des produits et services
vendus ou utilisés au sein de l'UE
devra être accessible.
25 000 + 50 000 €
par semestre,
pour chaque produit non conforme.
Cinq organismes de contrôle en France.
Arcom / DGCCRF / Arcep / ACPR / AMF
début des
contrôles
en 2024.
2025
nouveaux
produits
Tous les nouveaux produits et
services des entreprises privées
édités à partir du 28 juin 2025
devront être accessibles.
.75
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Tous les produits et services vendus ou utilisés au sein de l’UE
doivent être accessibles en juin 2030.
App mobiles &
sites web internet
publics, e-commerce…
App mobiles &
sites web intranet,
extranet, B2B…
Progiciels web ou mob
& outils numériques
équipant le poste de travail.
Livres numériques
& logiciels de lecture.
Documents bureautiques
y compris PDF.
Fichiers multimédia,
vidéos, podcast…
Mobilier urbain
numérique.
Seules les entreprises employant moins de dix personnes et dont le chiffre d’affaires annuel n’excède pas deux millions d’euros sont dispensées.
Sans oublier le matériel hardware, les systèmes d’exploitation,
les services bancaires, de gestion de monnaie électronique, les billeteries de transports, etc.
Terminaux de paiement,
billetteries, etc.
1. Images
❏ 1.1 Chaque image porteuse d’information a-t-elle une alternative textuelle ?
❏ 1.11.2 Chaque image de décoration est-elle correctement ignorée par les
technologies d’assistance ?
❏ 1.3 Pour chaque image porteuse d’information ayant une alternative textuelle,
cette alternative est-elle pertinente (hors cas particuliers) ?
❏ 1.4 Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant
une alternative textuelle, cette alternative permet-elle d’identifier la nature et la
fonction de l’image ?
❏ 1.5 Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif
au contenu ou à la fonction du CAPTCHA est-elle présente ?
❏ 1.6 Chaque image porteuse d’information a-t-elle, si nécessaire, une description
détaillée ?
❏ 1.7 Pour chaque image porteuse d’information ayant une description détaillée,
cette description est-elle pertinente ?
❏ 1.8 Chaque image texte porteuse d’information, en l’absence d’un mécanisme de
remplacement, doit si possible être remplacée par du texte stylé. Cette règle
est-elle respectée (hors cas particuliers) ?
❏ 1.9 Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image
correspondante ?
2. Cadres
❏ 2.1 Chaque cadre a-t-il un titre de cadre ?
❏ 2.2 Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ?
3. Couleurs
❏ 3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par
la couleur. Cette règle est-elle respectée ?
❏ 3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de
son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
❏ 3.3 Dans chaque page web, les couleurs utilisées dans les composants d’interface
ou les éléments graphiques porteurs d’informations sont-elles suffisamment
contrastées (hors cas particuliers) ?
4. Multimédia
❏ 4.1 Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription
textuelle ou une audiodescription (hors cas particuliers) ?
❏ 4.2 Pour chaque média temporel pré-enregistré ayant une transcription textuelle
ou une audiodescription synchronisée, celles-ci sont-elles pertinentes (hors cas
particuliers) ?
❏ 4.3 Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des
sous-titres synchronisés (hors cas particuliers) ?
❏ 4.4 Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres
synchronisés, ces sous-titres sont-ils pertinents ?
❏ 4.5 Chaque média temporel pré-enregistré a-t-il, si nécessaire, une
audiodescription synchronisée (hors cas particuliers) ?
❏ 4.6 Pour chaque média temporel pré-enregistré ayant une audiodescription
synchronisée, celle-ci est-elle pertinente ?
❏ 4.7 Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?
❏ 4.8 Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas
particuliers) ?
❏ 4.9 Pour chaque média non temporel ayant une alternative, cette alternative
est-elle pertinente ?
❏ 4.10 Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ?
❏ 4.11 La consultation de chaque média temporel est-elle, si nécessaire, contrôlable
par le clavier et tout dispositif de pointage ?
❏ 4.12 La consultation de chaque média non temporel est-elle contrôlable par le
clavier et tout dispositif de pointage ?
❏ 4.13 Chaque média temporel et non temporel est-il compatible avec les
technologies d’assistance (hors cas particuliers) ?
10. Présentation de l’information
❏ 10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la
présentation de l’information ?
❏ 10.2 Dans chaque page web, le contenu visible porteur d’information reste-t-il
présent lorsque les feuilles de styles sont désactivées ?
❏ 10.3 Dans chaque page web, l’information reste-t-elle compréhensible lorsque les
feuilles de styles sont désactivées ?
❏ 10.4 Dans chaque page web, le texte reste-t-il lisible lorsque la taille des
caractères est augmentée jusqu’à 200 %, au moins (hors cas particuliers) ?
❏ 10.5 Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et
de police sont-elles correctement utilisées ?
❏ 10.6 Dans chaque page web, chaque lien dont la nature n’est pas évidente est-il
visible par rapport au texte environnant ?
❏ 10.7 Dans chaque page web, pour chaque élément recevant le focus, la prise de
focus est-elle visible ?
❏ 10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés
par les technologies d’assistance ?
❏ 10.9 Dans chaque page web, l’information ne doit pas être donnée uniquement
par la forme, taille ou position. Cette règle est-elle respectée ? 10.10 Dans chaque
page web, l’information ne doit pas être donnée par la forme, taille ou position
uniquement. Cette règle est-elle implémentée de façon pertinente ?
❏ 10.11 Pour chaque page web, les contenus peuvent-ils être présentés sans perte
d’information ou de fonctionnalité et sans avoir recours soit à un défilement
vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement
horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ?
❏ 10.12 Dans chaque page web, les propriétés d’espacement du texte peuvent-elles
être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité (hors cas
particuliers) ?
❏ 10.13 Dans chaque page web, les contenus additionnels apparaissant à la prise de
focus ou au survol d’un composant d’interface sont-ils contrôlables par l’utilisateur
(hors cas particuliers) ?
❏ 10.14 Dans chaque page web, les contenus additionnels apparaissant via les styles
CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de
pointage ?
11. Formulaires
❏ 11.1 Chaque champ de formulaire a-t-il une étiquette ?
❏ 11.2 Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors
cas particuliers) ?
❏ 11.3 Dans chaque formulaire, chaque étiquette associée à un champ de formulaire
ayant la même fonction et répétée plusieurs fois dans une même page ou dans un
ensemble de pages est-elle cohérente ?
❏ 11.4 Dans chaque formulaire, chaque étiquette de champ et son champ associé
sont-ils accolés (hors cas particuliers) ?
❏ 11.5 Dans chaque formulaire, les champs de même nature sont-ils regroupés, si
nécessaire ?
❏ 11.6 Dans chaque formulaire, chaque regroupement de champs de même nature
a-t-il une légende ?
❏ 11.7 Dans chaque formulaire, chaque légende associée à un regroupement de
champs de même nature est-elle pertinente ?
❏ 11.8 Dans chaque formulaire, les items de même nature d’une liste de choix sont-ils
regroupés de manière pertinente ?
❏ 11.9 Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas
particuliers) ?
❏ 11.10 Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière
pertinente (hors cas particuliers) ?
❏ 11.11 Dans chaque formulaire, le contrôle de saisie est-il accompagné, si
nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
❏ 11.12 Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet
des réponses à un test ou à un examen, ou dont la validation a des conséquences
financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à
jour ou récupérées par l’utilisateur ?
❏ 11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le
remplissage automatique des champs avec les données de l’utilisateur ?
5. Tableaux
❏ 5.1 Chaque tableau de données complexe a-t-il un résumé ?
❏ 5.2 Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il
pertinent ?
❏ 5.3 Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il
compréhensible ?
❏ 5.4 Pour chaque tableau de données ayant un titre, le titre est-il correctement
associé au tableau de données ?
❏ 5.5 Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?
❏ 5.6 Pour chaque tableau de données, chaque en-tête de colonne et chaque
en-tête de ligne sont-ils correctement déclarés ?
❏ 5.7 Pour chaque tableau de données, la technique appropriée permettant
d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?
❏ 5.8 Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux
tableaux de données. Cette règle est-elle respectée ?
6. Liens
❏ 6.1 Chaque lien est-il explicite (hors cas particuliers) ?
❏ 6.2 Dans chaque page web, chaque lien a-t-il un intitulé ?
7. Scripts
❏ 7.1 Chaque script est-il, si nécessaire, compatible avec les technologies
d’assistance ?
❏ 7.2 Pour chaque script ayant une alternative, cette alternative est-elle pertinente ?
❏ 7.3 Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage
(hors cas particuliers) ?
❏ 7.4 Pour chaque script qui initie un changement de contexte, l’utilisateur est-il
averti ou en a-t-il le contrôle ?
❏ 7.5 Dans chaque page web, les messages de statut sont-ils correctement restitués
par les technologies d’assistance ?
8. Éléments obligatoires
❏ 8.1 Chaque page web est-elle définie par un type de document ?
❏ 8.2 Pour chaque page web, le code source généré est-il valide selon le type de
document spécifié ?
❏ 8.3 Dans chaque page web, la langue par défaut est-elle présente ?
❏ 8.4 Pour chaque page web ayant une langue par défaut, le code de langue est-il
pertinent ?
❏ 8.5 Chaque page web a-t-elle un titre de page ?
❏ 8.6 Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
❏ 8.7 Dans chaque page web, chaque changement de langue est-il indiqué dans le
code source (hors cas particuliers) ?
❏ 8.8 Dans chaque page web, le code de langue de chaque changement de langue
est-il valide et pertinent ?
❏ 8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à
des fins de présentation. Cette règle est-elle respectée ?
❏ 8.10 Dans chaque page web, les changements du sens de lecture sont-ils signalés ?
9. Structuration de l’information
❏ 9.1 Dans chaque page web, l’information est-elle structurée par l’utilisation
appropriée de titres ?
❏ 9.2 Dans chaque page web, la structure du document est-elle cohérente (hors cas
particuliers) ?
❏ 9.3 Dans chaque page web, chaque liste est-elle correctement structurée ?
❏ 9.4 Dans chaque page web, chaque citation est-elle correctement indiquée ?
12. Navigation
❏ 12.1 Chaque ensemble de pages dispose-t-il de deux systèmes de navigation
différents, au moins (hors cas particuliers) ?
❏ 12.2 Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils
toujours à la même place (hors cas particuliers) ?
❏ 12.3 La page « plan du site » est-elle pertinente ?
❏ 12.4 Dans chaque ensemble de pages, la page « plan du site » est-elle accessible à
partir d’une fonctionnalité identique ?
❏ 12.5 Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de
manière identique ?
❏ 12.6 Les zones de regroupement de contenus présentes dans plusieurs pages web
(zones d’en-tête, de navigation principale, de contenu principal, de pied de page
et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
❏ 12.7 Dans chaque page web, un lien d’évitement ou d’accès rapide à la zone de
contenu principal est-il présent (hors cas particuliers) ?
❏ 12.8 Dans chaque page web, l’ordre de tabulation est-il cohérent ?
❏ 12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.
Cette règle est-elle respectée ?
❏ 12.10 Dans chaque page web, les raccourcis clavier n’utilisant qu’une seule touche
(lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils
contrôlables par l’utilisateur ?
❏ 12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la
prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire
atteignables au clavier ?
13. Consultation
❏ 13.1 Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps
modifiant le contenu (hors cas particuliers) ?
❏ 13.2 Dans chaque page web, l’ouverture d’une nouvelle fenêtre ne doit pas être
déclenchée sans action de l’utilisateur. Cette règle est-elle respectée ?
❏ 13.3 Dans chaque page web, chaque document bureautique en téléchargement
possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
❏ 13.4 Pour chaque document bureautique ayant une version accessible, cette
version offre-t-elle la même information ?
❏ 13.5 Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône,
syntaxe cryptique) a-t-il une alternative ?
❏ 13.6 Dans chaque page web, pour chaque contenu cryptique (art ASCII,
émoticône, syntaxe cryptique) ayant une alternative, cette alternative est-elle
pertinente ?
❏ 13.7 Dans chaque page web, les changements brusques de luminosité ou les effets
de flash sont-ils correctement utilisés ?
❏ 13.8 Dans chaque page web, chaque contenu en mouvement ou clignotant est-il
contrôlable par l’utilisateur ?
❏ 13.9 Dans chaque page web, le contenu proposé est-il consultable quelle que soit
l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ?
❏ 13.10 Dans chaque page web, les fonctionnalités utilisables ou disponibles au
moyen d’un geste complexe peuvent-elles être également disponibles au moyen
d’un geste simple (hors cas particuliers) ?
❏ 13.11 Dans chaque page web, les actions déclenchées au moyen d’un dispositif de
pointage sur un point unique de l’écran peuvent-elles faire l’objet d’une annulation
(hors cas particuliers) ?
❏ 13.12 Dans chaque page web, les fonctionnalités qui impliquent un mouvement de
l’appareil ou vers l’appareil peuvent-elles être satisfaites de manière alternative
(hors cas particuliers) ?
Déclarations obligatoires
❏ Pour chaque site web, une déclaration d’accessibilité est-elle présente ?
❏ Pour chaque site web, la déclaration d’accessibilité est-elle valide ?
❏ Sur la page d’accueil de chaque site web, la mention obligatoire du niveau de
conformité est-elle présente ?
❏ Sur chaque page où elle est présente, la mention obligatoire du niveau de
conformité est-elle valide ?
❏ Le schéma pluriannuel de mise en accessibilité de l’entité concernée est-il
disponible depuis chaque site web ?
❏ Le schéma pluriannuel de mise en accessibilité disponible depuis chaque site web
est-il valide ?
❏ Pour chaque schéma pluriannuel de mise en accessibilité, le bilan des plans
d’actions annuels est-il disponible ?
Critères du RGAA 4.1.2
Checklist de l’obligation légale d’accessibilité web. 󰏃 󰎾
Par où commencer ?
.77
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Nouveaux
produits & services
— dès le 28 juin 2025.
.78
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
surcoût
garanti !
Pas à la dernière minute…
Ce n’est pas lorsque le gâteau est cuit, qu’il faut se soucier
de le rendre consommable par tout le monde,
y compris personnes intolérantes au gluten…
ou au lactose…
La norme d’accessibilité est une norme de fabrication.
.79
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Répartition des critères d’accessibilité
selon les compétences nécessaires à leur réussite.
Tous les profils sont concernés :
c’est un travail d’équipe sous la houlette des PO.
61 %
dev web front
HTML/JS/ARIA
13 %
design (UX+UI)
inclusif et accessible.
26 %
productions des contenus
(textes, images, graphiques,
PDF, vidéos, transcripts…)
.80
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Attention : l’intervention
seule d’un·e expert·e
ne suffit pas !
Expert·e
RGAA
Nécessaire montée en compétences
Référent·e
accessibilité
Dev Front Product Owner Rédacteur
/trices
Designer
➔ Sensibilisez & formez l’ensemble de votre équipe (dev, PO, QA, etc.).
➔ Tout le monde n’a pas besoin d’être expert·e mais chacun·e doit connaître son impact a11y.
.81
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Parc
existant…
— jusqu’au 28 juin 2030.
.82
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pas en ajoutant un bouton magique…
L’ajout de
fonctionnalités
n’est PAS ce qui
rend un produit
accessible !
Souvent même,
ces fonctionnalités
ajoutent des problèmes
d’accessibilité !
Et elles n’évitent aucunement
les poursuites judiciaires !
Voir le site dédié : https://overlayfactsheet.com
.83
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pas en commençant par un audit RGAA.
Si aucune démarche
d’accessibilité a été appliquée,
l’audit ne vous apprendra rien :
la liste d’erreurs sera maximale
(bien que non exhaustive).
RGAA (106 critères, 258 tests — par page)
= liste de contrôle de fin de cycle en V
pour établir la conformité :
inadaptée pour un état des lieux initial.
Ça ne dit pas comment faire !
Exemple de rapport d’audit RGAA = +60 pages Word, +1300 lignes Excel…
.84
OCTO
I
PART
OF
ACCENTURE
©
2024
-
All
rights
reserved
1. Cibler les interfaces
des produits et services concernés.
2. Saisir l’opportunité des refontes prévues
pour incorporer l’accessibilité
(puis prioriser en fonction de l’enjeu stratégique, utilisateur/trices, etc.).
3. Stopper la génération d’erreurs
en formant les équipes
(nécessité d’internaliser le savoir-faire).
4. Écoper la dette technique d’accessibilité
par itérations progressives.
FRONT END
BACK END
Reprenez le contrôle a11y de l’existant :
L’accessibilité ne concerne que l’interface
THERE
IS
A
BETTER
WAY
THERE
IS
A
BETTER
WAY
.85
Approche
progressive
THERE
IS
A
BETTER
WAY
Prérequis :
HTML valide
0.
.87
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pour pouvoir être correctement exploité par les différents outils,
le HTML de notre site doit respecter les specifications du W3C.
(des outils automatisés existent : mettez-les à profit !)
THERE
IS
A
BETTER
WAY
Automatiser
les tests.
1.
HTML valide ✓
.89
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
✓ Pas besoin de connaissances préalables en a11y.
✓ Mise en place facile / rapide.
✓ Premier pas pour garantir un niveau minimum.
✓ Permet aussi de monitorer l’accessibilité.
Tests automatisés dès les premières lignes de code.
Erreurs d’accessibilité courantes (détectables via tests auto).
Source : étude WebAIM de 2024 sur 1 million de sites web.
https://webaim.org/projects/million/
De nombreux outils / possibilités existent : tests intégrés à la CI, extensions navigateurs, SaaS, etc.
.90
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Répartition des tests d’accessibilité.
env. 25 %
des tests d’accessibilité
sont automatisables.
La majorité doit être
vérifiée humainement,
par des tests manuels.
Corollaire :
passer les tests auto
permet d’atteindre
env. 25 % de conformité. 🎉
25 %
THERE
IS
A
BETTER
WAY
Inspecter en
10 Easy Checks.
HTML valide ✓
2.
Tests auto ✓
.92
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
.92
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
THERE
IS
A
BETTER
WAY
Attention : l’accessibilité,
ça ne se voit pas,
ça se manipule !
.93
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Test : naviguer sur le site sans souris ni trackpad
à l’aide du clavier uniquement et vérifier :
❏ L’ordre de navigation est logique ;
❏ Le focus reste toujours visible ;
❏ Tous les éléments interactifs sont activables :
liens, menus déroulants, boutons, vidéos, carousels… ;
❏ Pas de piège : on peut sortir facilement
d’une modale, d’un menu ou d’une vidéo par exemple ;
❏ Un lien d’évitement « Aller au contenu » est présent.
Exemple : naviguer au clavier (un quotidien pour des milliers d’internautes).
Easy Checks – A First Review of Web Accessibility by W3C : https://www.w3.org/WAI/test-evaluate/preliminary/
.94
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
✓ Faciles : n’importe qui peut faire ces tests,
sans prérequis technique, oui, toi aussi !
✓ Seulement 10 tests manuels !
✓ Rapides : en 10 minutes.
✓ À faire régulièrement :
à chaque nouvelle feature, à chaque sprint, etc.
✓ Permet de prétendre à environ 50% de conformité. 🎉
10 Easy Checks — W3C
Easy Checks – A First Review of Web Accessibility by W3C : https://www.w3.org/WAI/test-evaluate/preliminary/
50 %
THERE
IS
A
BETTER
WAY
Ready
pour l’audit
de conformité.
Easy Checks ✓
Tests auto ✓
3.
HTML valide ✓
.96
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
➔ pour identifier les derniers défauts ;
➔ et établir la conformité.
Audit de conformité
Prérequis :
✓ HTML valide
✓ tests auto
✓ Easy Checks
audit correctifs contre-visite
Publication
des mentions
et documents
obligatoires.
✓
Formation préalable nécessaire
pour pouvoir opérer les correctifs
(et maintenir le niveau sur la durée).
.97
THERE
IS
A
BETTER
WAY
● Il est temps de s’y mettre dès maintenant
pour anticiper les échéances afin d’éviter les sanctions ;
● Ne foncez pas sur l’audit de conformité,
mais progressez par pas à pas, par quick wins ;
● Nouveaux produits et parc existant : même combat !
Go go go !
À retenir :
THERE
IS
A
BETTER
WAY
Une démarche
progressive
(10 tests manuels en 10 minutes)
~25 % d’effort pour
50 % de conformité 🎉
Easy Checks ✓
2.
~5 % d’effort pour
25 %de conformité 🎉
Tests auto ✓
1.
100 %
de conformité 🎉
3. Audit de conformité ✓
THERE
IS
A
BETTER
WAY
.98
0. HTML valide ✓
.99
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Pour aller plus loin,
consultez notre RefCard a11y :
suivez le guide pour ne plus laisser
personne au bord du chemin.
Unauthorized
propagation
prohibited.
For
internal
use
only.
.100
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
IA Générative
● Intégrez la Gen AI dans la toolbox de vos développeurs ;
● Intégrez la GenAI dans vos applications via des API.
1
GenAI.
Développement hybride
● Vecteur d’efficience opérationnelle ;
● 3 scénarios : PWA — Hybride natif — Apps natives.
Des architectures continues et composables
● Introduisez l’architecture continue pour faire évoluer et grandir sans rupture les systèmes d’informations au
fur et à mesure des besoins avérés ;
● Déployez des architectures composables (comme un système de LEGO) pour répondre aux enjeux d’agilité
et d'innovation. Envisagez la MACH Architecture.
Take away
3
Efficience
opérationnelle.
2
Archi.
4
Sustainable.
Accessibilité numérique
● Lancez dès à présent une démarche d’Accessibilité numérique pour vos nouvelles applications et votre parc existant ;
● De nouveaux décrets et organismes de contrôles imposent des sanctions en cas de non conformité ;
● Privilégiez une démarche itérative via des quick win plutôt que de lancer un audit RGAA à T0.
.101
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Return on time invested
R.O.T.I
De 1 5
à
Unauthorized
propagation
prohibited.
For
internal
use
only.
.102
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Retrouvez tous nos épisodes sur les
Tech Trends 2024 pour délivrer
vos produits stratégiques.
Unauthorized
propagation
prohibited.
For
internal
use
only.
OCTO
I
PART
OF
ACCENTURE©
2024-
All
rights
reserved

Contenu connexe

Similaire à OCTO TALKS : 4 Tech Trends du Software Engineering.pdf

L'histoire d'une infrastructure itérative
L'histoire d'une infrastructure itérativeL'histoire d'une infrastructure itérative
L'histoire d'une infrastructure itérative
François Xavier Vende
 
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
OCTO Technology
 
Industrie 4 for aiac
Industrie 4 for aiacIndustrie 4 for aiac
Industrie 4 for aiac
Sliman EL ABBADI
 
La Duck Conf - "Elle est ou ton appli ? Dans mon kube"
La Duck Conf - "Elle est ou ton appli ? Dans mon kube"La Duck Conf - "Elle est ou ton appli ? Dans mon kube"
La Duck Conf - "Elle est ou ton appli ? Dans mon kube"
OCTO Technology
 
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
OCTO Technology
 
Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...
Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...
Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...
OCTO Technology
 
soft-shake.ch - Lean engineering
soft-shake.ch - Lean engineeringsoft-shake.ch - Lean engineering
soft-shake.ch - Lean engineering
soft-shake.ch
 
La Duck Conf - "Kube is the new mainframe"
La Duck Conf - "Kube is the new mainframe" La Duck Conf - "Kube is the new mainframe"
La Duck Conf - "Kube is the new mainframe"
OCTO Technology
 
Devops - vision et pratiques
Devops - vision et pratiquesDevops - vision et pratiques
Devops - vision et pratiques
Joseph Glorieux
 
Afterwork Devops : vision et pratiques
Afterwork Devops : vision et pratiquesAfterwork Devops : vision et pratiques
Afterwork Devops : vision et pratiques
OCTO Technology Suisse
 
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conceptionLe Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
OCTO Technology
 
Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...
Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...
Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...
OCTO Technology
 
Restructurer un legacy comment et pourquoi
Restructurer un legacy comment et pourquoiRestructurer un legacy comment et pourquoi
Restructurer un legacy comment et pourquoi
Marc Bojoly
 
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveLA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
OCTO Technology
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
Gabriel DUPONT
 
[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
 
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-PaymentOCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
mmmaroc
 
Offre de services CITIO
Offre de services CITIOOffre de services CITIO
Offre de services CITIO
CITIO
 
Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...
Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...
Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...
Karim Gmir
 
Industrie du Futur : comment orchestrer au mieux la production
Industrie du Futur : comment orchestrer au mieux la productionIndustrie du Futur : comment orchestrer au mieux la production
Industrie du Futur : comment orchestrer au mieux la production
LIEGE CREATIVE
 

Similaire à OCTO TALKS : 4 Tech Trends du Software Engineering.pdf (20)

L'histoire d'une infrastructure itérative
L'histoire d'une infrastructure itérativeL'histoire d'une infrastructure itérative
L'histoire d'une infrastructure itérative
 
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
 
Industrie 4 for aiac
Industrie 4 for aiacIndustrie 4 for aiac
Industrie 4 for aiac
 
La Duck Conf - "Elle est ou ton appli ? Dans mon kube"
La Duck Conf - "Elle est ou ton appli ? Dans mon kube"La Duck Conf - "Elle est ou ton appli ? Dans mon kube"
La Duck Conf - "Elle est ou ton appli ? Dans mon kube"
 
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
 
Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...
Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...
Petit-Déjeuner : L'API ne fait pas le moine : Confessions d'experts sur les m...
 
soft-shake.ch - Lean engineering
soft-shake.ch - Lean engineeringsoft-shake.ch - Lean engineering
soft-shake.ch - Lean engineering
 
La Duck Conf - "Kube is the new mainframe"
La Duck Conf - "Kube is the new mainframe" La Duck Conf - "Kube is the new mainframe"
La Duck Conf - "Kube is the new mainframe"
 
Devops - vision et pratiques
Devops - vision et pratiquesDevops - vision et pratiques
Devops - vision et pratiques
 
Afterwork Devops : vision et pratiques
Afterwork Devops : vision et pratiquesAfterwork Devops : vision et pratiques
Afterwork Devops : vision et pratiques
 
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conceptionLe Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
 
Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...
Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...
Matinale : Ruche ou fourmilière, quel modèle pour votre passage à l’agilité à...
 
Restructurer un legacy comment et pourquoi
Restructurer un legacy comment et pourquoiRestructurer un legacy comment et pourquoi
Restructurer un legacy comment et pourquoi
 
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveLA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210
 
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-PaymentOCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
 
Offre de services CITIO
Offre de services CITIOOffre de services CITIO
Offre de services CITIO
 
Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...
Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...
Benchmark des solutions IoT et intégration d'une plateforme à un progiciel de...
 
Industrie du Futur : comment orchestrer au mieux la production
Industrie du Futur : comment orchestrer au mieux la productionIndustrie du Futur : comment orchestrer au mieux la production
Industrie du Futur : comment orchestrer au mieux la production
 

Plus de OCTO Technology

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
OCTO Technology
 
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonnéLe Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
OCTO Technology
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
OCTO Technology
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
OCTO Technology
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
OCTO Technology
 
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
OCTO Technology
 
OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeursOCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Technology
 
OCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture TestOCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture Test
OCTO Technology
 
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
OCTO Technology
 
Refcard GraphQL
Refcard GraphQLRefcard GraphQL
Refcard GraphQL
OCTO Technology
 
Comptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanComptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/Leaseplan
OCTO Technology
 
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ? Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
OCTO Technology
 
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
OCTO Technology
 
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
OCTO Technology
 
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
OCTO Technology
 
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
OCTO Technology
 
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
OCTO Technology
 
RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les fronts
OCTO Technology
 

Plus de OCTO Technology (20)

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
 
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonnéLe Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
 
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
 
OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeursOCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeurs
 
OCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture TestOCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture Test
 
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
 
Refcard GraphQL
Refcard GraphQLRefcard GraphQL
Refcard GraphQL
 
Comptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanComptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/Leaseplan
 
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ? Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
 
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
 
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
 
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
 
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
 
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
 
RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les fronts
 

OCTO TALKS : 4 Tech Trends du Software Engineering.pdf

  • 1. THERE IS A BETTER WAY DIGITAL THINKERS & DOERS OCTO TECHNOLOGY I PART OF ACCENTURE 4 Tech Trends du Software Engineering
  • 2. .2 OCTO I PART OF ACCENTURE© 2024 - All rights reserved OCTO I PART OF ACCENTURE Une archipélisation des lieux de travail post-Covid. De forts enjeux sur le Sustainable et la régulation IT. Un contexte socio- économique sous tensions. Une année 2024 sous le signe de la complexité, avec : L’explosion de la Gen AI.
  • 3. .3 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Le Hold-up de la GenAI OCTO TALKS ! 4 Tech trends 2024 du Software Engineering. Soufiane Keli soufiane.keli@octo.com - Lead AI apps Architectures continues et composables Pierrette Bertrand pierrette.bertrand@octo.com - Lead Web apps Le développement hybride : pourquoi maintenant ? Nicolas Laurent nicolas.laurent@octo.com - Lead Mobile apps Accessibilité numérique : il est temps de s'y mettre ! Romy Duhem-Verdière romy.duhem-verdiere@octo.com - Lead a11y, experte RGAA 9h15 9h45 10h30 11h00
  • 4. .4 OCTO I PART OF ACCENTURE© 2024 - All rights reserved OCTO TECHNOLOGY I PART OF ACCENTURE DIGITAL THINKERS & DOERS THERE IS A BETTER WAY .4
  • 5. .5 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Le Hold-up de la GenAI Les développeurs augmentés par l’IA. La GenAI dans vos applications. Deux sujets liés au Software Engineering en 2024 : 1 GenAI.
  • 6. .6 OCTO I PART OF ACCENTURE© 2024 - All rights reserved L’IA excelle pour les tâches simples, répétitives, routinières et fastidieuses.
  • 7. .7 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Ce qui marche bien. Compréhension du code Apprentissage > Découvrir de nouveaux frameworks ; > Ghost “Pair programming” ; > Explorer des solutions alternatives. > Expliquer du code existant ; > Expliquer des logs, des messages d’erreur ; > Refactoring simple. > Générer des petits bouts de code ; > Générer de tests unitaires ; > Générer des données de tests. Les assistants GenAI marchent très bien pour : ● Faire des boilerplates ; ● Expliquer, résumer, traduire (code, log, config) ; ● Générer de la documentation. Génération de code
  • 8. .8 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Ce qui ne marche pas ou moins bien. Gros refactoring Designer une application > Écouter le métier, poser des questions ; > Faire du design applicatif ; > Explorer des solutions alternatives. > Limitation du contexte (Tokens) ; > Prioriser ce qui marche ou pas ; > Poser une stratégie de refactoring (vision de la production, hot zone). > Comprendre le contexte métier ; > Intégrer les contraintes IT (choix par défaut) ; > Déployer les pratiques de code ; > Intégrer le code des autres développeurs. Les assistants GenAI ne marchent pas très bien pour : ● Faire des applications ; ● Refactorer une application. Créer une application
  • 9. .9 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les gains de productivité sont réels, mais plutôt autour de 8%-12% Source: McKinsey Source: LesEchos Source: BCG Source: BAIN 40% Coder, représente au 30%à 40%d’une journée d’un software engineer. Source: Microsoft soit un gain théorique de 9% à 20% maximum.
  • 10. .10 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les gains de productivité ne sont pas équi-répartis 0% 20% 50% 80% 100% Percentile Faible Niveau Niveau Intermédiaire Top performers Inflexion Baisse de qualité Poche de productivité Gains marginaux Gains marginaux Efficacité Productivité
  • 11. .11 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Nous avons commencé le déploiement en janvier 2023. Ceux qui utilisent sont satisfaits. La ruée vers l’or ? Tout le monde peut demander une licence ● 22 % des développeurs ont fait la demande ; ● 68 % l’utilisent beaucoup ou sont même accros ; ● Une Communauté de Pratique ; ● Un espace d’échange libre pour s’exprimer ; ● Le point de vue des détracteurs est important.
  • 12. .12 OCTO I PART OF ACCENTURE© 2024 - All rights reserved 0% Aventuriers Adopteurs précoces Majorité précoce Suiveurs Retardataires Opposants (20%) Promoteurs (20%) Temps Utilisateurs 50% 100% Gouffre Neutres (60%) Le change management une étape indispensable Convaincre, mais ne pas imposer. Les assistants de développement ont des promoteurs et des détracteurs. L’enjeu est de convaincre la grande masse neutre de les utiliser.
  • 13. .13 OCTO I PART OF ACCENTURE© 2024 - All rights reserved OCTO TECHNOLOGY I PART OF ACCENTURE DIGITAL THINKERS & DOERS DATA API SECURITE TEST La formule magique pour intégrer la GenAI dans vos applications ?
  • 14. .14 OCTO I PART OF ACCENTURE© 2024 - All rights reserved .14 Architecture pour introduire la GenAI dans vos applications. Sur la base de l’exemple e-commerce. Aujourd’hui Stocks API Orders API Products API Web app (front-end) API Gateway Contents API (Headless CMS) IAM Build Buy
  • 15. .15 OCTO I PART OF ACCENTURE© 2024 - All rights reserved .15 Architecture pour introduire la GenAI dans vos applications. Sur la base de l’exemple e-commerce. Demain Build Buy Stocks API Orders API Products API Web app (front-end) API Gateway Contents API (Headless CMS) IAM Quels impacts ? ๏ Mettre de la GenIA dans les application = chantier de développement et d'intégration ; ๏ Pas de révolution si on a déjà lancé son chantier d’ouverture & API’sation du SI avec les aspects sécuritaires afférents ; ๏ ⚠ Focus sur les tests pour valider les résultats non déterministes. GenAI API LLM as a Service RAG (optionnel) Titan Claude Anthropic Nouveau
  • 16. .16 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Exemple de recherche sur un site e-commerce. canapé bleu longueur 1,8m, max 2000€, dispo la semaine prochaine
  • 18. .18 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Internal Applications API Gateway Back For Front Orders Payment Partner Products Shipping Partner Stocks User Authent Customers Partners Content CMS AI Facade (Reasoner) GenAI providers Provider LLM Web rendering engine API Gateway / Reverse Proxy LLM Adapter Role Based Access Control Local LLM Vector DB E-commerce GenAI Augmented Application. Build Buy Nouveau
  • 19. .19 OCTO I PART OF ACCENTURE© 2024 - All rights reserved En 2024, l’architecture est continue. En 2024 l’architecture est composable. L’architecture : Le levier stratégique pour booster vos produits. 2 Archi.
  • 20. .20 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pourquoi maintenant ? #business ● Un contexte socio-économique sous tensions → Efficience opérationnelle ; ● La nécessité de répondre aux enjeux d’agilité et d'innovation. Pourquoi maintenant ? #tech ● Maturité et stabilité des patterns et technologies ; ● De forts enjeux : ○ interopérabilité ; ○ sécurité ; ○ scalabilité ; ○ résilience ; ○ cohérence. En 2024, l’architecture est Continue & Composable
  • 21. .21 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Ces architectures que nous croisons au quotidien Events, APIs, CQRS, un escalier… On ne sait jamais, ça pourrait servir. On utilise des ressources parce qu'on peut, sans penser aux coûts des services managés. On tire des flux, si possible avec des protocoles et technologies différents à chaque fois. Il est temps de remettre l’architecture au centre du village.
  • 23. .23 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Des curseurs Des gestes & pratiques ● DX ; ● maintenabilité ; ● SRE ; ● software craftsmanship. ● coûts ; ● sécurité ; ● TTM ; ● performance ; ● disponibilité. ● interropérabilité ; ● observabilité ; ● technologies ; ● cloud native. ● Stratégie technique ● Produit et UX ● Organisation ● Design et développement ● Infrastructure Des enablers L’architecture s’invite dans toutes les facettes du SI.
  • 25. .25 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pourquoi continue ? ● Le mode produit #évolution perpétuelle. ● La concurrence #rien s’interdire. ● La réactivité et la flexibilité #supporter le changement #remettre de la cohérence. L’architecture continue consiste à faire évoluer et grandir sans rupture les systèmes d’informations au fur et à mesure des besoins avérés.
  • 26. .26 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les rôles ont évolué L’architecte tour d’ivoire a été bunkerisé. Le TL est devenu le mouton à 7 pattes. Le TL ne peut pas tout porter : l’architecture et le design.
  • 27. .27 OCTO I PART OF ACCENTURE© 2024 - All rights reserved L’architecte : ● oriente/aide à la décision ; ● freine l’entropie ; ● fait profiter les équipes de son expérience. Le TL : ● contribue à la décision ; ● porte la qualité et la maintenabilité du produit ; ● fait profiter les équipes de sa connaissance produit et son expertise. “Les technologies changent, les problèmes restent les mêmes.”
  • 28. .28 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Je porte la stratégie technique : ● conception ; ● exigences d’architecture ; ● couverture des NFR ; ● j’assume mes responsabilités. Je fais évoluer la prise de décision : ● L’impact sur la production ; ● La gestion de l’incertitude ; ● La complexité des design applicatifs ; ● Les enjeux métiers. Je fluidifie et j’évangélise : ● documenter le strict nécessaire : ○ la cartographie du SI ; ○ la prise de décision. ● mettre en place des outils ; ● diffuser les patterns. J’anticipe : ● accompagne cadrages fonctionnels ; ● coordination roadmap techniques ; ● résolution de dépendances ; ● priorisation d’améliorations techniques. En tant qu’architecte continu,
  • 31. .31 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Chaque composant : ● est le meilleur pour porter les responsabilités qui lui incombe #best of breed ; ● peut être assemblée / ré-assemblée SANS nécessiter de reconstruction complète ou de modification majeures. L’architecture composable est flexible et adaptative.
  • 32. .32 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les 6 piliers de l’architecture composable. ● isoler les responsabilités ; ● DDD ; ● équipes autonomes. ● services ; ● messages ; ● IHM. ● performances ; ● résilience. ● servir plusieurs contextes. Ex : une API qui envoie des emails. ● ajouter / retirer avec une complexité sous contrôle. ● build vs buy ; ● java vs node vs… ; ● react vs angular. Modularité Interropérabilité Scalabilité Réutilisabilité Evolutivité Découplage technologique
  • 33. .33 OCTO I PART OF ACCENTURE© 2024 - All rights reserved M microservices Monolith first, majestic monolith, modulith mon amour ! A API-first L’API est un produit C Cloud native Twelve factor app, stateless, container, services managés, FinOps et vendor lock-in H Headless Front à l’état de l’art API-fication du core business Une déclinaison de l’architecture composable: MACH
  • 34. .34 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Améliorer le Time to Market grâce au Headless : la recette pour y arriver Retrouvez le Comptoir sur Youtube
  • 35. .35 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les grands pièges, les grandes erreurs lorsqu’on met en oeuvre une architecture composable. Microservices partout Event Driven pour tous Mauvais découpage Perfect du premier coup “Hurt” - Nine Inch Nails puis Johnny Cash “Highway to hell” - AC-DC “Under pressure” - Freddie Mercury & David Bowie “Je m’voyais déjà” - Charles Aznavour
  • 37. .37 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Ce qu’il faut retenir. L’architecture composable exemple : MACH, dont le headless réunissent le meilleur des mondes. Pour un SI top gun, better call OCTO. L'architecture continue fixe un CAP et accompagne le produit. Elle réconcilie l’intention d’architecture et son émergence lors du build. L’architecte est le meilleur allié du produit et du TL. L'architecture intervient dans toutes les facettes d’un SI : ● curseurs ; ● enablers ; ● pratiques et gestes.
  • 38. .38 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pourquoi maintenant ? #business ● Un contexte socio-économique sous tensions. → Efficience opérationnelle. ● La nécessité de répondre aux enjeux d’agilité et d'innovation. Pourquoi maintenant ? #tech ● Maturité et stabilité des patterns et technologies. ● De forts enjeux ○ interopérable ○ sécurisée M A C H Microservices API-first Cloud native Headless MACH alliance ⚠ Microservices : pas de micro-découpage, mais par domaines métier. En 2024, l’architecture est Composable ○ scalable ○ résiliente
  • 39. .39 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Zoom… « Going Headless » Core business ● Products ● Carts ● Orders CMS Headless ● UI configuration ● Pages management ● Editorial content Frontend sur mesure Frontend intégré CMS intégré Core business ● Products ● Carts ● Orders API API Un chantier « Going headless » consiste à passer d’un monolithe à un écosystème « best of breed » pour permettre de livrer de manière indépendante. Solution vendor monolithique intégrée. Le coeur de métier reste dans la solution vendor et est exposé via API. Le CMS est déporté pour être interopérable via API. Le front est fait sur mesure. Architecture existante Architecture headless
  • 40. .40 OCTO I PART OF ACCENTURE© 2024 - All rights reserved En 2024, l’architecture est Continue Pourquoi en 2024 ? Dans un système d’information en constante mutation et avec le déploiement quasi généralisé de l’agilité à l’échelle et de l’approche produit Les architectes (qui semblent avoir été les grands oubliés de cet élan pour l’agilité) sont remis au centre du village. La Continuous architecture consiste à transformer le rôle de l'architecte pour faire évoluer et grandir - sans rupture - les systèmes informatiques au fur et à mesure des besoins avérés, avec un prisme terrain.
  • 42. .42 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Le développement hybride (ou multi-plateformes) consiste à utiliser un framework de développement qui permet de créer des applications pour plusieurs plateformes à partir d'une base de code unique. Dans un contexte de stabilisation des écosystèmes techniques, la promesse de l'hybride est particulièrement alléchante : rationaliser les filières de développement mobile voire Web, et optimiser vos coûts en les divisant par deux ou par trois. Alors, mythe ou réalité ? Le développement hybride : pourquoi maintenant ? 3 Efficience opérationnelle.
  • 43. .43 OCTO I PART OF ACCENTURE© 2024 - All rights reserved 2011 2015 2024 Mobile First. La mort annoncée des apps. Les apps font de la résistance . Un oeil dans le rétro.
  • 45. .45 OCTO I PART OF ACCENTURE© 2024 - All rights reserved WEB RESPONSIVE Des pages web encapsulées dans une coquille d’app. Une majorité de code web, un peu de code natif. Des sites web au design adapté pour le form factor mobile. Du code 100% web. Des sites web responsives avec des capacités mobiles (cache, pushs, présence sur la home…). Du code 100% web, quelques spécificités par plateforme. Des apps de plus en plus proches des capacités natives. Une majorité de code partagé, un peu code natif. Des apps au plus proches des capacités des plateformes et des devices. Une codebase par plateforme. Panorama des technologies mobiles SITE NATIF APP HYBRIDE NATIF APP HYBRIDE WEB APP PWA SITE/APP
  • 46. .46 OCTO I PART OF ACCENTURE© 2024 - All rights reserved 2010 - 2015 Le Far West du mobile, synonyme de cacophonie. iOS Android Windows Phone Des langages et IDE qui changent Le smartphone se démocratise WWDC - Google.IO Des nouveautés chaque année Plein de form factors UX différentes Évolutions UI fréquentes
  • 49. .49 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Depuis 2015 Stabilité et convergence. iOS &Android Un format qui s’impose Flat Design Des langages établis Des IDE établis Moins de grosses nouveautés
  • 52. .52 OCTO I PART OF ACCENTURE© 2024 - All rights reserved AppBrain Un peu de DATA Tech Stack % new apps 30 days Flutter 20% RN 8% Ionic 4% Xamarin 0% MAUI 0% (?)
  • 54. .54 OCTO I PART OF ACCENTURE© 2024 - All rights reserved De bons retours sur les stores. Une diminution avérée des coûts. Un accueil contrasté des devs. Une bonne developer eXperience. Des communautés très actives. Nos REX de plus de 4 ans de missions hybrides Flutter et React Native !
  • 56. .56 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Une même base de code qui cible différents devices. Tabs Phone TV Desktop VR devices Codebase
  • 57. .57 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Limitation des coûts. Gain de productivité. … et les mêmes questions qu’il y a 10 ans. Une même base de code Web, Mobile et Desktop ?
  • 58. .58 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Ça existe déjà ! Pourtant, ~90% du temps est toujours passé dans les apps en 2024.
  • 60. .60 OCTO I PART OF ACCENTURE© 2024 - All rights reserved 1. Cross-platform / cross-channel avec React Native (2017) React Native React ��
  • 62. .62 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Dans ce contexte, 1. Gros travail sur la navigation. 2. Composants custom pour avoir une bonne sémantique web. 3. Quelques sujets UX/UI à régler. Code en commun au prix de : TTM web Côuts build & run
  • 65. .65 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Même UX entre les devices, certainement une forte mutualisation du code. Semble très adapté pour des apps “outils” mais qu’en est il du B2C ?
  • 67. .67 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Avez vous vraiment vraiment (mais vraiment) besoin d’une application mobile ? Engagement (++) Récurrence Différentiation (+) Stores (-) Coûts (--)
  • 68. .68 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Si la réponse est non … Réalisez en priorité un site web responsive.
  • 69. .69 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Si la réponse est oui … Considérez en priorité une app hybride native. (90% des Use Case, TTM, Coûts) Si vous visez le TOP 10, visez une app native. (perfs, pérennité, proximité plateforme) Voire même hybridez votre app existante.
  • 70. .70 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Et pourquoi pas tester une solution cross channel sur un périmètre restreint ? Flutter, pour un système interne. ReactNative Web, pour une app et un site B2C.
  • 71. .71 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pourquoi on en parle autant en 2024 ? Parce que la loi française se renforce pour suivre les directives européennes avec deux échéances majeures... Dès juin 2025, tous les nouveaux produits et services des entreprises privées et les services publics devront être accessibles. Et les parcs existants ? Des décrets imposent la mise en conformité de tous vos parcs existants d'ici 2030. Oui, TOUS. Les contrôles ont déjà commencé, avec des amendes salées à la clé. Investir maintenant, c'est aussi limiter les coûts à venir. Il est donc temps de considérer les opportunités offertes par l’accessibilité ! Accessibilité numérique : il est temps de s'y mettre ! 4 Sustainable.
  • 72. .72 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Sarah a roulé son siège sous la table et utilise le numérique sans difficulté. Olivier est daltonien : il ne perçoit pas toutes les couleurs. Chloé a une tendinite au poignet : elle ne peut plus utiliser sa souris. Radka ne parle pas encore bien français : elle a besoin de textes simples. OCTO I PART OF ACCENTURE © 2024 - All rights reserved
  • 73. .73 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Sources : CSA/SPS / DITP / INSEE / OMS 20 à 40 % des internautes ont un accès partiel, difficile ou impossible aux informations et services en ligne.
  • 74. .74 OCTO I PART OF ACCENTURE© 2024 - All rights reserved 2021 services publics Tous les services publics français doivent être accessibles depuis juillet 2021. Échéances de mise en conformité. 󰏃 󰎾 Seules les entreprises employant moins de dix personnes et dont le chiffre d’affaires annuel n’excède pas deux millions d’euros sont dispensées. 2030 TOUS ! Tout site internet, intranet, extranet, app mobile, progiciel, mobilier urbain numérique, billetteries, livres numériques, etc. de service public et des entreprises privées fournissants des produits et services vendus ou utilisés au sein de l'UE devra être accessible. 25 000 + 50 000 € par semestre, pour chaque produit non conforme. Cinq organismes de contrôle en France. Arcom / DGCCRF / Arcep / ACPR / AMF début des contrôles en 2024. 2025 nouveaux produits Tous les nouveaux produits et services des entreprises privées édités à partir du 28 juin 2025 devront être accessibles.
  • 75. .75 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Tous les produits et services vendus ou utilisés au sein de l’UE doivent être accessibles en juin 2030. App mobiles & sites web internet publics, e-commerce… App mobiles & sites web intranet, extranet, B2B… Progiciels web ou mob & outils numériques équipant le poste de travail. Livres numériques & logiciels de lecture. Documents bureautiques y compris PDF. Fichiers multimédia, vidéos, podcast… Mobilier urbain numérique. Seules les entreprises employant moins de dix personnes et dont le chiffre d’affaires annuel n’excède pas deux millions d’euros sont dispensées. Sans oublier le matériel hardware, les systèmes d’exploitation, les services bancaires, de gestion de monnaie électronique, les billeteries de transports, etc. Terminaux de paiement, billetteries, etc.
  • 76. 1. Images ❏ 1.1 Chaque image porteuse d’information a-t-elle une alternative textuelle ? ❏ 1.11.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ? ❏ 1.3 Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ? ❏ 1.4 Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ? ❏ 1.5 Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ? ❏ 1.6 Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ? ❏ 1.7 Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ? ❏ 1.8 Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ? ❏ 1.9 Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ? 2. Cadres ❏ 2.1 Chaque cadre a-t-il un titre de cadre ? ❏ 2.2 Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ? 3. Couleurs ❏ 3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ? ❏ 3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ? ❏ 3.3 Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ? 4. Multimédia ❏ 4.1 Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ? ❏ 4.2 Pour chaque média temporel pré-enregistré ayant une transcription textuelle ou une audiodescription synchronisée, celles-ci sont-elles pertinentes (hors cas particuliers) ? ❏ 4.3 Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ? ❏ 4.4 Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ? ❏ 4.5 Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée (hors cas particuliers) ? ❏ 4.6 Pour chaque média temporel pré-enregistré ayant une audiodescription synchronisée, celle-ci est-elle pertinente ? ❏ 4.7 Chaque média temporel est-il clairement identifiable (hors cas particuliers) ? ❏ 4.8 Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ? ❏ 4.9 Pour chaque média non temporel ayant une alternative, cette alternative est-elle pertinente ? ❏ 4.10 Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ? ❏ 4.11 La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et tout dispositif de pointage ? ❏ 4.12 La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ? ❏ 4.13 Chaque média temporel et non temporel est-il compatible avec les technologies d’assistance (hors cas particuliers) ? 10. Présentation de l’information ❏ 10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? ❏ 10.2 Dans chaque page web, le contenu visible porteur d’information reste-t-il présent lorsque les feuilles de styles sont désactivées ? ❏ 10.3 Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ? ❏ 10.4 Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200 %, au moins (hors cas particuliers) ? ❏ 10.5 Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ? ❏ 10.6 Dans chaque page web, chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ? ❏ 10.7 Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ? ❏ 10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ? ❏ 10.9 Dans chaque page web, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ? 10.10 Dans chaque page web, l’information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ? ❏ 10.11 Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ? ❏ 10.12 Dans chaque page web, les propriétés d’espacement du texte peuvent-elles être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ? ❏ 10.13 Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d’un composant d’interface sont-ils contrôlables par l’utilisateur (hors cas particuliers) ? ❏ 10.14 Dans chaque page web, les contenus additionnels apparaissant via les styles CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de pointage ? 11. Formulaires ❏ 11.1 Chaque champ de formulaire a-t-il une étiquette ? ❏ 11.2 Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ? ❏ 11.3 Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ? ❏ 11.4 Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ? ❏ 11.5 Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ? ❏ 11.6 Dans chaque formulaire, chaque regroupement de champs de même nature a-t-il une légende ? ❏ 11.7 Dans chaque formulaire, chaque légende associée à un regroupement de champs de même nature est-elle pertinente ? ❏ 11.8 Dans chaque formulaire, les items de même nature d’une liste de choix sont-ils regroupés de manière pertinente ? ❏ 11.9 Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ? ❏ 11.10 Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ? ❏ 11.11 Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ? ❏ 11.12 Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ? ❏ 11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ? 5. Tableaux ❏ 5.1 Chaque tableau de données complexe a-t-il un résumé ? ❏ 5.2 Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ? ❏ 5.3 Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ? ❏ 5.4 Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ? ❏ 5.5 Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ? ❏ 5.6 Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ? ❏ 5.7 Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ? ❏ 5.8 Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données. Cette règle est-elle respectée ? 6. Liens ❏ 6.1 Chaque lien est-il explicite (hors cas particuliers) ? ❏ 6.2 Dans chaque page web, chaque lien a-t-il un intitulé ? 7. Scripts ❏ 7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ? ❏ 7.2 Pour chaque script ayant une alternative, cette alternative est-elle pertinente ? ❏ 7.3 Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ? ❏ 7.4 Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ? ❏ 7.5 Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ? 8. Éléments obligatoires ❏ 8.1 Chaque page web est-elle définie par un type de document ? ❏ 8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié ? ❏ 8.3 Dans chaque page web, la langue par défaut est-elle présente ? ❏ 8.4 Pour chaque page web ayant une langue par défaut, le code de langue est-il pertinent ? ❏ 8.5 Chaque page web a-t-elle un titre de page ? ❏ 8.6 Pour chaque page web ayant un titre de page, ce titre est-il pertinent ? ❏ 8.7 Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ? ❏ 8.8 Dans chaque page web, le code de langue de chaque changement de langue est-il valide et pertinent ? ❏ 8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ? ❏ 8.10 Dans chaque page web, les changements du sens de lecture sont-ils signalés ? 9. Structuration de l’information ❏ 9.1 Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ? ❏ 9.2 Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ? ❏ 9.3 Dans chaque page web, chaque liste est-elle correctement structurée ? ❏ 9.4 Dans chaque page web, chaque citation est-elle correctement indiquée ? 12. Navigation ❏ 12.1 Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ? ❏ 12.2 Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ? ❏ 12.3 La page « plan du site » est-elle pertinente ? ❏ 12.4 Dans chaque ensemble de pages, la page « plan du site » est-elle accessible à partir d’une fonctionnalité identique ? ❏ 12.5 Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ? ❏ 12.6 Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ? ❏ 12.7 Dans chaque page web, un lien d’évitement ou d’accès rapide à la zone de contenu principal est-il présent (hors cas particuliers) ? ❏ 12.8 Dans chaque page web, l’ordre de tabulation est-il cohérent ? ❏ 12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ? ❏ 12.10 Dans chaque page web, les raccourcis clavier n’utilisant qu’une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils contrôlables par l’utilisateur ? ❏ 12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ? 13. Consultation ❏ 13.1 Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ? ❏ 13.2 Dans chaque page web, l’ouverture d’une nouvelle fenêtre ne doit pas être déclenchée sans action de l’utilisateur. Cette règle est-elle respectée ? ❏ 13.3 Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ? ❏ 13.4 Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ? ❏ 13.5 Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) a-t-il une alternative ? ❏ 13.6 Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ? ❏ 13.7 Dans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ? ❏ 13.8 Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ? ❏ 13.9 Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ? ❏ 13.10 Dans chaque page web, les fonctionnalités utilisables ou disponibles au moyen d’un geste complexe peuvent-elles être également disponibles au moyen d’un geste simple (hors cas particuliers) ? ❏ 13.11 Dans chaque page web, les actions déclenchées au moyen d’un dispositif de pointage sur un point unique de l’écran peuvent-elles faire l’objet d’une annulation (hors cas particuliers) ? ❏ 13.12 Dans chaque page web, les fonctionnalités qui impliquent un mouvement de l’appareil ou vers l’appareil peuvent-elles être satisfaites de manière alternative (hors cas particuliers) ? Déclarations obligatoires ❏ Pour chaque site web, une déclaration d’accessibilité est-elle présente ? ❏ Pour chaque site web, la déclaration d’accessibilité est-elle valide ? ❏ Sur la page d’accueil de chaque site web, la mention obligatoire du niveau de conformité est-elle présente ? ❏ Sur chaque page où elle est présente, la mention obligatoire du niveau de conformité est-elle valide ? ❏ Le schéma pluriannuel de mise en accessibilité de l’entité concernée est-il disponible depuis chaque site web ? ❏ Le schéma pluriannuel de mise en accessibilité disponible depuis chaque site web est-il valide ? ❏ Pour chaque schéma pluriannuel de mise en accessibilité, le bilan des plans d’actions annuels est-il disponible ? Critères du RGAA 4.1.2 Checklist de l’obligation légale d’accessibilité web. 󰏃 󰎾 Par où commencer ?
  • 78. .78 OCTO I PART OF ACCENTURE© 2024 - All rights reserved surcoût garanti ! Pas à la dernière minute… Ce n’est pas lorsque le gâteau est cuit, qu’il faut se soucier de le rendre consommable par tout le monde, y compris personnes intolérantes au gluten… ou au lactose… La norme d’accessibilité est une norme de fabrication.
  • 79. .79 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Répartition des critères d’accessibilité selon les compétences nécessaires à leur réussite. Tous les profils sont concernés : c’est un travail d’équipe sous la houlette des PO. 61 % dev web front HTML/JS/ARIA 13 % design (UX+UI) inclusif et accessible. 26 % productions des contenus (textes, images, graphiques, PDF, vidéos, transcripts…)
  • 80. .80 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Attention : l’intervention seule d’un·e expert·e ne suffit pas ! Expert·e RGAA Nécessaire montée en compétences Référent·e accessibilité Dev Front Product Owner Rédacteur /trices Designer ➔ Sensibilisez & formez l’ensemble de votre équipe (dev, PO, QA, etc.). ➔ Tout le monde n’a pas besoin d’être expert·e mais chacun·e doit connaître son impact a11y.
  • 82. .82 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pas en ajoutant un bouton magique… L’ajout de fonctionnalités n’est PAS ce qui rend un produit accessible ! Souvent même, ces fonctionnalités ajoutent des problèmes d’accessibilité ! Et elles n’évitent aucunement les poursuites judiciaires ! Voir le site dédié : https://overlayfactsheet.com
  • 83. .83 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pas en commençant par un audit RGAA. Si aucune démarche d’accessibilité a été appliquée, l’audit ne vous apprendra rien : la liste d’erreurs sera maximale (bien que non exhaustive). RGAA (106 critères, 258 tests — par page) = liste de contrôle de fin de cycle en V pour établir la conformité : inadaptée pour un état des lieux initial. Ça ne dit pas comment faire ! Exemple de rapport d’audit RGAA = +60 pages Word, +1300 lignes Excel…
  • 84. .84 OCTO I PART OF ACCENTURE © 2024 - All rights reserved 1. Cibler les interfaces des produits et services concernés. 2. Saisir l’opportunité des refontes prévues pour incorporer l’accessibilité (puis prioriser en fonction de l’enjeu stratégique, utilisateur/trices, etc.). 3. Stopper la génération d’erreurs en formant les équipes (nécessité d’internaliser le savoir-faire). 4. Écoper la dette technique d’accessibilité par itérations progressives. FRONT END BACK END Reprenez le contrôle a11y de l’existant : L’accessibilité ne concerne que l’interface
  • 87. .87 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pour pouvoir être correctement exploité par les différents outils, le HTML de notre site doit respecter les specifications du W3C. (des outils automatisés existent : mettez-les à profit !)
  • 89. .89 OCTO I PART OF ACCENTURE© 2024 - All rights reserved ✓ Pas besoin de connaissances préalables en a11y. ✓ Mise en place facile / rapide. ✓ Premier pas pour garantir un niveau minimum. ✓ Permet aussi de monitorer l’accessibilité. Tests automatisés dès les premières lignes de code. Erreurs d’accessibilité courantes (détectables via tests auto). Source : étude WebAIM de 2024 sur 1 million de sites web. https://webaim.org/projects/million/ De nombreux outils / possibilités existent : tests intégrés à la CI, extensions navigateurs, SaaS, etc.
  • 90. .90 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Répartition des tests d’accessibilité. env. 25 % des tests d’accessibilité sont automatisables. La majorité doit être vérifiée humainement, par des tests manuels. Corollaire : passer les tests auto permet d’atteindre env. 25 % de conformité. 🎉 25 %
  • 91. THERE IS A BETTER WAY Inspecter en 10 Easy Checks. HTML valide ✓ 2. Tests auto ✓
  • 93. .93 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Test : naviguer sur le site sans souris ni trackpad à l’aide du clavier uniquement et vérifier : ❏ L’ordre de navigation est logique ; ❏ Le focus reste toujours visible ; ❏ Tous les éléments interactifs sont activables : liens, menus déroulants, boutons, vidéos, carousels… ; ❏ Pas de piège : on peut sortir facilement d’une modale, d’un menu ou d’une vidéo par exemple ; ❏ Un lien d’évitement « Aller au contenu » est présent. Exemple : naviguer au clavier (un quotidien pour des milliers d’internautes). Easy Checks – A First Review of Web Accessibility by W3C : https://www.w3.org/WAI/test-evaluate/preliminary/
  • 94. .94 OCTO I PART OF ACCENTURE© 2024 - All rights reserved ✓ Faciles : n’importe qui peut faire ces tests, sans prérequis technique, oui, toi aussi ! ✓ Seulement 10 tests manuels ! ✓ Rapides : en 10 minutes. ✓ À faire régulièrement : à chaque nouvelle feature, à chaque sprint, etc. ✓ Permet de prétendre à environ 50% de conformité. 🎉 10 Easy Checks — W3C Easy Checks – A First Review of Web Accessibility by W3C : https://www.w3.org/WAI/test-evaluate/preliminary/ 50 %
  • 95. THERE IS A BETTER WAY Ready pour l’audit de conformité. Easy Checks ✓ Tests auto ✓ 3. HTML valide ✓
  • 96. .96 OCTO I PART OF ACCENTURE© 2024 - All rights reserved ➔ pour identifier les derniers défauts ; ➔ et établir la conformité. Audit de conformité Prérequis : ✓ HTML valide ✓ tests auto ✓ Easy Checks audit correctifs contre-visite Publication des mentions et documents obligatoires. ✓ Formation préalable nécessaire pour pouvoir opérer les correctifs (et maintenir le niveau sur la durée).
  • 97. .97 THERE IS A BETTER WAY ● Il est temps de s’y mettre dès maintenant pour anticiper les échéances afin d’éviter les sanctions ; ● Ne foncez pas sur l’audit de conformité, mais progressez par pas à pas, par quick wins ; ● Nouveaux produits et parc existant : même combat ! Go go go ! À retenir :
  • 98. THERE IS A BETTER WAY Une démarche progressive (10 tests manuels en 10 minutes) ~25 % d’effort pour 50 % de conformité 🎉 Easy Checks ✓ 2. ~5 % d’effort pour 25 %de conformité 🎉 Tests auto ✓ 1. 100 % de conformité 🎉 3. Audit de conformité ✓ THERE IS A BETTER WAY .98 0. HTML valide ✓
  • 99. .99 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Pour aller plus loin, consultez notre RefCard a11y : suivez le guide pour ne plus laisser personne au bord du chemin. Unauthorized propagation prohibited. For internal use only.
  • 100. .100 OCTO I PART OF ACCENTURE© 2024 - All rights reserved IA Générative ● Intégrez la Gen AI dans la toolbox de vos développeurs ; ● Intégrez la GenAI dans vos applications via des API. 1 GenAI. Développement hybride ● Vecteur d’efficience opérationnelle ; ● 3 scénarios : PWA — Hybride natif — Apps natives. Des architectures continues et composables ● Introduisez l’architecture continue pour faire évoluer et grandir sans rupture les systèmes d’informations au fur et à mesure des besoins avérés ; ● Déployez des architectures composables (comme un système de LEGO) pour répondre aux enjeux d’agilité et d'innovation. Envisagez la MACH Architecture. Take away 3 Efficience opérationnelle. 2 Archi. 4 Sustainable. Accessibilité numérique ● Lancez dès à présent une démarche d’Accessibilité numérique pour vos nouvelles applications et votre parc existant ; ● De nouveaux décrets et organismes de contrôles imposent des sanctions en cas de non conformité ; ● Privilégiez une démarche itérative via des quick win plutôt que de lancer un audit RGAA à T0.
  • 101. .101 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Return on time invested R.O.T.I De 1 5 à Unauthorized propagation prohibited. For internal use only.
  • 102. .102 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Retrouvez tous nos épisodes sur les Tech Trends 2024 pour délivrer vos produits stratégiques. Unauthorized propagation prohibited. For internal use only.