1




  Intégrer l'accessibilité
dans une démarche qualité


          #www2012
2




Paris-Web
Association de bénévoles
Promouvoir le développement web de qualité

Conférence annuelle
Paris Web 2012 – 18 au 20 octobre


@parisweb – #parisweb
3



Sébastien Delorme                Delphine Malassingne
@sebcbien                        @nissone

Responsable accessibilité        Responsable qualité
numérique et associé             chez Ekino
chez Atalan




   Accessibilité numérique et            Plateformes digitales
   sensibilisation au handicap     Conception, réalisation, exploitation
4




Plan
Objectif
Accessibilité numérique
Une petite histoire
4 constats, 4 principes
5


             Objectif
Pas convaincre
Éviter les situations d’échec
Intégrer l’accessibilité
dans une démarche continue
6


     Accessibilité numérique
Servir contenu et fonctionnalités d’un site
ou d’une application quel que soit le cadre
d’utilisation de l’internaute
(matériel, logiciel, contextuel)
7




L’histoire de Léonard
8
 Moi, j'utiliserais jamais de
 téléporteur car le Sheldon
d'origine serait désintégré…
9
                                                    Moi, j'utiliserais jamais de
                                                    téléporteur car le Sheldon
                                                   d'origine serait désintégré…




Transcript :

Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
10
                                      Moi, j'utiliserais jamais de
                                      téléporteur car le Sheldon
                                     d'origine serait désintégré…




                                 Moi j’utiliserais
                              jamais de téléporteur

Transcript :
Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
11
              Sheldon Cooper
                                      Moi, j'utiliserais jamais de
                                      téléporteur car le Sheldon
                                     d'origine serait désintégré…




                                  Moi j’utiliserais
                               jamais de téléporteur

Transcript :
Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
12
              Sheldon Cooper
                                      Moi, j'utiliserais jamais de
                                      téléporteur car le Sheldon
                                     d'origine serait désintégré…




                                  Moi j’utiliserais
                               jamais de téléporteur

Transcript :
Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
13



                                       Aujourd’hui j’ai fait
                                       une conférence sur
                                         l’accessibilité
                                      Web, plus précisément
                                              sur...




          Transcript :                Moi j’utiliserais
                                jamais de téléporteur
          Yannick Pavard (Sys-Tech) : aujourd’hui j’ai fait une conférence sur l’accessibilité Web,
          plus précisément sur un standard au Gouvernement qui s’appelle SGQuery-008 qui est pas
          mal influencé des WCAG et ma présentation était plutôt axée sur l’intégration avec les CMS.
          J’avais pris les CMS Wordpress et Typo3 comme outils de démonstration…




Transcript :
Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait
désintégré
14


Épilogue
Résultat décevant
Perte de temps
Découragement
15


Constat #1
 Charte basée sur
 les 3 couleurs primaires
 Déclinées pour les titres
16


Constat #1
 Penser aux contrastes
 dans la charte graphique
17


Principe #1
 L’accessibilité en
 amont
18


Principe #1
 Anticipation pour choix
 fonctionnels
 et techniques
 Gestion du temps
 Signal fort au marché
19


Principe #1
 Choisir une direction
 et se fixer des objectifs
 Chartes, cahiers des charges,
 spécifications…
 Pas un paragraphe
 Dilution dans les contenus
20


Par rapport à l’histoire de Léonard
             Anticiper
             l’emplacement des
             sous-titres et de
             l’audio-description
21


Constat #2
 Initiative isolée dans une
 chaine de production
 Des efforts rapidement
 perdus
22


Constat #2
 Sensibiliser et communiquer
 Trouver des soutiens
23


Principe #2
 Un sponsor
24


Principe #2
 Responsabiliser

 Favoriser les échanges

 Faciliter l’appropriation
 collective des pratiques
25


Principe #2
 Convaincre !
 Utiliser des arguments
 ciblés et adaptés
 Pas un sponsor expert
 Un sponsor convaincu
26


Par rapport à l’histoire de Léonard
             Obtenir le brief de
             l’interview
             Intégrer les charges au
             planning
27


Constat #3
 Un(e) super expert(e)
 Manque de
 visibilité, découragement
 & confrontations
28


Constat #3
 Répartir les tâches
 Faire participer
 chaque intervenant
29


Principe #3
 Répartition des
 responsabilités
30


Principe #3
 Répartir en petits lots
 Construire collectivement
 la compétence
 Intégrer l’accessibilité dans
 les automatismes de
 production de chacun
31


Principe #3
 Sensibilisation par métier

 Fiches
 Accompagnement

 Formation
 (quand cela est possible)
32


Par rapport à l’histoire de Léonard
             Le sous-titrage aurait
             pu directement être
             réalisé par l’équipe
             vidéo
33


Constat #4
 Excellent niveau
 visé et atteint
 …perdu 3 mois
 après la mise en ligne
34


Constat #4
 Échelonner les objectifs à
 atteindre
 Mettre en ligne,
 améliorer, mettre en
 ligne, améliorer…
35


Principe #4
 Amélioration
 continue
36


Principe #4
 Tout ne peux pas être traité
 d’un coup et être pérenne
 Cycle itératif permet de
 mesurer progrès
37


Principe #4
 Pas par monobloc

 Multi-touches organisées,
 priorisées et réparties
38


Accessibilité en démarche qualité
            Direction fixée en amont
            Soutien transverse
            Montée en compétence de
            tous les intervenants
            Cycle itératif d’amélioration
            continue
39




Paris Web – http://www.paris-web.fr
Sébastien Delorme – http://ideance.net
Delphine Malassingne – http://nissone.com
Atalan – http://atalan.fr
Ekino – http://ekino.com
Notices par métier – http://accede-web.com/ (à partir de juin 2012)


             WWW 2012 – www2012.wwwconference.org
40




Crédits photos :
jagedalo, Sébastien Delorme, Atalan, iirraa, Honou, Thomas Hawk, freya.gefn, Biblioteca de
Arte-Fundação Calouste Gulbenkian, eindienstag, Andy Ciordia, Mervi of Tomato Branch,
Ndecam, Géricault Le Radeau de la Méduse

Intégrer l'accessibilité dans une démarche qualité

  • 1.
    1 Intégrerl'accessibilité dans une démarche qualité #www2012
  • 2.
    2 Paris-Web Association de bénévoles Promouvoirle développement web de qualité Conférence annuelle Paris Web 2012 – 18 au 20 octobre @parisweb – #parisweb
  • 3.
    3 Sébastien Delorme Delphine Malassingne @sebcbien @nissone Responsable accessibilité Responsable qualité numérique et associé chez Ekino chez Atalan Accessibilité numérique et Plateformes digitales sensibilisation au handicap Conception, réalisation, exploitation
  • 4.
  • 5.
    5 Objectif Pas convaincre Éviter les situations d’échec Intégrer l’accessibilité dans une démarche continue
  • 6.
    6 Accessibilité numérique Servir contenu et fonctionnalités d’un site ou d’une application quel que soit le cadre d’utilisation de l’internaute (matériel, logiciel, contextuel)
  • 7.
  • 8.
    8 Moi, j'utiliseraisjamais de téléporteur car le Sheldon d'origine serait désintégré…
  • 9.
    9 Moi, j'utiliserais jamais de téléporteur car le Sheldon d'origine serait désintégré… Transcript : Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
  • 10.
    10 Moi, j'utiliserais jamais de téléporteur car le Sheldon d'origine serait désintégré… Moi j’utiliserais jamais de téléporteur Transcript : Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
  • 11.
    11 Sheldon Cooper Moi, j'utiliserais jamais de téléporteur car le Sheldon d'origine serait désintégré… Moi j’utiliserais jamais de téléporteur Transcript : Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
  • 12.
    12 Sheldon Cooper Moi, j'utiliserais jamais de téléporteur car le Sheldon d'origine serait désintégré… Moi j’utiliserais jamais de téléporteur Transcript : Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
  • 13.
    13 Aujourd’hui j’ai fait une conférence sur l’accessibilité Web, plus précisément sur... Transcript : Moi j’utiliserais jamais de téléporteur Yannick Pavard (Sys-Tech) : aujourd’hui j’ai fait une conférence sur l’accessibilité Web, plus précisément sur un standard au Gouvernement qui s’appelle SGQuery-008 qui est pas mal influencé des WCAG et ma présentation était plutôt axée sur l’intégration avec les CMS. J’avais pris les CMS Wordpress et Typo3 comme outils de démonstration… Transcript : Sheldon : moi, j’utiliserais jamais de téléporteur car le Sheldon d’origine serait désintégré
  • 14.
  • 15.
    15 Constat #1 Chartebasée sur les 3 couleurs primaires Déclinées pour les titres
  • 16.
    16 Constat #1 Penseraux contrastes dans la charte graphique
  • 17.
  • 18.
    18 Principe #1 Anticipationpour choix fonctionnels et techniques Gestion du temps Signal fort au marché
  • 19.
    19 Principe #1 Choisirune direction et se fixer des objectifs Chartes, cahiers des charges, spécifications… Pas un paragraphe Dilution dans les contenus
  • 20.
    20 Par rapport àl’histoire de Léonard Anticiper l’emplacement des sous-titres et de l’audio-description
  • 21.
    21 Constat #2 Initiativeisolée dans une chaine de production Des efforts rapidement perdus
  • 22.
    22 Constat #2 Sensibiliseret communiquer Trouver des soutiens
  • 23.
  • 24.
    24 Principe #2 Responsabiliser Favoriser les échanges Faciliter l’appropriation collective des pratiques
  • 25.
    25 Principe #2 Convaincre! Utiliser des arguments ciblés et adaptés Pas un sponsor expert Un sponsor convaincu
  • 26.
    26 Par rapport àl’histoire de Léonard Obtenir le brief de l’interview Intégrer les charges au planning
  • 27.
    27 Constat #3 Un(e)super expert(e) Manque de visibilité, découragement & confrontations
  • 28.
    28 Constat #3 Répartirles tâches Faire participer chaque intervenant
  • 29.
    29 Principe #3 Répartitiondes responsabilités
  • 30.
    30 Principe #3 Répartiren petits lots Construire collectivement la compétence Intégrer l’accessibilité dans les automatismes de production de chacun
  • 31.
    31 Principe #3 Sensibilisationpar métier Fiches Accompagnement Formation (quand cela est possible)
  • 32.
    32 Par rapport àl’histoire de Léonard Le sous-titrage aurait pu directement être réalisé par l’équipe vidéo
  • 33.
    33 Constat #4 Excellentniveau visé et atteint …perdu 3 mois après la mise en ligne
  • 34.
    34 Constat #4 Échelonnerles objectifs à atteindre Mettre en ligne, améliorer, mettre en ligne, améliorer…
  • 35.
  • 36.
    36 Principe #4 Toutne peux pas être traité d’un coup et être pérenne Cycle itératif permet de mesurer progrès
  • 37.
    37 Principe #4 Paspar monobloc Multi-touches organisées, priorisées et réparties
  • 38.
    38 Accessibilité en démarchequalité Direction fixée en amont Soutien transverse Montée en compétence de tous les intervenants Cycle itératif d’amélioration continue
  • 39.
    39 Paris Web –http://www.paris-web.fr Sébastien Delorme – http://ideance.net Delphine Malassingne – http://nissone.com Atalan – http://atalan.fr Ekino – http://ekino.com Notices par métier – http://accede-web.com/ (à partir de juin 2012) WWW 2012 – www2012.wwwconference.org
  • 40.
    40 Crédits photos : jagedalo,Sébastien Delorme, Atalan, iirraa, Honou, Thomas Hawk, freya.gefn, Biblioteca de Arte-Fundação Calouste Gulbenkian, eindienstag, Andy Ciordia, Mervi of Tomato Branch, Ndecam, Géricault Le Radeau de la Méduse

Notes de l'éditeur

  • #9 (tout l’exemple est à remplacer par une vidéo de BBT)